scrolling <DIV>

anshul · #1 (**permalink**) July 15th, 2004, 01:25 PM

many u h've might seen menu which scrolls with scroll-bar.
how can i know the total height of document <BODY> ?
( including scroll-bar ).

i intend to write some function for <DIV> menu that'll scroll
when scroll-bar is scrolled.

i've code4this, but i don't like it; it is complex.
thanx.

bmains · #2 (**permalink**) July 15th, 2004, 03:18 PM

Hello,

Using javascript; can't remember the exact properties that tell you this, but there are values for determining the screen height using javascript.

Sorry I couldn't be more helpful.

Brian

Snib · #3 (**permalink**) July 15th, 2004, 04:50 PM

Try something like this:

<script type="text/javascript">
var menu = document.getElementById("menu");
function refreshMenu()
{
menu.style.top = screen.height - 150;
menu.style.left = screen.width - 150;
}
setTimeout("refreshMenu()",1);
</script>
<div id="menu" style="width:100;height:100;background-color:black"></div>

If this works correctly, a black box will scroll with the scroll bar in the bottom-right of the page.

Snib

<><

richard.york · #4 (**permalink**) July 15th, 2004, 06:41 PM

I assume you want fixed positioning. You don't have to use JavaScript to accomplish this.

Use CSS:

div {
    position: fixed;
    left: 0;
    right: 0;
}

<div>
This div is fixed in place as the page scrolls.
</div>

This doesn't work in IE on its own, for IE you'll need the IE7 style sheet. http://dean.edwards.name/IE7

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

anshul · #5 (**permalink**) July 16th, 2004, 03:45 PM

friends, u got wrong way. first of all, i don't want2fix the <DIV>, it looks very monotonous! and: if i use above javscript code, <DIV> scrolls opposite to direction of scroll-bar. this is not a solution, at all. u know: we h've2use document.body.clientHeight, document.body.scrollTop etc., with setTimeout()

but i don't know how2write it myself. finally, a smooth scroll of <DIV> exactly corresponding to scroll-bar scroll is desired.

sr.ganaa · #6 (**permalink**) July 26th, 2004, 02:08 AM

Just

bmains · #7 (**permalink**) July 26th, 2004, 07:46 AM

Hello,

If you specify a height, and the overflow attribute, you can get the scrollbars to appear. I imagine that you've done this, or done something similar to this to get the scrollbar working. Below are the attributes I set for a div to have scrollbars appear.

HEIGHT: 150px;
OVERFLOW-Y: scroll

The overflow sets the axis that will scroll. However, to get the total size of the browser, I'm not sure why you think the other's code as a fix; wouldn't you have to do something similar anyway to determine these attributes?

Brian

richard.york · #8 (**permalink**) July 26th, 2004, 07:52 AM

Actually it would be better to use overflow: auto; since overflow-y is an IE proprietary property. Its proposed for inclusion in CSS 3 but no one else has picked it up yet. Often times overflow: auto; will generate the desired effect anyway.

HTH!

Regards,
Rich

::::::::::::::::::::::::::::::::::::::::::
The Spicy Peanut Project
http://www.spicypeanut.net
::::::::::::::::::::::::::::::::::::::::::

anshul · #9 (**permalink**) July 26th, 2004, 02:59 PM

var initpos, scroll, newpos, str;

function initScroll(menu) {
str=eval('menu');
initpos=parseInt(
document.getElementById(str).style.top);
}

function scrollMenu(menu) {
scroll=parseInt(document.body.scrollTop);
newpos=pos+scroll;
str=eval('menu');
document.getElementById(menu).style.top=newpos;
str=eval('menu');
setTimeout("stay(str)",100);
}

now u just need2call functions externally

initScroll('scrollMenu');
scrollMenu('scrollMenu');

this is working in all browsers i use.
do few corrections, if i've typed hurrily.
code that i'd seen 2weeks before on internet is horrible- some 100 lines

anshul · #10 (**permalink**) July 26th, 2004, 05:19 PM

4Netscape family corresponding property is 'pageYOffset' lieu 'document.body.scrollTop' that works4 MSIE. We need if..else or seperate function body4this distinction.

setTimeout("scrollMenu(str)",100);
is one correction i do now.

there may b more typing mistakes.

Need to download code?

Navigation