b2evolution PHP Cross Reference Blogging Systems

Source: /rsc/js/jquery/jquery.scrollwide.js - 223 lines - 6580 bytes - Summary - Text - Print

Description: jQuery Wide Scroll ---------------------------------------------------------------------------------

   1  /**

   2   * jQuery Wide Scroll

   3   * ---------------------------------------------------------------------------------

   4   *

   5   * jQuery Wide Scroll is a plugin that generates a customizable horizontal scrolling.

   6   *

   7   * @version 1.0

   8   * @author  Yuriy Bakhtin

   9   *

  10   * Usage with default values:

  11   * ---------------------------------------------------------------------------------

  12   * $('#div').scrollWide();

  13   *

  14   * <div id="div"></div>

  15   *

  16   * Usage with custom values:

  17   * ---------------------------------------------------------------------------------

  18   * 

  19   * $('#div').scrollWide( {

  20   *   scroll_step: 80, // Step of scrolling in percents of the display width 1%-100%

  21   *   scroll_time: 500, // Time to scroll one step (ms)

  22   *   width: 20, // Width of the scroll controls

  23   *   margin: 5, // Space between wide div and the scroll controls

  24   *   class_name: 'wscontrol',

  25   *   class_name_over: 'wsover',

  26   *   class_name_click: 'wsclick',

  27   *   class_name_left: 'wsleft',

  28   *   class_name_right: 'wsright',

  29  * } );

  30   */
  31  
  32  ;(function($) {
  33  
  34      $.fn.scrollWide = function( settings )
  35      {
  36          if( this.length == 0 )
  37          {
  38              debug('Selector invalid or missing!');
  39              return;
  40          }
  41          else if( this.length > 1 )
  42          {
  43              return this.each( function()
  44              {
  45                  $.fn.scrollWide.apply( $( this ), [settings] );
  46              } );
  47          }
  48  
  49          var opt = $.extend( {}, $.fn.scrollWide.defaults, settings ),
  50              $this = $( this ),
  51              id    = this.attr( 'id' );
  52  
  53          if( !this.HasScrollBarHorizontal() )
  54          {    // No horizontal scrollbar
  55              return $this;
  56          }
  57  
  58          if( id === undefined )
  59          {
  60              id = 'scrollWide-' + $this.index();
  61              $this.attr( 'id', id );
  62          }
  63  
  64          $this.data( 'options', opt );
  65  
  66          initialize( $this );
  67  
  68          return $this;
  69      };
  70  
  71      $.fn.HasScrollBarHorizontal = function()
  72      {
  73          var _elm = $(this)[0];
  74          var _hasScrollBar = false;
  75          if( $(this).width() < _elm.scrollWidth ) /* ( _elm.clientHeight < _elm.scrollHeight ) - Vertical Scroll Bar */
  76          {
  77              _hasScrollBar = true;
  78          }
  79          return _hasScrollBar;
  80      }
  81  
  82  	function initialize( obj )
  83      {
  84          var options = obj.data('options'),
  85              obj_orig_width = obj.width();
  86  
  87          obj.css( {
  88              width: obj_orig_width - options.width - options.margin,
  89              marginRight: options.width + options.margin + 2
  90          } );
  91  
  92          var scroll_right = create_control( obj, 'right' );
  93          var scroll_left = create_control( obj, 'left' );
  94  
  95          obj.bind( 'scroll', function()
  96          {    // Do these actions when main div is scrolling
  97              var maxScrollLeft = this.scrollWidth - this.clientWidth;
  98              if( $( this ).scrollLeft() == maxScrollLeft )
  99              {    // Hide right scroll control if scrollbar is located in the right position
 100                  scroll_right.hide();
 101              }
 102              else
 103              {    // Show right scroll control
 104                  scroll_right.show();
 105              }
 106  
 107              if( $( this ).scrollLeft() == 0 )
 108              {    // Hide left scroll control if scrollbar is located in the left position
 109                  scroll_left.hide();
 110                  obj.css( 'marginLeft', '0' );
 111              }
 112              else
 113              {    // Show left scroll control
 114                  scroll_left.show();
 115                  obj.css( { // Move main div to clear a space for the left scroll control
 116                      position: 'relative',
 117                      marginLeft: options.width + options.margin + 2
 118                  } );
 119              }
 120  
 121              if( scroll_right.is(':visible') && scroll_left.is(':visible') )
 122              {    // When left & right scroll controls are visible
 123                  obj.css( 'width', obj_orig_width - 2 * ( options.width + options.margin ) - 2 );
 124              }
 125              else
 126              {    // Only one control is visible
 127                  obj.css( 'width', obj_orig_width - options.width - options.margin - 1 );
 128              }
 129          } );
 130  
 131          $( [ scroll_right.get(0), scroll_left.get(0) ] ).bind( 'mouseover', function()
 132          {    // Change style of the controls elements on mouseover event
 133              $( '.' + options.class_name ).removeClass( options.class_name_over );
 134              $( this ).addClass( options.class_name_over );
 135              $( '.' + options.class_name ).removeClass( options.class_name_click );
 136          } );
 137  
 138          $( [ scroll_right.get(0), scroll_left.get(0) ] ).bind( 'mouseout', function()
 139          {    // Change style of the controls elements on mouseout event
 140              $( this ).removeClass( options.class_name_over );
 141              $( '.' + options.class_name ).removeClass( options.class_name_click );
 142          } );
 143  
 144          $( [ scroll_right.get(0), scroll_left.get(0) ] ).bind( 'mousedown mouseup', function()
 145          {    // Change style of the controls elements on mousedown & mouseup events
 146              $( this ).toggleClass( options.class_name_click );
 147          } );
 148  
 149          scroll_right.bind( 'click', function()
 150          {    // Bind action to scroll to the right
 151              var scroll_value = obj.scrollLeft() + Math.floor( obj.width() * options.scroll_step / 100 );
 152              obj.animate( {scrollLeft: scroll_value + 'px'}, options.scroll_time );
 153          } );
 154  
 155          scroll_left.bind( 'click', function()
 156          {    // Bind action to scroll to the left
 157              var scroll_value = obj.scrollLeft() - Math.floor( obj.width() * options.scroll_step / 100 );
 158              obj.animate( { scrollLeft: scroll_value + 'px' }, options.scroll_time );
 159          } );
 160      }
 161  
 162  	function create_control( obj, type )
 163      {
 164          var options = obj.data('options'),
 165              control_id = obj.attr( 'id' ) + '-' + type;
 166  
 167          var control_class_name = options.class_name_left;
 168          if( type == 'right' )
 169          {
 170              control_class_name = options.class_name_right;
 171          }
 172  
 173          // Insert new control element

 174          obj.after( '<div id="' + control_id + '" class="' + options.class_name + ' ' + control_class_name + '"></div>' );
 175  
 176          var scroll_control_obj = $( '#' + control_id );
 177  
 178          var control_css_left = obj.offset().left;
 179          if( type == 'right' )
 180          {
 181              control_css_left += obj.outerWidth() + options.margin;
 182          }
 183          else
 184          {    // left control
 185              if( $(this).scrollLeft() == 0 )
 186              {    // Hide left control
 187                  scroll_control_obj.hide();
 188              }
 189          }
 190  
 191          scroll_control_obj.css( { // Set position and sizes for new created scroll control element
 192              position: 'absolute',
 193              left: control_css_left,
 194              top: obj.offset().top,
 195              width: options.width,
 196              height: obj.outerHeight() - 2
 197          } );
 198  
 199          return scroll_control_obj;
 200      }
 201  
 202  	function debug( message )
 203      {
 204          if( window.console && window.console.log )
 205          {
 206              window.console.log( message );
 207          }
 208      };
 209  
 210      // Default settings

 211      $.fn.scrollWide.defaults = {
 212          scroll_step: 80, // Step of scrolling in percents of the display width 1%-100%
 213          scroll_time: 500, // Time to scroll one step (ms)
 214          width: 20, // Width of the scroll controls
 215          margin: 5, // Space between wide div and the scroll controls
 216          class_name: 'wscontrol',
 217          class_name_over: 'wsover',
 218          class_name_click: 'wsclick',
 219          class_name_left: 'wsleft',
 220          class_name_right: 'wsright',
 221      };
 222  
 223  })(jQuery);

title

Description

title

Description

title

Description

title

title

Body