File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes Unwanted Scrollbars Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Unwanted Scrollbars" Watch "Unwanted Scrollbars" New topic

Unwanted Scrollbars

Jay Damon
Ranch Hand

Joined: Jul 31, 2001
Posts: 282
I created some JavaScript functions to dynamically display information using a <div> element if a user mouses over selected fields on a page. My script will dynamically add the required <div> element to the <body> element using appendChild if the <div> does not exist. Initially, the visibility is set to "hidden" and display to "none". Also initially, there is no vertical scrollbar on the page. However, when an onmouseover event occurs, the show function is invoked and visibility is set to "visible" and display to "block". At a result, a vertical scroll bar appears. When an onmouseout event occurs, the hide function is invoked and visibility is reset to "hidden" and display to "none". The vertical scroll bar disappears. My question is: Is there any way to prevent the display of the scroll bar when the show function is invoked?
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
Well the scrollbar is appearing since the content is becoming larger than the available space on the screen. Are you using absolute positioning for the div?

Jay Damon
Ranch Hand

Joined: Jul 31, 2001
Posts: 282

Thanks for your reply.

Yes, I am using absolute positioning. I do understand why the scrollbar is being added; I just would like to know if there is any way to avoid it, i.e. for example, forcing the browser re-calc, re-flow, etc. the page to avoid the scrollbar being displayed.

I know the scrollbar is not absolutely necessary because if I insert the following code:

directly after the <body> tag in my page, the scrollbar does NOT appear regardless of whether the tooltip is showing or hidden. The init() function performs appendChild to add the required <div> element.

It's not that big a deal to do so but I was trying to avoid inserting JavaScript code directly into my page.
[ March 01, 2006: Message edited by: Jay Damon ]
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63837

Also, why are you using both the display and visibility attributes to show/hide the element? The display attribute should be sufficient.

[Asking smart questions] [About Bear] [Books by Bear]
Jay Damon
Ranch Hand

Joined: Jul 31, 2001
Posts: 282
No particular reason. This was something I put together rather quickly so I haven't done anything to refine the code.
Radu Serban

Joined: Apr 18, 2006
Posts: 1
I know it's a little late, but we had the same problem and we found out that inserting the div as the first body child instead of appending it to the end seems to solve the problem:

document.body.insertBefore(thediv, document.body.firstChild);
I agree. Here's the link:
subject: Unwanted Scrollbars
It's not a secret anymore!