• 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

Scrolling problem with floating divs

 
Ranch Hand
Posts: 107
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I will do my best to explain this. In my application we are using a DHTML style dialog; a floating layer instead of a new window for a popup. As a visual affect I added a semi-transparent layer (width:100%; height:100%) sandwiched between the dialog and the page in the back. So looking at it there is the dialog on top, and a tinted out background in the back. I had to do a little handling with dropdowns, but otherwise looks great.

The problem is that the both the semi-transparent layer and the dialog have fixed positions. So with the dialog open, if the user scrolls down, the dialog and the semi-transparent layer scrolls up. Scrolling the dialog is not too big a deal, but it looks really ugly when the semi-transparent layer covers only part of the page.

Also if the user scrolls way down the page and clicks on a link that would open the dialog, they could potentially not even see the dialog or the semi-transparent layer. This is a big problem.

Is there a way to make the layer and the dialog stay put regardless of user scrolling? I have seen advertisement that is always there... so what is the trick to doing that?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Either make the layer the entire length or

onscroll="SomeFunctionAdjustPosition()"

and use
var scrollAmount = document.body.scrollTop;
in your function to change position of the layer.

Eric
 
Rusty Enisin
Ranch Hand
Posts: 107
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Eric!
 
reply
    Bookmark Topic Watch Topic
  • New Topic