p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Javascript How-To (http://p2p.wrox.com/forumdisplay.php?f=87)
-   -   scrolling <DIV> (http://p2p.wrox.com/showthread.php?t=15486)

anshul July 15th, 2004 01:25 PM

scrolling <DIV>
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.

bmains July 15th, 2004 03:18 PM


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.


Snib 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;
<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.



richard.york 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;

This div is fixed in place as the page scrolls.

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


The Spicy Peanut Project

anshul 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 July 26th, 2004 02:08 AM


bmains July 26th, 2004 07:46 AM


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?


richard.york 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.



The Spicy Peanut Project

anshul July 26th, 2004 02:59 PM

var initpos, scroll, newpos, str;

function initScroll(menu) {

function scrollMenu(menu) {

now u just need2call functions externally


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 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.

is one correction i do now.

there may b more typing mistakes.

All times are GMT -4. The time now is 02:35 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.