• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Unwanted Scrollbars

 
Ranch Hand
Posts: 282
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 ]
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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);
 
reply
    Bookmark Topic Watch Topic
  • New Topic