Annotation of loncom/html/adm/nicescroll/README, revision 1.1
1.1 ! raeburn 1: jquery.nicescroll
! 2: v. 3.4.0 18-04-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 support 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:
! 120: * CONFIGURATION PARAMETERS
! 121:
! 122: When you call "niceScroll" you can pass some parameters to custom visual aspects:
! 123:
! 124: . cursorcolor - change cursor color in hex, default is "#000000"
! 125: . cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)
! 126: . cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)
! 127: . cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)
! 128: . cursorborder - css definition for cursor border, default is "1px solid #fff"
! 129: . cursorborderradius - border radius in pixel for cursor, default is "4px"
! 130: . zindex - change z-index for scrollbar div, default value is 9999
! 131: . scrollspeed - scrolling speed, default value is 60
! 132: . mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)
! 133: . touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer, default is false
! 134: . hwacceleration - use hardware accelerated scroll when supported, default is true
! 135: . boxzoom - enable zoom for box content, default is false
! 136: . dblclickzoom - (only when boxzoom=true) zoom activated when double click on box, default is true
! 137: . gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box, default is true
! 138: . grabcursorenabled, display "grab" icon for div with touchbehavior = true, default is true
! 139: . autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide
! 140: . background, change css for rail background, default is ""
! 141: . iframeautoresize, autoresize iframe on load event (default:true)
! 142: . cursorminheight, set the minimum cursor height in pixel (default:20)
! 143: . preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
! 144: . railoffset, you can add offset top/left for rail position (default:false)
! 145: . bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
! 146: . spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
! 147: . railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
! 148: . disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)
! 149: . horizrailenabled, nicescroll can manage horizontal scroll (default:true)
! 150: . railalign, alignment of vertical rail (defaul:"right")
! 151: . railvalign, alignment of horizontal rail (defaul:"bottom")
! 152: . enabletranslate3d, nicescroll can use css translate to scroll content (default:true)
! 153: . enablemousewheel, nicescroll can manage mouse wheel events (default:true)
! 154: . enablekeyboard, nicescroll can manage keyboard events (default:true)
! 155: . smoothscroll, scroll with ease movement (default:true)
! 156: . sensitiverail, click on rail make a scroll (default:true)
! 157: . enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
! 158: . cursorfixedheight, set fixed height for cursor in pixel (default:false)
! 159: . hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)
! 160: . directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)
! 161: . nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)
! 162: . enablescrollonselection, enable auto-scrolling of content when selection text (default:true)
! 163: . rtlmode, horizontal div scrolling starts at left side (default:false)
! 164: . cursordragontouch, drag cursor in touch / touchbehavior mode also (default:false)
! 165:
! 166: * LICENSE
! 167:
! 168: Copyright 2011-13*InuYaksa
! 169: Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php
! 170: Images used for zoom icons have derived from OLPC interface, http://laptop.org/8.2.0/manual/Browse_ChangingView.html
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/icons/back.gif){kind=icon}
Return to README CVS log ![[TXT]](/icons/text.gif){kind=icon}
![[DIR]](/icons/dir.gif){kind=icon}
Up to [LON-CAPA] / loncom / html / adm / nicescroll