• Post Reply Bookmark Topic Watch Topic
  • New Topic

Scrolling problem with floating divs  RSS feed

 
Rusty Enisin
Ranch Hand
Posts: 107
  • Mark post as helpful
  • send pies
  • 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?
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • 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
  • Quote
  • Report post to moderator
Thanks Eric!
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!