Full width and height layout with jQuery UI scroller

I am prototyping a layout for an unusual website project which has the following requirements:

• Site layout adjusts to be 100% the width and height of the browser window
• Vertical menu on the left-hand side the background of which adjusts to stretch to the full height of the browser window
• The content of the page will scroll horizontally (will mostly consist of images)
• The main navigation will be a series of vertical lists in columns underneath the content area

For demo purposes I have set the he开发者_如何学Pythonight of the content area wrapper to 50% to be able to better illustrate the issue I'm having within the space provided in JSFiddle - http://jsfiddle.net/f5hgL/

I'm using the jQuery UI slider component for the horizontal scrolling with some extra custom JS to calculate and set the width of the .scroll-content container (which needs to be set). If the width of each content box to a set pixel width it works fine. However when it is a percentage for flexibility it breaks (see demo).

Aside from this problem, I'm not sure this layout is achievable or even advisable. Whatever about a 100% width, 100% height raises a number of issues including consistency of the position of the scrollbar and the main navigation.

Can anyone advise on another approach for it using jQuery? The site was designed originally to be a Flash site but the client changed to a HTML/CSS/JS solution after we advised it would be better for a number of reasons including easier CMS integration, SEO and the ability to link to individual pages.

$(function() {
    //scrollpane parts
    var scrollPane = $( ".scroll-pane" ),
        scrollContent = $( ".scroll-content" );

    //set length of conveyor  
    $(".scroll-content-item").css("width","10%");
    var itemwidth = $(".scroll-content-item").width();
    var itemcount = $(".scroll-content-item").length;
    var itemswidth = itemwidth * itemcount;
    var itemsmargins = itemcount * 20; //margin of 0 10px
    var itemborders = itemcount * 2; //1px border
    var containerwidth = itemsmargins + itemswidth + itemborders + 200 + "px";
    //alert("itemsmargins + itemswidth + itemborders = "+containerwidth);    

    scrollContent.css("width",containerwidth);

    //build slider
    var scrollbar = $( ".scroll-bar" ).slider({
        max: 100,
        slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
                scrollContent.css( "margin-left", Math.round(
                    ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                ) + "px" );
            } else {
                scrollContent.css( "margin-left", 0 );
            }
        }
    });

    //append icon to handle
    var handleHelper = scrollbar.find( ".ui-slider-handle" )
    .mousedown(function() {
        scrollbar.width( handleHelper.width() );
    })
    .mouseup(function() {
        scrollbar.width( "100%" );
    })
    .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
    .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();

    //change overflow to hidden now that slider handles the scrolling
    scrollPane.css( "overflow", "hidden" );

    //size scrollbar and handle proportionally to scroll distance
    function sizeScrollbar() {
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
        scrollbar.find( ".ui-slider-handle" ).css({
            width: handleSize,
            "margin-left": -handleSize / 2
        });
        handleHelper.width( "" ).width( scrollbar.width() - handleSize );
    }

    //reset slider value based on scroll content position
    function resetValue() {
        var remainder = scrollPane.width() - scrollContent.width();
        var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
            parseInt( scrollContent.css( "margin-left" ) );
        var percentage = Math.round( leftVal / remainder * 100 );
        scrollbar.slider( "value", percentage );
    }

    //if the slider is 100% and window gets larger, reveal content
    function reflowContent() {
            var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
            var gap = scrollPane.width() - showing;
            if ( gap > 0 ) {
                scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
            }
    }

    //change handle position on window resize
    $( window ).resize(function() {
        resetValue();
        sizeScrollbar();
        reflowContent();
    });
    //init scrollbar size
    setTimeout( sizeScrollbar, 10 );//safari wants a timeout
});

Take a look at jScrollTo or visit this page http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery for a demonstration.