I am working on a website for a client, and we have the following requirements:
- When the browser width is greater than 960px don't show a scroll bar.
- When the content is wider than the browser but the browser width is greater than 960 don't show the scroll bar
- If the browser is 960px don't show the scroll bar when it is needed.
I have the following javascript that works perfectly under ie, chrome, safari and opera, but dies in FF by forcing the page to "reload" client side (it redraws all elements).
function sizeHandler(myWidth) {
if (myWidth > 960)
document.documentElement.style.overflowX = 'hidden';
else
document.documentElement.style.overflowX = 'auto';
}
Because everyone seems to question the content, here is the HTML:
<body>
<div id="flashContent">
<object...>
</object>
</div>
</body>
<script...>$(document).ready(sizeHandler(getWidth()));</script>
Ignore getWidth(), it works, but I don't feel like adding another 15 lines to this ;). The object tag is a flash object.