Win a copy of Re-engineering Legacy Software this week in the Refactoring forum
or Docker in Action in the Cloud/Virtualization forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Unwanted Scrollbars

 
Jay Damon
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?

Eric
 
Jay Damon
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Eric,

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
Marshal
Pie
Posts: 64632
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Also, why are you using both the display and visibility attributes to show/hide the element? The display attribute should be sufficient.
 
Jay Damon
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
No particular reason. This was something I put together rather quickly so I haven't done anything to refine the code.
 
Radu Serban
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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);
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic