[javascript] IE6 & doctype & scrollTop property

I just realized that the old javascript that I copied & implemented on this forum does not properly work.

I am talking about the the preview popup window.

The popup window should always appear on the top of the link,but I found that it is shown in a totally different place when the webpage is scrolled down.

So I spent some time on the web and found below resource.

http://www.quirksmode.org/js/doctypes.html

According to him, there are difference accessing javascript body element properties such as clientHeight ,clientWidth , scrollLeft ,scrollTop and etc between IE5 & IE6 with DOCTYPE defined.

The popup window javascript code heavily uses document.body.scrollTop.
In IE5, document.body.scrollTop works fine, but when you use IE6 & DOCTYPE togather, you need to use docuement.documentElement.scrollTop property.

Also, some comparison demo pages
doctype onand doctype off

So I have changed the javascript little bit.

First I defined the IE6&DOCTYPE indicator doctype variable.

//we need to check if IE6 & doctype is on ( is used or not)
//doctype=1 (IE6 & doctype) or regular IE6 IE5
var doctype=0;
if(document.documentElement && document.documentElement.clientHeight )
{ doctype=1; }
else
{ doctype=0; }

Then I use it to get the correct Top & Left position of the popup window.

if (doctype==1)
{ ty=document.documentElement.scrollTop; tx=document.documentElement.scrollLeft;}
else if (doctype==0)
{ ty=document.body.scrollTop; tx=document.body.scrollLeft;}
x=event.x + tx+10;
y=event.y + ty;

And it works perfectly!

By the way, in IE6 & DOCTYPE OFF environment, you need to use document.body.scrollTop property.

Read More