PDA

View Full Version : Avoiding unnecessary scroll bars

winactive
07-09-2003, 10:02 AM
I really tried hard to research this before asking but I don't think it's been asked before :D

What I am looking to achieve is to avoid unnecessary scrollbars when viewing a page in different resolutions. Currently the page(s) in question are within a frame and I used the scrolling=auto property on the frame to make sure the scrollbars only appear when needed.

I have a screen resolution/size sniffing script so detecting the resolution is not a problem, but I have 'top' and 'back' links which use images and are placed near the bottom of the page.

I think DHTML could be used to choose whether or not to display the images (i.e. no 'top' link when the scrollbars are off - or another way; 'top' link only appears when scroll bar is present) but I need to determine how close to the end of the page the 'body' text reaches before deciding whether or not to display the link. Sometimes it is the inclusion of the links which turns the scrollbars on! (Which is what I want to avoid, and the fact that the inclusion of the links and scrollbar in 800x600 can mean they are redundant in 1024x768 - as the text fits in the frame easily because of the extra space).

Absolute references I don't think will work because the amount of space left in the frame will change when the resolution changes.

Basically I am asking if there is a way of detecting the 'length' of the body text by script or it's position on-screen or the amount of space left on the page (pixels or lines of text).

If anyone can make any suggestions, I'd be grateful.
Kor
07-09-2003, 10:49 AM
You say we already have a browser detector? Than, my opinion is that is easy to make visible/hidden (using DHTML and CSS styles)that "top links" according to the resolution, with an "if statement", or something like that.

Do you need an example?
winactive
07-09-2003, 01:49 PM
Thanks for replying again, Kor. :thumbsup:

The problem is is that the page in question is a template and is varying in the amount of body text it contains, so there are multiple pages with identical layouts but differing amounts of text - i.e. some will *need* to scroll and some won't.

Rather than having to check the resulting page in each resolution and conditionally set each page it would be nice if the created page could 'decide' whether or not to display the link depending on whether or the resolution required it.

Or another way, is there a function or argument which detects the presence of scrollbars when they are set to 'auto'?

Sorry if this seems a little confusing or abstract!

I really appreciate your input!
Kor
07-09-2003, 02:28 PM
if scrollbars are auto, I can not see how you can detect wether they appears or not. As I said, this is a problem of window dimension and, by extension, of resolution. Here we are back to the same problem...

But... there must be some hopes if using this DHTML propriety:

screen.availHeight

to detect the real space of the users' browser.

Now you must compare that value with the height of the frame, iframe, table or whichever includes your text, to found a ratio (above or below your scrollbars shows up or not). Now, you can use that ratio to build a small script which will show/hide your top link menu. I think it might works...

And another thing... Use Iframes, not frames, because you can define the dimensions and treat them as DOM objects as well
Catman
07-09-2003, 02:44 PM
Try this:<body onload="this.style.overflow='hidden'; this.style.overflow='auto';">