Solved

CSS Position:Fixed Work Around Has Problem ...

Posted on 2004-04-05
17
658 Views
Last Modified: 2008-02-01
Dear All,

I have an element on a page with an ID of "redStrip". It is position absolutely. In the BODY tag of the page, I have onScroll=RePositionBody(), which calls:

function RePositionBody()
{
      if (document.getElementById("redStrip"))
      {
            iTop = 0;
            iNewTop = document.body.scrollTop + iTop;
            document.getElementById("redStrip").style.top =  iNewTop + "px";
      }
}

This works great on my browser, IE 6.0.2800 but apparently isn't working on other IE's, such as IE 5.0. Anybody any idea as to why this is?

Any help much appreciated.

Thanks,

Ben.
0
Comment
Question by:webtechy
  • 7
  • 4
  • 2
  • +2
17 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10757388
the problem may be because different versions of ie5 support document.all and document.getElementById

0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10757445
you may try this

function RePositionBody()
{
    if (document.getElementById && !document.all)
    {
         iTop = 0;
         iNewTop = document.body.scrollTop + iTop;
         document.getElementById("redStrip").style.top =  iNewTop + "px";
    } else {
            if(document.all && !document.getElementById)
            {
             iTop = 0;
         iNewTop = document.body.scrollTop + iTop;
         document.all("redStrip").style.top =  iNewTop + "px";
             }
      }
}
0
 
LVL 2

Author Comment

by:webtechy
ID: 10757494
Apparently in the other browsers it is trying to do it, just ends up being very jumpy, and you get an image trail of lots of red strips over the page. Therefore, this suggests that the "if" statement isn't the problem?

I have noticed in the following URL,

http://www.howtocreate.co.uk/fixedPosition.html

They have:

----------
(document.documentElement && document.documentElement.scrollTop ) ? document.documentElement.scrollTop : document.body.scrollTop
----------

Therefore, perhaps I should try to implement this if statement which uses slighty different ways to implement the positioning?

0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 15

Expert Comment

by:VincentPuglia
ID: 10757515
document.all is IE4

top = pixelTop

Vinny
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10757526
hi vinny

i have found that IE5 supports .all also
0
 
LVL 9

Expert Comment

by:lombardp
ID: 10757547
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 10757671
Hi jay,

  I meant to say anything after IE4 is document.all -- IE5+ is document.getElement...  However, I no longer recall (brain calcification due to old age :) when M$ switched from style.pixelTop to style.top

Vinny
0
 
LVL 2

Author Comment

by:webtechy
ID: 10757776
Lombardp, I think you may be on the right lines.

I need only worry about IE5+ since that's the majority of browsers. The function is simply to make the menu system always appear at the top of the page, so earlier browsers can simply scroll.

I have implemented the change I noted above and will let you know the results when a colleage with an earlier version of IE takes a look ...

Ben.
0
 
LVL 7

Expert Comment

by:brgivens
ID: 10758007
This, I think, would work in practically any browser.

function RePositionBody() {
  var o;
  if (document.getElementById) o = document.getElementById("redStrip");
  else if (document.all) o = document.all["redStrip"];
  else if (document.layers) o = document.layers["redStrip"];

  if (window.innerHeight) o.style.top = window.pageYOffset;
  else if (document.documentElement && document.documentElement.scrollTop) o.style.top = document.documentElement.scrollTop;
  else if (document.body) o.style.top = document.body.scrollTop;
}

From your 7:15AM post, it sounds like your real problem is that it's jumpy... no solution to that.
0
 
LVL 2

Author Comment

by:webtechy
ID: 10758896
Well, I have implemented the change, with little effect :-( In my browser it seems fine, although apparently in other browsers IE 5 on Mac and even IE 6 on another machine (possibly a slow machine) their are some strange effects that I do not see myself. For example, when scrolling upwards, the redstrip appears multiple times to fil up the whole page. When scrolling down, it jumps quite a bit. However, this is not something I can see myself ... and don't seem to be much of a pattern as to which versions of IE it doesn't work for so I could just disable it for those browsers ...
0
 
LVL 2

Author Comment

by:webtechy
ID: 10758908
FYI, the function is now as follows:

function RePositionBody()
{
      iBodyScrollTop = (document.documentElement && document.documentElement.scrollTop ) ? document.documentElement.scrollTop : document.body.scrollTop;
      
      if (document.getElementById("redStrip"))
      {
            iNewTop = iBodyScrollTop + 0;
            document.getElementById("redStrip").style.top =  iNewTop + "px";
      }
}
0
 
LVL 2

Author Comment

by:webtechy
ID: 10759020
Apparently they can also scroll down forever to ... ?!?
0
 
LVL 16

Accepted Solution

by:
jaysolomon earned 250 total points
ID: 10759079
wildshot here see what this does

 iBodyScrollTop = (document.documentElement || document.documentElement.scrollTop ) ? document.documentElement.scrollTop : document.body.scrollTop;
0
 
LVL 2

Author Comment

by:webtechy
ID: 10800514
Mmmm ... never really got to the bottom of this, although in theory the solution should work (and indeed does in IE6) ...
0
 
LVL 2

Author Comment

by:webtechy
ID: 10887484
Well, never really did get to the bottom of it. Instead of being fired on the onScroll event, I just called it every 50 milliseconds or so using the setTimeout function, if the page had moved, then reposition it ...
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Writing comments on <p></P> or paragraph 2 19
Html value of radio 14 27
Html input text color the frame line 2 19
Copying table data to one another 15 29
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question