jQuery Forum

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.