Forum Moderators: open

Message Too Old, No Replies

loose dtd & dynamically setting a DIV position

Problem with setting a DIV position

         

jcamorgan

6:48 pm on Mar 6, 2006 (gmt 0)

10+ Year Member



I have a script to show a div at the cursor on a mouseover event...

function showDetailPopup(e, obj, id){
document.getElementById("detailpopup").innerHTML = document.getElementById(id).value;
document.getElementById("detailpopup").style.top = e.clientY + window.pageYOffset - 25;
document.getElementById("detailpopup").style.left = e.clientX + 10;
document.getElementById("detailpopup").style.visibility = 'visible';
}

I had this running on a test page and then added it to the page I wanted it to work on. Thing is.. it didn't.

The innerHTML and Visibility work fine but the style.top = ... and style.left = ... don't get the values.

Much frustration later I have found that the inclusion of the DOCTYPE tag was the culprite:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

I need this Doctype to display the page correctly, and don't understand why it should affect the positioning.

Has anyone any ideas?
Thanks.

ps: the div in the html is <div id="detailpopup"></div>

DrDoc

9:53 pm on Mar 6, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There's also currentStyle ...

....style.top
vs
....currentStyle.top

Which browser is having this problem?

jcamorgan

10:02 pm on Mar 6, 2006 (gmt 0)

10+ Year Member



Thanks for the reply. Just tried currentStyle - no effect I'm afraid. Browsers are FireFox 1.5 and IE 6.0.

Robin_reala

10:08 pm on Mar 6, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



'left' and 'top' are CSS values and as such need a unit. Here's revised code that adds px to their value:

function showDetailPopup(e, obj, id){
document.getElementById("detailpopup").innerHTML = document.getElementById(id).value;
document.getElementById("detailpopup").style.top = e.clientY + window.pageYOffset - 25 + "px";
document.getElementById("detailpopup").style.left = e.clientX + 10 + "px";
document.getElementById("detailpopup").style.visibility = 'visible';
}

jcamorgan

11:49 am on Mar 7, 2006 (gmt 0)

10+ Year Member



That's it - brilliant! Thanks very much!
Craig

DrDoc

7:05 pm on Mar 7, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Aah ... I misread the problem, sorry 'bout that :)
I thought you were trying to read the values, not set them