Why is element A invisible? It seems that appendChild() function is ignored. I can only see the B element. (element A is visible if I push it inside the controls) :(
var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
var b = document.createElement('B');
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.appendChild(a);
map.controls[google.maps.ControlPosition.LEFT].push(b);
Your problem is that you have to display both the elements on a block level
var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
a.style.display = 'block'; //style block level
var b = document.createElement('B');
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.style.border = '1px solid black';
b.style.display = 'block'; //style block level
document.body.appendChild(b);
b.appendChild(a);
https://jsfiddle.net/9rnzbuqh/
<a> is an inline element by default, and you can't set width or height of an inline element. You have to change its display to block:
var a = document.createElement('A');
a.style.width = '50px';
a.style.height = '50px';
a.style.cursor = 'pointer';
a.style.backgroundColor = 'rgba(10,20,30,1.0)';
a.style.display = 'block';
var b = document.createElement('B');
b.style.width = '200px';
b.style.height = '200px';
b.style.backgroundColor = 'rgba(230,230,230,0.6)';
b.style.display = 'block';
b.appendChild(a);
map.controls[google.maps.ControlPosition.LEFT].push(b);
I figured out what I was doing. It worked without setting the display style but I had no idea why.
https://jsfiddle.net/9rnzbuqh/78/
var c = document.createElement('div');
c.style.height = '263px';
c.style.width = '350px';
c.style.marginLeft = '0px';
c.style.marginTop = '0px';
c.style.backgroundImage = "url(https://upload.wikimedia.org/wikipedia/en/5/5f/TomandJerryTitleCardc.jpg)";
var d = document.createElement('div');
d.style.background = 'rgba(230,230,230,0.6)';
d.style.paddingBottom = '70px';
d.style.paddingLeft = '40px';
d.style.paddingRight = '40px';
d.appendChild(c);
document.body.appendChild(d);
and
div {
width:400px;
}
Related
I'm currently experiencing a problem where if I click be redirected somewhere the non-custom cursor shows it's self for a brief moment.
https://63dd6d95706526047713d912--maciej-czerwonka-beta.netlify.app
When clicking on "PROJECTS" you get the loading animation as expected but the default cursor apears for a second between loading.
Any help would be greatly appreciated.
I'm on Brave (Chromium).
Cursor:
const cursor = document.querySelector("#cursor");
const cursorBorder = document.querySelector("#cursor-border");
const cursorPos = { x: -10, y: -10 };
const cursorBorderPos = { x: 0, y: 0 };
document.addEventListener("mousemove", (e) => {
cursorPos.x = e.clientX;
cursorPos.y = e.clientY;
cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
});
requestAnimationFrame(function loop() {
const easting = 5;
cursorBorderPos.x += (cursorPos.x - cursorBorderPos.x) / easting;
cursorBorderPos.y += (cursorPos.y - cursorBorderPos.y) / easting;
cursorBorder.style.transform = `translate(${cursorBorderPos.x}px, ${cursorBorderPos.y}px)`;
requestAnimationFrame(loop);
});
document.querySelectorAll("[data-cursor]").forEach((item) => {item.addEventListener("mouseover", (e) => {if (item.dataset.cursor === "favicon") {
cursor.style.height = "45px";
cursor.style.width = "65px";
cursor.style.borderRadius = "10%";
cursor.style.top = "-22.5px";
cursor.style.left = "-32.5px";
cursor.style.opacity = "0.25";
cursorBorder.style.opacity = ".5";
};
if (item.dataset.cursor === "back") {
cursor.style.height = "45px";
cursor.style.width = "45px";
cursor.style.borderRadius = "10%";
cursor.style.top = "-22.5px";
cursor.style.left = "-22.5px";
cursor.style.opacity = "0.25";
cursorBorder.style.opacity = ".5";
};
if (item.dataset.cursor === "lang") {
cursor.style.height = "26px";
cursor.style.width = "32px";
cursor.style.borderRadius = "20%";
cursor.style.top = "-13px";
cursor.style.left = "-16px";
cursor.style.opacity = "0.25";
cursorBorder.style.opacity = ".5";
};
if (item.dataset.cursor === "href-big") {
cursor.style.height = "60px";
cursor.style.width = "60px";
cursor.style.top = "-30px";
cursor.style.left = "-30px";
cursor.style.opacity = "0.25";
cursorBorder.style.opacity = ".5";
};
if (item.dataset.cursor === "href") {
cursor.style.height = "40px";
cursor.style.width = "40px";
cursor.style.top = "-20px";
cursor.style.left = "-20px";
cursor.style.opacity = "0.25";
cursorBorder.style.opacity = ".5";
}
});
item.addEventListener("mouseout", (e) => {
cursorBorder.style.opacity = "1";
cursor.style.height = "5px";
cursor.style.width = "5px";
cursor.style.top = "-2.5px";
cursor.style.left = "-2.5px";
cursor.style.borderRadius = "50%";
cursor.style.opacity = "0.75";
});
});
In every html document I have <style>*{cursor:none}body{background-color: black;}</style> as the first thing in the head.
Currently I am using this code:
var mousePosition;
var offset = [0,0];
var div;
var isDown = false;
div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "0px";
div.style.top = "0px";
div.style.width = "237px";
div.style.height = "50px";
div.style.background = "red";
div.style.padding = "15px 0px 0px 0px";
div.style.color = "blue";
div.id = "clock";
document.body.appendChild(div);
div.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
div.offsetLeft - e.clientX,
div.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
div.style.left = (mousePosition.x + offset[0]) + 'px';
div.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
The code allows me to move a div using my mouse. I'm not very experienced with JavaScript.
But I was hoping there is an easy method to cache the end location of the Div. So that when I close and open the HTML file, the Div will start in its last cached location.
Thanks.
You can use localStorage to cache the location information into your browser.
window.localStorage.setItem('divPosition', JSON.stringify({
left: div.style.left,
top: div.style.top
}));
console.log(JSON.parse(window.localStorage.getItem('divPosition')));
One caveat is that localStorage doesn't reliably accept anything but string values so adding more robust information requires stringifying and parsing the data.
I have a js file which uses amchart,
I'm having a problem of total percentage in Donut chart not having the value as 100%.
I followed their doc AmPieChart#adjustPrecision
But still even after setting
charti.adjustPrecision= true; the total percentage is not tallied to 100%
Below is my piece of code.
chart = new AmCharts.AmPieChart();
chart.colors = ["#7498BF", "#76B900"];
if(combineRow){
chart.groupPercent = 5;
}
chart.startDuration = 0;
chart.dataProvider = dataJson;
chart.titleField = "category";
chart.descriptionField = "description";
chart.valueField = "amount";
chart.radius = "30%";
chart.outlineThickness = 2;
chart.sequencedAnimation = false;
chart.startEffect = "bounce";
chart.startRadius="30";
chart.colorField = "color";
chart.startDuration = 0;
chart.innerRadius = "30%";
chart.labelsEnabled = false;
chart.labelRadius = "-1";
chart.hideLabelsPercent="3";
chart.balloonText="[[description]]: [[percents]]% ($[[value]])";
chart.adjustPrecision= true;
legend = new AmCharts.AmLegend();
legend.align = "center";
legend.markerType = "square";
legend.markerLabelGap = 5;
legend.markerSize = 12;
legend.marginTop = 0;
legend.marginBottom = 0;
legend.spacing = 20;
legend.position = "right";
legend.fontSize = 10;
legend.valueText = "[[percents]]%";
legend.valueWidth = 83;
chart.addLegend(legend);
chart.addListener("clickSlice", callBackFunction);
chart.write(containerId);
Can you help me out?
my extension is a frame that share the screen with any webpages. I have a button that calls this function(dot.js), but its printing over my frame too. How can i set the area allowed to draw the dots?
dot.js
function printMousePos(event, autor) {
var div = document.createElement("div");
div.style.height = "10px";
div.style.width = "10px";
div.style.backgroundColor = "black";
div.style.position = "fixed";
div.style.left = event.clientX+"px";
div.style.top = event.clientY+"px";
div.style.borderRadius = "50px";
console.log(
"clientX: " + event.clientX +
" - clientY: " + event.clientY);
document.body.appendChild(div);
}
document.addEventListener("mousedown", function(evt){
printMousePos(evt, "autor1");
})
;
Thanks
I am trying to get this code to work in a way that where I click on item one it will do one function, and when I click on item two it will do a different function. Right now they all go to the same thing and I can't seem to pull it apart.
var list = [];
list[0] = ["zero"];
list[1] = ["one"];
list[2] = ["two"];
list[3] = ["three"];
function Make(){
for ( var i = 0; i < 4 ; i++ ) {
var div = document.createElement("div");
div.style.width = "10px";
div.style.height = "10px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "10px 10px auto";
div.style.cursor = "pointer";
div.innerHTML = list[i];
!function(){
var index = 0;
div.onclick = function () { alert("this works"); };
}();
document.body.appendChild(div);
}
}
Did you mean something like this?
<script type="text/javascript">
var list = [];
list[0] = ["zero"];
list[1] = ["one"];
list[2] = ["two"];
list[3] = ["three"];
function Make(){
for ( var i = 0; i < 4 ; i++ ) {
var div = document.createElement("div");
div.style.width = "10px";
div.style.height = "10px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "10px 10px auto";
div.style.cursor = "pointer";
div.innerHTML = list[i];
!function(){
var index = 0;
div.onclick = function () { doSomething(this); };
}();
document.body.appendChild(div);
}
}
function doSomething(element){
var value = element.innerHTML;
alert('clicked : '+ value);
switch(value){
case "zero":
//Your code here
break;
case "one":
//Your code here
break;
}
}
Make();
</script>