Customizing jquery Slider scroller to reposition on resize browser window

Customizing jquery Slider scroller to reposition on resize browser window

Hi,

I am using the http://jqueryui.com/slider/#side-scroll on a project

I was able to customize the slide so it has a fixed width.
However I am having trouble customizing the jquery functions to get the scroller to reposition when the browser window resize.

You can view the test page here:
http://lecreativelab.com/test/warhaftig_test_site/portfolio.html

the javascript is as follow:
  1. $(function() {
    //scrollpane parts
    var scrollPane = $( ".scroll-pane" ),
    scrollContent = $( ".scroll-content" );

    //build slider - initialize slider
    var scrollbar = $( ".scroll-bar" ).slider({
    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
    function sizeScrollbar() {
    var remainder = scrollContent.width() - scrollPane.width();
    var proportion = remainder / scrollContent.width();
    //var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );

    var handleSize = 86;

    scrollbar.find( ".ui-slider-handle" ).css({
    width: handleSize,
    "margin-left": -handleSize / 2
    });
    handleHelper.width( "" ).width( scrollbar.width() - handleSize );  //not sure  maybe (scrollPane.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 leftVal = scrollContent.css( "margin-left" ) === parseInt( scrollContent.css( "margin-left" ) );
    var percentage = Math.round( leftVal / remainder * 100 );
    scrollbar.slider( "value", percentage );
    //reposition the scroller
    }



    //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();    not needed
    reflowContent();
    });


    //init scrollbar size
    setTimeout( sizeScrollbar, 10 );//safari wants a timeout
    });

The function I highlighted control where the scroller appears when the browser window resizes.
and would need to be modified as they originally are set to operate based on the scroller resizing. Mine is set to a fixed width scroller.