Return to README CVS log

Up to [LON-CAPA] / loncom / html / adm / nicescroll

- Update nicescroll to 3.5.1

    1: jquery.nicescroll
    2: v. 3.5.1 06-27-2013
    3: copyright 2011-12-13 InuYaksa*2013
    4: licensed under the MIT
    5: http://nicescroll.areaaperta.com
    6: https://github.com/inuyaksa/jquery.nicescroll
    7: https://twitter.com/nicescroll
    8: 
    9: Nicescroll as a Greasemonkey plugin: http://userscripts.org/scripts/show/119910
   10: 
   11: 
   12: Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style.
   13: 
   14: NOW supports HORIZONAL scrollbar too!
   15: 
   16: It supports DIVs, IFrames, textarea, and document page (body) scrollbars.
   17: Compatible with all desktop browser: Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers)
   18: Compatible with mobile device: iPad/iPhone/iPod, Android 2.2+, Blackberry phones and Playbook (WebWorks/Table OS), Windows Phone 7.5 Mango.
   19: Compatible with all touch devices: iPad, Window Surface.
   20: Compabible with multi-input device (mouse with touch or pen): Window Surface, Chrome Desktop on touch notebook.
   21: Compatible with 2 directions mice: Apple Magic Mouse, Apple Mouser with 2-dir wheel, PC mouse with 2-dir wheel (if browser support it).
   22: 
   23: So you have scrollable divs with momentum for iPad 4+ and you have consistent scrollable areas for all desktop and mobile platforms.
   24: 
   25: Sexy zoom feature, you can "zoom-in" the content of any nicescroll'ed div.
   26: Nice to use and nice to see, all the content of the div in fullscreen mode.
   27: It works on desktop (double click on div) either in mobile/touch devices using pinch gesture.
   28: 
   29: On modern browsers hardware accelerated scrolling has implemented.
   30: Using animationFrame for a smoothest and cpu-saving scrolling. (when browser supports)
   31: 
   32: Warning for IE6 users (why do you uses IE6 yet? Please updgrade to a more stable and modern browser), some feature can't work for limitation of the browser.
   33: Document (body) scrollbars can't appears, old (native browser) one is used. Some issues with IFrame scrolling.
   34: 
   35: 
   36: * FEATURES
   37: 
   38: - simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)
   39: - very stylish scrollbars, with no occupation on your window (original browser scrollbars need some of page space and reduces window/div usable width)
   40: - you can style main document scrollbar (body) too!! (not all script implements this feature)
   41: - on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
   42: - scroll is smooth (as modern tablet browsing), speed is customizable
   43: - zoom feature
   44: - hardware accelerated scroll (where available)
   45: - animation frame support for smoth scrolling and cpu-saving
   46: - dragging scroll mode with scrolling momentum (as touch device)
   47: - tested for all major browsers desktop and mobile versions
   48: - support for touch devices
   49: - support for multi-input devices (IE10 with MSPointer)
   50: - compatible with many other browsers, including IE6, Safari on Mac and WP7 Mango!
   51: - very customizable aspect of bar
   52: - native scroll events are working yet
   53: - fully integrated with jQuery
   54: - compatibile with jQuery UI, jQuery Touch, jQuery Mobile
   55: 
   56: 
   57: * DEPENDENCIES
   58: It's a plugin for the jquery framework, you need to include jquery in your scripts.
   59: From 1.5.x version and on. (you can try with 1.4.2+ also)
   60: 
   61: 
   62: * INSTALLATION
   63: Put loading script tag after jquery script tag and loading the zoom image in the same folder of the script:
   64: 
   65: <script src="jquery.nicescroll.js"></script>
   66: 
   67: Copy image "zoomico.png" in the same folder of jquery.nicescroll.js.
   68: 
   69: 
   70: * HOW TO USE
   71: 
   72: Initialize nicescroll ALWAYS in (document) ready statement.
   73: 
   74: 1. Simple mode, it styles document scrollbar:
   75: 
   76: 		$(document).ready(
   77: 			function() {  
   78: 				$("html").niceScroll();
   79: 			}
   80: 		);
   81: 
   82: 2. Instance with object returned:
   83: 
   84: 		var nice = false;
   85: 		$(document).ready(
   86: 			function() {  
   87: 				nice = $("html").niceScroll();
   88: 			}
   89: 		);
   90: 
   91: 3. Style a DIV and chage cursor color:
   92: 
   93: 		$(document).ready(
   94: 			function() {  
   95: 				$("#thisdiv").niceScroll({cursorcolor:"#00F"});
   96: 			}
   97: 		);
   98: 
   99: 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
  100: 
  101: 		$(document).ready(
  102: 			function() {
  103: 				$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
  104: 			}
  105: 		);
  106: 
  107: 5. Get nicescroll object:
  108: 
  109: 		var nice = $("#mydiv").getNiceScroll();
  110: 
  111: 6. Hide scrollbars:
  112: 
  113: 		$("#mydiv").getNiceScroll().hide();
  114: 
  115: 7. Check for scrollbars resize (when content or position have changed):
  116: 
  117: 		$("#mydiv").getNiceScroll().resize();
  118: 
  119: 8. Scrolling to a position:
  120: 
  121: 		Scroll X Axis - $("#mydiv").getNiceScroll().doScrollLeft(x, duration);
  122: 		Scroll Y Axis - $("#mydiv").getNiceScroll().doScrollTop(y, duration);
  123: 
  124: 8. Scrolling to a position:
  125: 
  126: Scroll X Axis - $("#mydiv").getNiceScroll().doScrollLeft(x, duration);
  127: Scroll Y Axis - $("#mydiv").getNiceScroll().doScrollTop(y, duration);
  128: 
  129: 
  130: * CONFIGURATION PARAMETERS
  131: 
  132: When you call "niceScroll" you can pass some parameters to custom visual aspects:
  133: 
  134: . cursorcolor - change cursor color in hex, default is "#000000"
  135: . cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)
  136: . cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)
  137: . cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)
  138: . cursorborder - css definition for cursor border, default is "1px solid #fff"
  139: . cursorborderradius - border radius in pixel for cursor, default is "4px"
  140: . zindex - change z-index for scrollbar div, default value is 9999
  141: . scrollspeed - scrolling speed, default value is 60
  142: . mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)
  143: . touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer, default is false
  144: . hwacceleration - use hardware accelerated scroll when supported, default is true
  145: . boxzoom - enable zoom for box content, default is false
  146: . dblclickzoom - (only when boxzoom=true) zoom activated when double click on box, default is true
  147: . gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box, default is true
  148: . grabcursorenabled, display "grab" icon for div with touchbehavior = true, default is true
  149: . autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide
  150: . background, change css for rail background, default is ""
  151: . iframeautoresize, autoresize iframe on load event (default:true)
  152: . cursorminheight, set the minimum cursor height in pixel (default:20)
  153: . preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
  154: . railoffset, you can add offset top/left for rail position (default:false)
  155: . bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
  156: . spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
  157: . railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
  158: . disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)
  159: . horizrailenabled, nicescroll can manage horizontal scroll (default:true)
  160: . railalign, alignment of vertical rail (defaul:"right")
  161: . railvalign, alignment of horizontal rail (defaul:"bottom")
  162: . enabletranslate3d, nicescroll can use css translate to scroll content (default:true)
  163: . enablemousewheel, nicescroll can manage mouse wheel events (default:true)
  164: . enablekeyboard, nicescroll can manage keyboard events (default:true)
  165: . smoothscroll, scroll with ease movement (default:true)
  166: . sensitiverail, click on rail make a scroll (default:true)
  167: . enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
  168: . cursorfixedheight, set fixed height for cursor in pixel (default:false)
  169: . hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)
  170: . directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)
  171: . nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)
  172: . enablescrollonselection, enable auto-scrolling of content when selection text (default:true)
  173: . rtlmode, horizontal div scrolling starts at left side (default:false)
  174: . cursordragontouch, drag cursor in touch / touchbehavior mode also (default:false)
  175: . oneaxismousemode, it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse (default:"auto")
  176: 
  177: * LICENSE
  178: 
  179: Copyright 2011-13*InuYaksa
  180: Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php
  181: Images used for zoom icons have derived from OLPC interface, http://laptop.org/8.2.0/manual/Browse_ChangingView.html