css absolute positioning hidden scrollbars ... with a twist
- by ScottE
I'm working on a website that targets 1024 X 768 as the minimum resolution. So, we're at about 970px wide. Design came back with an interesting layout that has a centered site with a banner that actually exceeds this width (1288px to be exact) that will look good for users with greater resolution, but look fine at 1024.
So, to prevent scrollbars from showing up for those at 1024 I positioned the banner absolutely and used overflow-x: hidden on the body. This works just fine across our target browsers.
Now, the client has come back and asked for scrollbars to be present for users on 800 X 600 (yes, this is not the target) so they can see a critical login button.
How can this be accommodated for those 2% of their users without making radical changes? All I can think of is to detect their screen width and remove the overflow-x:hidden.
You have to love when requirements change late in the build process!
Edit - here's what I have that seems simple enough to me - any caveats here?
if (screen.width === 800) {
$("body").css("overflow-x", "visible");
}
