Change CSS width using javascript (JQuery Tools Scrollable) center

Question

I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.

The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html

I've tried encasing my code in a div like this:

<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">

But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.

The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.

How can I do this using javascript?

Answer 1

is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.

If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.