Home/ Questions/Q 6134883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T17:24:42+00:00

I have a div element that I’m trying, basically, to move wherever the user

  • 0

I have a div element that I’m trying, basically, to move wherever the user clicks on a canvas element.

I have a CSS style for the div setting the position to absolute, with an initial position (top,left).

I have javascript that captures the user’s click event, and sets the div element’s left and top to the location of the click, and set the text of the div.

My problem is that this worked fine before I set a DOCTYPE on the html file. Now the div stays in the same place, while displaying the new text, and I’m assuming the position issue is something to do with how I’m using CSS.

What’s the right way to set the position of a div element? The html goes more or less like this:

<!DOCTYPE HTML>
<html>
<head>
   <style type="text/css">
    #myDiv{
     position:absolute;
     top:100px;
     left:835px;
   }
   </style>
</head>
<body><canvas id='canv'></canvas>
<div id='myDiv'>-</div>
</body>
</html>

Here’s what the javascript looks like, which locates the div for me:

var theDiv = document.getElementById('myDiv');
theDiv.style.left = selShp.pinx; // selShp.pinx is the position of a shape object I've created, which is how I position the shape on the canvas
theDiv.style.top = selShp.piny; // piny is just the y position

Before setting a DOCTYPE, this worked beautifully on Chrome, Firefox, Safari mobile, and Opera. With it set, I can render to the canvas in IE9, but then the positioning of the div in all the browser stops working – just stays in the initial position.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I figured out my problem. My javascript for setting the new position went like this:

    var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx; // selShp is the selected shape object, and pinx is x location (numeric) on canvas
theDiv.style.top = selShp.piny; // piny is y location on canvas (numeric)

    This worked fine before I was using the doctype, because apparently the browser was fine with me just giving a number, but I had to change the code to this, and it works:

    var theDiv = getElementByID(...)
theDiv.style.left = selShp.pinx.toString() + 'px'; 
theDiv.style.top = selShp.piny.toString() + 'px';

    Stupid, rookie mistake, I guess. My understanding of the solution is, standard HTML requires you to set the left and top as strings, with units specified.

    • 0