Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: Intermediate
Aug 25, 2000

Layout Manager for Scrolling DIV's

A scrolling DIV is a great way to display a large amount of data without resorting to frames. Setting the CSS-2 OVERFLOW property to auto will make the DIV into an independently scrolling container when either the HEIGHT or WIDTH property also is specified:
 <DIV id=divScroller style="overflow:auto;
height:200px"> <!-- stuff goes here --> </DIV>
This is great, but how do you know what to set the height to? Here is a simple layout manager function to handle that:
 function resizeVerticalDiv(oDiv, 
oBottomNeighbor) { var iMinHeight = 100; //DIV won't get
smaller than this var iClientHeight = document.body.clientHeight; //the browser's viewable area // find the absolute top coordinate var iAbsoluteYTop = oDiv.offsetTop; var oParent = oDiv.offsetParent; while (oParent.tagName.toUpperCase()
!= "BODY") { iAbsoluteYTop += oParent.offsetTop; oParent = oParent.offsetParent; } // find the absolute bottom coordinate var iAbsoluteYBottom; if (oBottomNeighbor != null) { var iNeighborTop = oBottomNeighbor.offsetTop; oParent = oBottomNeighbor.offsetParent; while (oParent.tagName.toUpperCase()
!= "BODY") { iNeighborTop += oParent.offsetTop; oParent = oParent.offsetParent; } iAbsoluteYBottom = document.body.scrollHeight
- iNeighborTop } else { iAbsoluteYBottom = 0 } var iNewHeight = document.body.clientHeight -
iAbsoluteYTop - iAbsoluteYBottom; oDiv.style.posHeight = (iNewHeight >=
iMinHeight ? iNewHeight : iMinHeight); }
Just call this from window_onload() and window_onresize() and pass your scrolling DIV as the first argument. If there is stuff on the page below your DIV, pass the ID of the first object below the DIV in the second argument.

The function finds the desired top and bottom coordinates to determine the height for the DIV that will make everything fit perfectly on the page without resorting to absolute positioning. This can be modified for a horizontally scrolling DIV very easily; just use lefts instead of tops, rights instead of bottoms, and widths instead of heights.

This function won't work in Netscape, but neither does the "overflow:" attribute (part of the CSS-2 standard), so that's OK.

Chris McCann
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap