Closed Thread Icon

Topic awaiting preservation: Hiding a Div when scrolling (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=9029" title="Pages that link to Topic awaiting preservation: Hiding a Div when scrolling (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Hiding a Div when scrolling <span class="small">(Page 1 of 1)</span>\

 
ZOD
Bipolar (III) Inmate

From:
Insane since: Jun 2002

posted posted 02-20-2004 06:15

How can I hide a div while the page is being scrolled and display it again immediately after scrolling ends?

FYI the xhtml page will only be seen in IE6. I have a menu which is always positioned at the top of the client area. I can accomplish this by using expressions for dynamic css attributes as follows

menu.setExpression('top','canvas.scrollTop')

and

canvas.onscroll=function() {document.recalc(true)}

where menu is the menu div and canvas is document.documentElement. This works fine regardless of how the page is scrolled but it is kind of jerky in appearance. It would be nicer to hide the menu while the page scrolls and have it reappear in the proper location when scrolling ends but there doesn't seem to be a pretty way to code this.

The following code works except when the page is scrolled with the mousewheel but I would like to find a more eligant and reliable way to do this.

canvas.onscroll=function() {menu.style.visibility='hidden';document.recalc(true)}
canvas.onmousemove=function() {menu.style.visibility='visible'}
canvas.onkeyup=function() {menu.style.visibility='visible'}

Any ideas?

TIA

Hugh
Paranoid (IV) Inmate

From: Dublin, Ireland
Insane since: Jul 2000

posted posted 02-23-2004 00:37

Probably no better but if you have a function on an interval measuring the differences in the scrolled length that is run onScroll, hide is when its changing , show when it stays the same for one third of a second or three runs of the function.

Okay thats a bit weird to explain.

onscroll=doStuff();
var t=0; // <- amount of Times function is run after onscroll;
var i=0; // <- keeps scrolled length from last run;

function doStuff() {
if(t==0) i=[scroll-length];
++t;
if(t<5) {
if([scrolled-length] != i) {
hideme();
t=1;
}
else if(t>=3) showme();

i= [scrolled-lenght];
setTimeout("doStuff()",500);
}
}

Syntax isnt right and i didnt want to type the correct or variations of [scrolled-length], if the valued keeps changing it should keep running untill it stops for 3 passes, haven't run any test its just I couldnt really explain it. Theres probably a better way too.



Cameron
Bipolar (III) Inmate

From: Brisbane
Insane since: Jan 2003

posted posted 02-23-2004 02:19

FWIW you could use the CSS "fixed" property to acomplish this without any scripting at all. It's just a pitty IE doesn't support this one yet.

ZOD
Bipolar (III) Inmate

From:
Insane since: Jun 2002

posted posted 02-23-2004 04:22

Thanks guys. I think I'll just leave it as is for now. The menu doesn't snap into position when the mousewheel is turned but it will as soon as the mouse moves.

Cameron, I tried the css hack in the faq for position:fixed in IE but unfortunately it doesn't work when all the content on the page is positioned absolutely - unless I am missing something. Yeah I wish IE supported position:fixed too.

Come to think of it, even if IE did support position:fixed I would still have the same problem. I have been studying event bubbling using IEDocMon and have found that scrolling with the mousewheel is different (event-wise) from scrolling with a keypress or by dragging a scrollbar in that it doesn't seem to be a composite event. Without the secondary event firing after onmousewheel my menu div would still be hidden until the mouse moves as now.

« BackwardsOnwards »

Show Forum Drop Down Menu