webtechy
asked on
CSS Position:Fixed Work Around Has Problem ...
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("r edStrip"). 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.
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(),
function RePositionBody()
{
if (document.getElementById("
{
iTop = 0;
iNewTop = document.body.scrollTop + iTop;
document.getElementById("r
}
}
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.
the problem may be because different versions of ie5 support document.all and document.getElementById
you may try this
function RePositionBody()
{
if (document.getElementById && !document.all)
{
iTop = 0;
iNewTop = document.body.scrollTop + iTop;
document.getElementById("r edStrip"). style.top = iNewTop + "px";
} else {
if(document.all && !document.getElementById)
{
iTop = 0;
iNewTop = document.body.scrollTop + iTop;
document.all("redStrip").s tyle.top = iNewTop + "px";
}
}
}
function RePositionBody()
{
if (document.getElementById && !document.all)
{
iTop = 0;
iNewTop = document.body.scrollTop + iTop;
document.getElementById("r
} else {
if(document.all && !document.getElementById)
{
iTop = 0;
iNewTop = document.body.scrollTop + iTop;
document.all("redStrip").s
}
}
}
ASKER
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.s crollTop ) ? document.documentElement.s crollTop : document.body.scrollTop
----------
Therefore, perhaps I should try to implement this if statement which uses slighty different ways to implement the positioning?
I have noticed in the following URL,
http://www.howtocreate.co.uk/fixedPosition.html
They have:
----------
(document.documentElement && document.documentElement.s
----------
Therefore, perhaps I should try to implement this if statement which uses slighty different ways to implement the positioning?
document.all is IE4
top = pixelTop
Vinny
top = pixelTop
Vinny
hi vinny
i have found that IE5 supports .all also
i have found that IE5 supports .all also
This could be useful: http://www.quirksmode.org/js/doctypes.html
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
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
ASKER
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.
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.
This, I think, would work in practically any browser.
function RePositionBody() {
var o;
if (document.getElementById) o = document.getElementById("r edStrip");
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.s crollTop) o.style.top = document.documentElement.s crollTop;
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.
function RePositionBody() {
var o;
if (document.getElementById) o = document.getElementById("r
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.s
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.
ASKER
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 ...
ASKER
FYI, the function is now as follows:
function RePositionBody()
{
iBodyScrollTop = (document.documentElement && document.documentElement.s crollTop ) ? document.documentElement.s crollTop : document.body.scrollTop;
if (document.getElementById(" redStrip") )
{
iNewTop = iBodyScrollTop + 0;
document.getElementById("r edStrip"). style.top = iNewTop + "px";
}
}
function RePositionBody()
{
iBodyScrollTop = (document.documentElement && document.documentElement.s
if (document.getElementById("
{
iNewTop = iBodyScrollTop + 0;
document.getElementById("r
}
}
ASKER
Apparently they can also scroll down forever to ... ?!?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Mmmm ... never really got to the bottom of this, although in theory the solution should work (and indeed does in IE6) ...
ASKER
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 ...