article:
Elements Design: Ornate Vector Pattern Brushes
article:
Elements Design: Photoshop Grid Templates

JS Plugin: Custom Content Scroller

Advertisement

"Custom scrollbar plugin utilizing jquery UI that's fully customizable with CSS. Features vertical/horizontal scrolling, mouse-wheel support, scroll easing, adjustable scrollbar height/width."


Screenshot

Plugin: Custom Content Scroller


Implementation

HEAD

stylesheet links
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

plugin links

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>

javascript

"This example adds scrollbars to all elements with class name <<content>>."

<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>


"You can call mCustomScrollbar multiple times within a page for different options (configuration and option parameters explained below) on each selector:"

<script>
  (function($){
    $(window).load(function(){
      $(".content").mCustomScrollbar();
      $("div[rel='with-custom-scrollbar']").mCustomScrollbar({
        autoDraggerLength:false
      });
      $("#content-1").mCustomScrollbar({
        mouseWheel:false,
        scrollButtons:{
          enable:true
        }
      });
    });
  })(jQuery);
</script>


"Example of defining all options parameters and their default values"

$(".content").mCustomScrollbar({
  set_width:false, 
  set_height:false, 
  horizontalScroll:false, 
  scrollInertia:550, 
  scrollEasing:"easeOutCirc", 
  mouseWheel:"auto", 
  autoDraggerLength:true, 
  scrollButtons:{ 
    enable:false, 
    scrollType:"continuous", 
    scrollSpeed:20, 
    scrollAmount:40 
  },
  advanced:{
    updateOnBrowserResize:true, 
    updateOnContentResize:false, 
    autoExpandHorizontalScroll:false 
  },
  callbacks:{
    onScroll:function(){}, 
    onTotalScroll:function(){}, 
    onTotalScrollOffset:0 
  }
});


BODY

<div id="content_1"> Lorem ipsum dolor sit amet. .. </div>


Implementation for stylesheet

Screenshots

Plugin: Custom Content Scroller



Compatibility - browsers/OS

- Internet Explorer 9 (Win 7)
- Internet Explorer 8 (Win 7)
- Internet Explorer 7 (Win XP)
- Firefox 13 (Win 7)
- Firefox 5 (Ubuntu 11.04)
- Firefox 4 (OSX 10.6)
- Firefox 3.6 (Win 7)
- Chrome 20 (Win 7)
- Chrome 5 (Win 7)
- Opera 12 (Win 7)
- Opera 9.6 (Win 7)
- Safari 5.1 (Win 7)
- Safari 4 (OSX 10.6)
- iOS 5.1 (iPad)


Examples




source
github
download

Advertisement
Tags: plugin, custom, scroller, jquery, internet exporer, firefox, mozilla, chrome, opera, safari, ios, mobile, desktop, ios, android, design, layout, develop, web, elements

Leave a Comment

No Comment

© Creative3x Ltd.