Annotation of loncom/html/adm/nicescroll/README, revision 1.2
1.1 raeburn 1: jquery.nicescroll
1.2 ! raeburn 2: v. 3.5.1 06-27-2013
1.1 raeburn 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:
1.2 ! raeburn 14: NOW supports HORIZONAL scrollbar too!
1.1 raeburn 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:
1.2 ! raeburn 76: $(document).ready(
! 77: function() {
! 78: $("html").niceScroll();
! 79: }
! 80: );
1.1 raeburn 81:
82: 2. Instance with object returned:
83:
1.2 ! raeburn 84: var nice = false;
! 85: $(document).ready(
! 86: function() {
! 87: nice = $("html").niceScroll();
! 88: }
! 89: );
1.1 raeburn 90:
91: 3. Style a DIV and chage cursor color:
92:
1.2 ! raeburn 93: $(document).ready(
! 94: function() {
! 95: $("#thisdiv").niceScroll({cursorcolor:"#00F"});
! 96: }
! 97: );
1.1 raeburn 98:
99: 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:
100:
1.2 ! raeburn 101: $(document).ready(
! 102: function() {
! 103: $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
! 104: }
! 105: );
1.1 raeburn 106:
107: 5. Get nicescroll object:
108:
1.2 ! raeburn 109: var nice = $("#mydiv").getNiceScroll();
1.1 raeburn 110:
111: 6. Hide scrollbars:
112:
1.2 ! raeburn 113: $("#mydiv").getNiceScroll().hide();
1.1 raeburn 114:
115: 7. Check for scrollbars resize (when content or position have changed):
116:
1.2 ! raeburn 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);
1.1 raeburn 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)
1.2 ! raeburn 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")
1.1 raeburn 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
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