Keeping Floatbox in the Viewport

Page: 1

Author Post
Member
Registered: Jan 2012
Posts: 98
My webpages are typically about double the height of a typical laptop screen, so normally the viewport will cover about half the page and there will be a vertical scrolling bar at the right-hand side. I have set the options so that the floatbox almost fills the viewport on a typical screen. So far, so good.

I have just noticed that if a slideshow is running in the floatbox and the user scrolls the screen down, two things happen when the next photo is displayed:
1. The floatbox moves down the screen to centralise itself in the new viewport
2. The page scrolls back up to the top
The result of this is that the floatbox partially or totally disappears out of the bottom of the viewport.
This corrects itself on the next photo when the floatbox moves itself back to the top.

Either of these two things could be seen as "correct" in itself, but the two together is definitely confusing, and not good for the user experience. You can this effect on many of my pages, www.littlehotels.co.uk/spain/unicohotelmadrid.php for instance.

How do I prevent it happening?
Administrator
Registered: Aug 2008
Posts: 3382
Upgrade to the latest-greatest v6.0.3. It doesn't jump the page scroll back to the starting position on box refresh. You could also keep using 5.7.2 but set disableScroll:true to apply fixed positioning to the floatbox. A downside of this approach is that not all browsers can do fixed positioning (but most can). Note that version 6 does not have a disableScroll option but uses boxScroll to the same effect.
Member
Registered: Jan 2012
Posts: 98
Thanks Admin. For the moment I'm sticking with 5.7.2 and the disableScroll has done what I want.

I've downloaded 6.0.3 and tried it. Even though I copied floatbox.css and options.js into the new version, it isn't displaying right. I imagine there are some new settings that I need to sort out to make 6.0.3 work, but I don't have time for that just at the moment.
Administrator
Registered: Aug 2008
Posts: 3382
You can't bring in floatbox.css from another version and expect things to display properly. You need to use all the files from the same version. They function together and are a package.

options.js can usually be carried forward to new versions, but when moving to a new major version it's recommended that you use the new clean options.js and manually add your customizations back into it.

Page: 1