SHARE
TWEET

Untitled

a guest Apr 4th, 2012 341 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //jQuery vertical scroller plugin v1.0
  2. //Author: Simon Battersby, www.simonbattersby.com
  3. //http://www.simonbattersby.com/blog/vertical-scrollbar-plugin-using-jquery-ui-slider/
  4. (function( $ ){
  5.  
  6.   $.fn.sbscroller = function( options ) {  
  7.  
  8.     var settings = {//defaults
  9.         handleImage : false,
  10.         handleTopImage : false,
  11.         handleBottomImage : false,
  12.         handleGripImage : false,
  13.         mousewheel : false,
  14.         autohide : false
  15.     };
  16.        
  17.         return this.each(function() {
  18.           if (options === 'refresh') {
  19.                  $.extend( settings, $(this).data() );//include any previously stored options for this scroll pane
  20.                  setSlider($(this));
  21.           }
  22.        
  23.       else {
  24.  
  25.         // Extend the options
  26.                   if ( options ) {
  27.                         $.extend( settings, options );
  28.                   }
  29.                   $(this).addClass('scroll-pane').data(options);//add a class and store the options as data against the element in case they are needed later
  30.                
  31.                 //JustPie :: Check to see if any children exist. If not, append the div around the children.
  32.                 if(!$(this).find('.scroll-content').length){
  33.                 if($(this).children().size()>0)
  34.                         $(this).children().wrapAll('<div class="scroll-content"/>');
  35.                 else
  36.                         $(this).append('<div class="scroll-content"/>');
  37.                 }
  38.                  setSlider($(this));
  39.  
  40.                  //JustPie :: Moving mousewheel outside of setSlider ensures we only create 1 instance of .mousewheel. Otherwise it breaks scrolling if we do many refreshes
  41.                  if(settings.mousewheel){
  42.                         $(this).parent().mousewheel(function(event, delta){
  43.                                 console.log('scroll');
  44.                                 var speed = 5;
  45.                                 var sliderVal = $(this).find(".slider-vertical").slider("value");//read current value of the slider
  46.                                 sliderVal += (delta*speed);//increment the current value
  47.                                 $(this).find(".slider-vertical").slider("value", sliderVal);//and set the new value of the slider
  48.  
  49.                                 event.preventDefault();//stop any default behaviour                    
  50.                         });
  51.                 }
  52.                
  53.                 //autohide
  54.                 if(settings.autohide){
  55.                    if (!$(this).find(".slider-wrap").hasClass('slider-wrap-active')) $scrollpane.find(".slider-wrap").hide();//only hide if it's not already active - this could be the case if content is added or removed from within the scroll pane
  56.                    $(this).hover(function(){
  57.                                 $(this).find(".slider-wrap").show().addClass('slider-wrap-active');
  58.                                 },
  59.                                 function(){
  60.                                 $(this).find(".slider-wrap").hide().removeClass('slider-wrap-active');
  61.                                 })
  62.                 }
  63.           }
  64.          
  65.     });
  66.        
  67.         function setSlider($scrollpane){
  68.                
  69.                 //change the main div to overflow-hidden as we can use the slider now
  70.                 $scrollpane.css('overflow','hidden');
  71.                
  72.                 //if it's not already there, wrap an extra div around the scrollpane so we can use the mousewheel later
  73.                 if ($scrollpane.parent('.scroll-container').length==0) $scrollpane.wrap('<\div class="scroll-container"> /');
  74.                
  75.                
  76.                 //compare the height of the scroll content to the scroll pane to see if we need a scrollbar
  77.                 var difference = $scrollpane.find('.scroll-content').height()-$scrollpane.height();//eg it's 200px longer
  78.                
  79.                 if(difference<=0 && $scrollpane.find('.slider-wrap').length>0)//scrollbar exists but is no longer required
  80.                         {
  81.                                 $scrollpane.find('.slider-wrap').remove();//remove the scrollbar
  82.                                 $scrollpane.find('.scroll-content').css({top:0});//and reset the top position
  83.                         }
  84.                
  85.                 if(difference>0)//if the scrollbar is needed, set it up...
  86.                         {
  87.                            var proportion = difference / $scrollpane.find('.scroll-content').height();//eg 200px/500px
  88.                        
  89.                            var handleHeight = Math.round((1-proportion)*$scrollpane.height());//set the proportional height - round it to make sure everything adds up correctly later on
  90.                            handleHeight -= handleHeight%2;
  91.                        
  92.                            //if the slider has already been set up and this function is called again, we may need to set the position of the slider handle
  93.                            var contentposition = $scrollpane.find('.scroll-content').position();       
  94.                            var sliderInitial = 100*(1-Math.abs(contentposition.top)/difference);
  95.                        
  96.                        
  97.                            if($scrollpane.find('.slider-wrap').length==0)//if the slider-wrap doesn't exist, insert it and set the initial value
  98.                                    {
  99.                                           $scrollpane.append('<\div class="slider-wrap" ><\div class="slider-vertical"><\/div><\/div>');//append the necessary divs so they're only there if needed
  100.                                           sliderInitial = 100;
  101.                                    }
  102.                            $scrollpane.find('.slider-wrap').height(Math.round($scrollpane.height()));//set the height of the slider bar to that of the scroll pane
  103.                            //set up the slider
  104.                            $scrollpane.find('.slider-vertical').slider({
  105.                                   orientation: 'vertical',
  106.                                   min: 0,
  107.                                   max: 100,
  108.                                   value: sliderInitial,
  109.                                   slide: function(event, ui) {
  110.                                          var topValue = -((100-ui.value)*difference/100);
  111.                                          $scrollpane.find('.scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
  112.                                   },
  113.                                   change: function(event, ui) {
  114.                                   var topValue = -((100-ui.value)*($scrollpane.find('.scroll-content').height()-$scrollpane.height())/100);//recalculate the difference on change
  115.                                          $scrollpane.find('.scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height
  116.                                   }      
  117.                            });
  118.                        
  119.                            //set the handle height and bottom margin so the middle of the handle is in line with the slider
  120.                            $scrollpane.find(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});
  121.                            var origSliderHeight = $scrollpane.height();//read the original slider height
  122.                            var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
  123.                            var sliderMargin =  (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference
  124.                            $scrollpane.find(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins
  125.                            $scrollpane.find(".ui-slider-range").css({top:-sliderMargin});//position the slider-range div at the top of the slider container
  126.                            
  127.                            //create elements to hold the images for the scrollbar handle if needed
  128.                            if(settings.handleTopImage) $scrollpane.find(".ui-slider-handle").css({backgroundImage:'url('+settings.handleImage+')',backgroundRepeat:'repeat-y'});
  129.                            if(settings.handleTopImage) $scrollpane.find(".ui-slider-handle").append('<img class="scrollbar-top" src="'+settings.handleTopImage+'"/>');
  130.                            if(settings.handleBottomImage) $scrollpane.find(".ui-slider-handle").append('<img class="scrollbar-bottom" src="'+settings.handleBottomImage+'"/>');
  131.                            if(settings.handleGripImage) {
  132.                                    $scrollpane.find(".ui-slider-handle").append('<img class="scrollbar-grip" src="'+settings.handleGripImage+'"/>');   
  133.                                    $scrollpane.find('.scrollbar-grip').load(function(){//wait till the image loads for Webkit
  134.                                            $scrollpane.find(".scrollbar-grip").css({marginTop:-1*Math.round(0.5*$scrollpane.find(".scrollbar-grip").height()+0.5)+'px'});
  135.                                    });
  136.                            }
  137.                         }//end if
  138.                          
  139.                  //code for clicks on the scrollbar outside the slider
  140.                 $(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
  141.                         event.stopPropagation();
  142.                 });
  143.            
  144.                 $(".slider-wrap").click(function(event){//clicks on the wrap outside the slider range
  145.                         var offsetTop = $(this).offset().top;//read the offset of the scroll pane
  146.                         var clickValue = (event.pageY-offsetTop)*100/$(this).height();//find the click point, subtract the offset, and calculate percentage of the slider clicked
  147.                         $(this).find(".slider-vertical").slider("value", 100-clickValue);//set the new value of the slider
  148.                 });
  149.        
  150.                  
  151.                 //additional code for mousewheel
  152.                
  153.                
  154.                
  155.         }
  156.  
  157.   };
  158. })( jQuery );
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top