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:

 

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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

technology leadership

Why the World Needs More Technology Leadership

As a fact, technology has touched every single aspect of our lives. And there are some technology giants in today’s world which have been frequently opined to have a strong influence on recent overall technological influence. Moreover, those tech giants have popular technology leaders leading the companies toward achieving greatness.

iOS app development

The Future of iOS App Development: Trends to Watch

When it launched in 2008, the Apple App Store only had 500 apps available. By the first quarter of 2022, the store had about 2.18 million iOS-exclusive apps. Average monthly app releases for the platform reached 34,000 in the first half of 2022, indicating rapid growth in iOS app development.

microsoft careers

Top Careers at Microsoft

Microsoft has gained its position as one of the top companies in the world, and Microsoft careers are flourishing. This multinational company is efficiently developing popular software and computers with other consumer electronics. It is a dream come true for so many people to acquire a high paid, high-prestige job