DIV Positioning and DOCTYPE Conflict?

thegentleman · Feb 24, 2005

I have a fairly simple piece of code that displays a small description window when you roll over certain glossary words - the window is positioned wherever your mouse sits on the page:

Code:

function moveElement(element) {
var e = window.event;
if (e.pageX || e.pageY) {
      MouseX = e.pageX;
      MouseY = e.pageY;
   }
   else if (e.clientX || e.clientY) {
      MouseX = e.clientX + document.body.scrollLeft + "px";
      MouseY = e.clientY + document.body.scrollTop + "px";
   }

theElement = document.getElementById(element);
theElement.style.top = MouseY;
theElement.style.left = MouseX;

}

This worked perfectly until I added the DOCTYPE to the top of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

Now the window pops up in quite random places and it doesn't seem to follow the user scrolling down the page.

Any ideas?

~tg

elegidito · Feb 24, 2005

The conflict here is with the BODY element. Without a DOCTYPE in IE6, the property pair of "scrollTop/scrollLeft" belongs to the body (document.body). However, with a DOCTYPE defined, these properties move to the document element (document.documentElement). In order to fix that, your function should look like this:

Code:

function moveElement(element) {
var e = window.event;
if (e.pageX || e.pageY) {
      MouseX = e.pageX;
      MouseY = e.pageY;
   }
   else if (e.clientX || e.clientY) {
      MouseX = e.clientX + ((document.documentElement)?document.documentElement.scrollLeft:document.body.scrollLeft) + "px";
      MouseY = e.clientY + ((document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop) + "px";
   }
alert(document.documentElement.scrollTop+":"+MouseY);
theElement = document.getElementById(element);
theElement.style.top = MouseY;
theElement.style.left = MouseX;

}

hope that helps

"It is the mark of an educated mind to be able to entertain a thought without accepting it." - Aristotle

thegentleman · Feb 24, 2005

elegidito,

Thank you for your swift response - that was a great help and it now works again!

Does the same thing apply to Netscape and Firefox?

~tg

BillyRayPreachersSon · Feb 25, 2005

NN and FF do not support window.event. They pass the event data to the event handler as a parameter which you can pick up on. To make one function cross-browser compatible, I normally do something like this:

Code:

function myEventHandler(e) {
   if (!e) e = window.event;

   // rest of code here
}

Of course, some property names are different, so you might have to work around that, although that is easy enough to do.

Hope this helps,
Dan

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

DIV Positioning and DOCTYPE Conflict?

thegentleman

IS-IT--Management

elegidito

Programmer

thegentleman

IS-IT--Management

BillyRayPreachersSon

Programmer

Similar threads

Part and Inventory Search

Sponsor