doctype stops this js from functioning in ie

tpeck

09-25-2011, 05:53 AM

This <div> layer positioned always at bottom left of the screen on scrolling (and calling some code from labpixies) works well in non-ie browsers, but in ie it requires the omission of the doctype declaration. Why?

Is it possible to fix it so that it works with the doctype in ie?

<!doctype html>
<html lang="en">

<head>
<title></title>
</head>

<body>

<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
<div id="screen" style="position: absolute; left: -138px; top: 12px; ">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0px; padding:0px; border:1px solid #000000;">
<tr>
<td style="padding-left:0px; height:0px; line-height:15px; background-color:#000000;">
<a href="http://www.labpixies.com" style="font-family: Arial,Verdana; font-size:12px; font-weight:bold; text-align:left; text-decoration:none; color:#ffffff;">       
Gadget by LabPixies.com</a></td>
</tr>
<tr>
<td>
<iframe allowtransparency="true" align="top" scrolling="no" width="256" height="135" frameborder="0" src="http://cdn.labpixies.com/campaigns/babylon/babylon.html" target="_self">
</iframe></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
screenWidth = screen.width;
if (screenWidth == 1024)
{
var yside = 390;
}
else if (screenWidth == 1152)
{
var yside = 400;
}
else if (screenWidth == 1280)
{
var yside = 400;
}
else
{
var yside = 450;
}
if(document.body.scrollTop != "undefined")
sidemenu.style.top = document.body.scrollTop+yside+'px';
else
sidemenu.style.top = window.pageYOffset+yside+'px';
}
setInterval("FixY()",100);
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

</body>

</html>

Goos

09-25-2011, 11:02 AM

For IE 7 and 8 in standard mode you should use:
document.documentElement.scrollTop
I don't have IE 6 around here, so I'm not sure about it's behaviour in standard mode.

tpeck

09-25-2011, 01:54 PM

Thanks, that seems to work now in IE with the doctype declared, but when I use this to check for IE or not:




...neither works. Something obvious I am doing wrong?

Goos

09-25-2011, 10:01 PM

Your using HTML conditional comments inside javascript, which obviously throws an error. You could use conditional compilation to test for IE, but it's better to test for function availibity.

The following code should work fine on IE6+.
var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;

tpeck

09-26-2011, 06:10 AM

Thanks for yor help, but I'm a bit confused. You mean something like this?

var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;);
if (yScroll = (document.documentElement.scrollTop){
if(document.document.documentElement.scrollTop.scrollTop != "undefined")
sidemenu.style.top = document.document.documentElement.scrollTop.scrollTop+yside+'px';
else
sidemenu.style.top = window.pageYOffset+yside+'px';
}
else{
if(document.body.scrollTop != "undefined")
sidemenu.style.top = document.body.scrollTop+yside+'px';
else
sidemenu.style.top = window.pageYOffset+yside+'px';
}

I understand the principle but I'm not coding it right.

Goos

09-26-2011, 04:49 PM

All you need is:
var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;);
sidemenu.style.top = yScroll + 'px';
explantion:
var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;);
means:
var yScroll;
if(typeof window.pagYOffset != 'undefined'){
yScroll = window.pageYOffset
}
else{
yScroll = document.documentElement.scrollTop;
}

tpeck

09-28-2011, 02:03 PM

I'm struggling with this - having tried lots of things.

This doesn't do the trick and I can't work out why given your clear explanation:

<!doctype html>
<html lang="en">

<head>
<title></title>
</head>

<body>

<div id="master" style="position: absolute; left: -120px; top: 11px; width: 350px; height: 0px">
<div id="menu" style="position: absolute; left: 117px; top: 12px">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<a href="javascript:expand();" onfocus="this.blur()">
<img name="menutop" border="0" src="../images/translate.gif" width="23" height="152"></a></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var sidemenu = document.getElementById('master');
function FixY()
{
screenWidth = screen.width;
if (screenWidth == 1024)
{
var yside = 390;
}
else if (screenWidth == 1152)
{
var yside = 400;
}
else if (screenWidth == 1280)
{
var yside = 400;
}
else
{
var yside = 450;
}
// if(document.body.scrollTop != "undefined")
// sidemenu.style.top = document.body.scrollTop+yside+'px';
// else
// sidemenu.style.top = window.pageYOffset+yside+'px';

var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;);
sidemenu.style.top = yScroll + yside + 'px';
}
setInterval("FixY()",100);
</script>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>

</body>

</html>

Sorry to be such a clutz.

Goos

09-28-2011, 10:18 PM

I must have done something wrong, when copy-pasting. Take off the red bit, and it should work fine.
var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;);
sidemenu.style.top = yScroll + 'px';

tpeck

09-29-2011, 04:20 AM

Great! It now works. Thanks for your help with this...