I ran in a very confusing problem today

I have a canvas, and a div, like this

<canvas id="canvas" width="800" height="400"></canvas>
<div id="xy"></div>

I then set the properties of the div via a css file, e.g. position:absolute and display:none Then, i write the X/Y Position in the div via JS and try to set the properties of the div so that the div follows the mouse around, like this

var div = document.getElementById("xy");
var x = e.pageX - this.offsetLeft - 1;
var y = e.pageY - this.offsetTop - y0 - 0.5;
div.style.display = "block";
div.style.left = e.pageX + 25;
div.style.top = e.pageY -10;
div.style.backgroundColor = "#f00";

The funny thing now is: i can set the display and backgroundColor without a problem, but the left and top properties don't work. If i delete my DOCTYPE-declaration in my HTML file though, i can modify the left and top properties without any trouble. Working without doctype is out of the question of course. Am i doing something that shouldn't be done or missing something completely obvious?

I ran in a very confusing problem today

I have a canvas, and a div, like this

<canvas id="canvas" width="800" height="400"></canvas>
<div id="xy"></div>

I then set the properties of the div via a css file, e.g. position:absolute and display:none Then, i write the X/Y Position in the div via JS and try to set the properties of the div so that the div follows the mouse around, like this

var div = document.getElementById("xy");
var x = e.pageX - this.offsetLeft - 1;
var y = e.pageY - this.offsetTop - y0 - 0.5;
div.style.display = "block";
div.style.left = e.pageX + 25;
div.style.top = e.pageY -10;
div.style.backgroundColor = "#f00";

The funny thing now is: i can set the display and backgroundColor without a problem, but the left and top properties don't work. If i delete my DOCTYPE-declaration in my HTML file though, i can modify the left and top properties without any trouble. Working without doctype is out of the question of course. Am i doing something that shouldn't be done or missing something completely obvious?

• javascript
• css
• html
• css-position

• What's "e" in that code? edit oh that's an event handler. – Pointy Commented Apr 27, 2012 at 13:15

3 Answers 3

You have forgotten "px":

div.style.left = (e.pageX + 25) + 'px';
div.style.top = (e.pageY -10) + 'px';

You might also want to add div.style.position = "absolute";

If you think there's any chance that e.pageX or e.pageY will be strings rather than numbers, throw a parseInt in:

div.style.left = (parseInt(e.pageX, 10) + 25) + 'px';
div.style.top = (parseInt(e.pageY, 10) - 10) + 'px';

Another method for setting style properties like DIV objects is using the setProperty method

You can check below Javascript code sample

document.getElementById('div').style.setProperty("top","100px");

I also faced same problem, but when I added a space into the empty div, it started positioning properly. i.e.

div.innerHTML =