Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts

    doctype stops this js from functioning in ie

    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?

    Code:
    <!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;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
    				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>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    
    </body>
    
    </html>
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    For IE 7 and 8 in standard mode you should use:
    Code:
    document.documentElement.scrollTop
    I don't have IE 6 around here, so I'm not sure about it's behaviour in standard mode.

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Thanks, that seems to work now in IE with the doctype declared, but when I use this to check for IE or not:

    Code:
    <!--[if IE]>
    if(document.documentElement.scrollTop != "undefined"){
    sidemenu.style.top = document.documentElement.scrollTop+yside+'px';}
    else{
    sidemenu.style.top = window.pageYOffset+yside+'px';}
    <![endif]-->
    <!--[if !IE]>
    if(document.body.scrollTop != "undefined"){
    sidemenu.style.top = document.body.scrollTop+yside+'px';}
    else{
    sidemenu.style.top = window.pageYOffset+yside+'px';}
    <![endif]-->
    ...neither works. Something obvious I am doing wrong?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    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+.
    Code:
    var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Thanks for yor help, but I'm a bit confused. You mean something like this?

    Code:
    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.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    All you need is:
    Code:
    var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;);
    sidemenu.style.top = yScroll + 'px';
    explantion:
    Code:
    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;
    }

  • #7
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    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:

    Code:
    <!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>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    
    </body>
    
    </html>
    Sorry to be such a clutz.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #8
    New Coder
    Join Date
    Apr 2011
    Posts
    49
    Thanks
    0
    Thanked 13 Times in 12 Posts
    I must have done something wrong, when copy-pasting. Take off the red bit, and it should work fine.
    Code:
    var yScroll = ('pageYOffset' in window) ? window.pageYOffset : document.documentElement.scrollTop;);
    sidemenu.style.top = yScroll + 'px';

  • Users who have thanked Goos for this post:

    tpeck (09-29-2011)

  • #9
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    884
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Great! It now works. Thanks for your help with this...
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •