Floating Bar Problem

JerryH · Jan 27, 2005

The XHTML & JavaScript code below will display a floating green bar. It stays at the top of the page and should reposition itself whenever the user scrolls thru the page.

It works fine in IE5 and Mozilla (Firefox) but not in IE6. In IE6 with Service Pack 2 installed, the bar always remains at the top of the page and does not reposition when the page is scrolled.

I can make it work if I remove the DOCTYPE, but I wish to keep it to remain W3C compliant.

Any suggestions?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html lang="en-US">
<head>
<title>test</title>
  <meta name="language" content="English" />
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<script language="JavaScript1.2" type="text/javascript">
<!--
   var floaterObj
   var isNS
   var xOffset, yOffset
   var newXOffset, newYOffset

   function setUp() {
      if (document.getElementById) {floaterObj = document.getElementById("floater").style;}
      else {floaterObj = document.floater;}
      if (navigator.appName == 'Netscape') {isNS = true;}
      else {isNS = false;}
      newXOffset = 0;
      newYOffset = 0;
      window.setInterval("placeFloater()", 100)
      placeFloater()
   }
   
   function placeFloater() {
         if (isNS) {
         xOffset = window.pageXOffset;
         yOffset = window.pageYOffset;
      } else {
         xOffset = document.body.scrollLeft;
         yOffset = document.body.scrollTop;
      }
      floaterObj.top = 0 + yOffset - newYOffset + 'px';
      floaterObj.left = 0 + xOffset - newXOffset + 'px';
   }
//-->
</script>

</head>
<body onload="setUp()">
<div id="floater" style="position:absolute;">
<table cellpadding="0" cellspacing="0" width="100%" style="background-color:#060">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

cLFlaVA · Jan 27, 2005

Code:

   function placeFloater() {
   
       if( typeof( window.pageYOffset ) == 'number' ) {
            //Netscape compliant
            yOffset = window.pageYOffset;
            xOffset = window.pageXOffset;
      } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
            //DOM compliant
            yOffset = document.body.scrollTop;
            xOffset = document.body.scrollLeft;
      } else if( document.documentElement &&
          ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
            //IE6 standards compliant mode
            yOffset = document.documentElement.scrollTop;
            xOffset = document.documentElement.scrollLeft;
      }

      floaterObj.top = 0 + yOffset - newYOffset + 'px';
      floaterObj.left = 0 + xOffset - newXOffset + 'px';
   }

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

JerryH · Feb 1, 2005

Thanks for the response cLFlaVA. For some reason your code was popping up errors. However, I got my old code to work by simply adding a comment () as the first line of the file, right before the DOCTYPE. This effectively puts IE6 in quirks mode and... vowala!

Actually, I stopped using this JavaScript code in favor of some CSS code I found. Kinda like fixed positioning for IE.

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!

Floating Bar Problem

JerryH

Programmer

cLFlaVA

Programmer

JerryH

Programmer

Similar threads

Part and Inventory Search

Sponsor