From d4c648ec1455a546f4cb4d76b307c291d8e26823 Mon Sep 17 00:00:00 2001 From: Evgeny Lapin Date: Thu, 27 Nov 2014 09:17:04 +0600 Subject: [PATCH] Updated to version 2.1.8 --- README.md | 11 +++- index.html | 38 ------------ infinite/css/website.css | 10 --- infinite/{json => }/data.json | 0 infinite/index.html | 6 +- .../js => infinite}/jquery.tinyscrollbar.js | 61 +++++++++++-------- infinite/jquery.tinyscrollbar.min.js | 7 +++ infinite/tinyscrollbar.css | 10 +++ nojquery/css/website.css | 10 --- nojquery/index.html | 4 +- nojquery/tinyscrollbar.css | 10 +++ nojquery/{js => }/tinyscrollbar.js | 34 +++++++---- nojquery/tinyscrollbar.min.js | 7 +++ responsive/index.html | 11 +--- .../js => responsive}/jquery.tinyscrollbar.js | 61 +++++++++++-------- responsive/jquery.tinyscrollbar.min.js | 7 +++ .../{css/website.css => tinyscrollbar.css} | 8 +-- simple/css/website.css | 10 --- simple/index.html | 4 +- simple/{js => }/jquery.tinyscrollbar.js | 61 +++++++++++-------- simple/jquery.tinyscrollbar.min.js | 7 +++ simple/tinyscrollbar.css | 10 +++ 22 files changed, 208 insertions(+), 179 deletions(-) delete mode 100644 index.html delete mode 100644 infinite/css/website.css rename infinite/{json => }/data.json (100%) rename {responsive/js => infinite}/jquery.tinyscrollbar.js (78%) create mode 100644 infinite/jquery.tinyscrollbar.min.js create mode 100644 infinite/tinyscrollbar.css delete mode 100644 nojquery/css/website.css create mode 100644 nojquery/tinyscrollbar.css rename nojquery/{js => }/tinyscrollbar.js (83%) create mode 100644 nojquery/tinyscrollbar.min.js rename {infinite/js => responsive}/jquery.tinyscrollbar.js (78%) create mode 100644 responsive/jquery.tinyscrollbar.min.js rename responsive/{css/website.css => tinyscrollbar.css} (69%) delete mode 100644 simple/css/website.css rename simple/{js => }/jquery.tinyscrollbar.js (78%) create mode 100644 simple/jquery.tinyscrollbar.min.js create mode 100644 simple/tinyscrollbar.css diff --git a/README.md b/README.md index a7e6208..f1f6514 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ jquery-tinyscrollbar Tiny Scrollbar is a nice and elegant way to enable the scrolling of content on mobile and desktop devices. Its designed to be a dynamic lightweight utility. Furthermore it gives a User Interface Designer a powerful way of enhancing the Ui (user interface) of a website. -It comes in 2 flavors as a vanilla Javascript microlib and a jQuery plugin. The jQuery plugin does not need any other external libaries like jQuery Ui. +It comes in 2 flavours as a vanilla Javascript microlib and a jQuery plugin. The jQuery plugin does not need any other external libraries like jQuery Ui. Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required. @@ -21,10 +21,15 @@ Browser support differs between the jQuery plugin and the plain Javascript micro * Examples can be seen on this page, by downloading the zip or here * Lightweight -#### License +#### Examples -Tinyscrollbar is a free script its licensed under the MIT license. +The examples below are all for the jQuery Plugin. If you need some more (advanced) [examples you can find them here](http://baijs.com/tinyscrollbar/examples/). You can also find a example for the plain javascript library there. #### Source The latest source is available on [GitHub](https://github.com/wieringen/tinyscrollbar). + +#### License + +Tinyscrollbar is a free script its licensed under the MIT license. + diff --git a/index.html b/index.html deleted file mode 100644 index b8ef4a3..0000000 --- a/index.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - Tiny Scrollbar: A lightweight jQuery plugin - - - - - - - - -
-
-
-
-

Magnis dis parturient montes

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.

- -

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.

- -

Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.

- -

Adipiscing risus

-

Quisque vel felis ligula. Cras viverra sapien auctor ante porta a tincidunt quam pulvinar. Nunc facilisis, enim id volutpat sodales, leo ipsum accumsan diam, eu adipiscing risus nisi eu quam. Ut in tortor vitae elit condimentum posuere vel et erat. Duis at fringilla dolor. Vivamus sem tellus, porttitor non imperdiet et, rutrum id nisl. Nunc semper facilisis porta. Curabitur ornare metus nec sapien molestie in mattis lorem ullamcorper. Ut congue, purus ac suscipit suscipit, magna diam sodales metus, tincidunt imperdiet diam odio non diam. Ut mollis lobortis vulputate. Nam tortor tortor, dictum sit amet porttitor sit amet, faucibus eu sem. Curabitur aliquam nisl sed est semper a fringilla velit porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in sapien id nulla volutpat sodales ac bibendum magna. Cras sollicitudin, massa at sodales sodales, lacus tortor vestibulum massa, eu consequat dui nulla et ipsum.

- -

Aliquam accumsan aliquam urna, id vulputate ante posuere eu. Nullam pretium convallis tincidunt. Duis vitae odio arcu, ut fringilla enim. Nam ante eros, vestibulum sit amet rhoncus et, vehicula quis tellus. Curabitur sed iaculis odio. Praesent vitae ligula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis, nunc non laoreet mollis, neque est mattis nisl, nec accumsan velit nunc ut arcu. Donec quis est mauris, eu auctor nulla. Fusce leo diam, tempus a varius sit amet, auctor ac metus. Nam turpis nulla, fermentum in rhoncus et, auctor id sem. Aliquam id libero eu neque elementum lobortis nec et odio.

-
-
-
- - diff --git a/infinite/css/website.css b/infinite/css/website.css deleted file mode 100644 index 2e76b63..0000000 --- a/infinite/css/website.css +++ /dev/null @@ -1,10 +0,0 @@ -/* Tiny Scrollbar */ -#scrollbar1 { width: 520px; margin: 20px 0 10px; } -#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; } -#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; } -#scrollbar1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; } -#scrollbar1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; } -#scrollbar1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; } -#scrollbar1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; } -#scrollbar1 .disable { display: none; } -.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } diff --git a/infinite/json/data.json b/infinite/data.json similarity index 100% rename from infinite/json/data.json rename to infinite/data.json diff --git a/infinite/index.html b/infinite/index.html index 7ab5a4c..744dcc9 100644 --- a/infinite/index.html +++ b/infinite/index.html @@ -6,10 +6,10 @@ - + - + + - + diff --git a/infinite/js/jquery.tinyscrollbar.js b/responsive/jquery.tinyscrollbar.js similarity index 78% rename from infinite/js/jquery.tinyscrollbar.js rename to responsive/jquery.tinyscrollbar.js index 99c1c5f..e014d71 100644 --- a/infinite/js/jquery.tinyscrollbar.js +++ b/responsive/jquery.tinyscrollbar.js @@ -2,30 +2,31 @@ { if (typeof define === 'function' && define.amd) { - // AMD. Register as an anonymous module. define(['jquery'], factory); - } else if (typeof exports === 'object') + } + else if (typeof exports === 'object') { - // Node/CommonJS factory(require('jquery')); - } else + } + else { - // Browser globals factory(jQuery); } -}(function ($) +} +(function ($) { + "use strict"; var pluginName = "tinyscrollbar" , defaults = { - axis : 'y' // vertical or horizontal scrollbar? ( x || y ). - , wheel : true // enable or disable the mousewheel; - , wheelSpeed : 40 // how many pixels must the mouswheel scroll at a time. - , wheelLock : true // return mouswheel to browser if there is no more content. - , scrollInvert : false // Enable invert style scrolling - , trackSize : false // set the size of the scrollbar to auto or a fixed number. - , thumbSize : false // set the size of the thumb to auto or a fixed number. + axis : 'y' // Vertical or horizontal scrollbar? ( x || y ). + , wheel : true // Enable or disable the mousewheel; + , wheelSpeed : 40 // How many pixels must the mouswheel scroll at a time. + , wheelLock : true // Lock default scrolling window when there is no more content. + , scrollInvert : false // Enable invert style scrolling + , trackSize : false // Set the size of the scrollbar to auto or a fixed number. + , thumbSize : false // Set the size of the thumb to auto or a fixed number } ; @@ -42,10 +43,12 @@ , $track = $scrollbar.find(".track") , $thumb = $scrollbar.find(".thumb") - , mousePosition = 0 + , mousePosition = 0 , isHorizontal = this.options.axis === 'x' - , hasTouchEvents = "ontouchstart" in document.documentElement + , hasTouchEvents = ("ontouchstart" in document.documentElement) + , wheelEvent = ("onwheel" in document || document.documentMode >= 9) ? "wheel" : + (document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll") , sizeLabel = isHorizontal ? "width" : "height" , posiLabel = isHorizontal ? "left" : "top" @@ -77,9 +80,9 @@ this.trackSize = this.options.trackSize || this.viewportSize; this.thumbSize = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio)))); this.trackRatio = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize); + mousePosition = $track.offset().top; $scrollbar.toggleClass("disable", this.contentRatio >= 1); - switch (scrollTo) { case "bottom": @@ -87,7 +90,7 @@ break; case "relative": - this.contentPosition = Math.min(this.contentSize - this.viewportSize, Math.max(0, this.contentPosition)); + this.contentPosition = Math.min(Math.max(this.contentSize - this.viewportSize, 0), Math.max(0, this.contentPosition)); break; default: @@ -95,6 +98,8 @@ } setSize(); + + return self; }; function setSize() @@ -114,8 +119,9 @@ { if(1 === event.touches.length) { - start(event.touches[0]); event.stopPropagation(); + + start(event.touches[0]); } }; } @@ -125,10 +131,14 @@ $track.bind("mousedown", drag); } + $(window).resize(function() + { + self.update("relative"); + }); + if(self.options.wheel && window.addEventListener) { - $container[0].addEventListener("DOMMouseScroll", wheel, false ); - $container[0].addEventListener("mousewheel", wheel, false ); + $container[0].addEventListener(wheelEvent, wheel, false ); } else if(self.options.wheel) { @@ -164,8 +174,9 @@ { if(self.contentRatio < 1) { - var eventObject = event || window.event - , wheelSpeedDelta = eventObject.wheelDelta ? eventObject.wheelDelta / 120 : -eventObject.detail / 3 + var evntObj = event || window.event + , deltaDir = "delta" + self.options.axis.toUpperCase() + , wheelSpeedDelta = -(evntObj[deltaDir] || evntObj.detail || (-1 / 3 * evntObj.wheelDelta)) / 40 ; self.contentPosition -= wheelSpeedDelta * self.options.wheelSpeed; @@ -178,8 +189,8 @@ if(self.options.wheelLock || (self.contentPosition !== (self.contentSize - self.viewportSize) && self.contentPosition !== 0)) { - eventObject = $.event.fix(eventObject); - eventObject.preventDefault(); + evntObj = $.event.fix(evntObj); + evntObj.preventDefault(); } } } @@ -229,4 +240,4 @@ } }); }; -})); \ No newline at end of file +})); diff --git a/responsive/jquery.tinyscrollbar.min.js b/responsive/jquery.tinyscrollbar.min.js new file mode 100644 index 0000000..9262935 --- /dev/null +++ b/responsive/jquery.tinyscrollbar.min.js @@ -0,0 +1,7 @@ +/*! tinyscrollbar - v2.1.8 - 2014-11-14 + * http://www.baijs.com/tinyscrollbar + * + * Copyright (c) 2014 Maarten Baijs ; + * Licensed under the MIT license */ + +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){"use strict";function b(b,e){function f(){return m.update(),h(),m}function g(){r.css(x,m.contentPosition/m.trackRatio),o.css(x,-m.contentPosition),p.css(w,m.trackSize),q.css(w,m.trackSize),r.css(w,m.thumbSize)}function h(){u?n[0].ontouchstart=function(a){1===a.touches.length&&(a.stopPropagation(),i(a.touches[0]))}:(r.bind("mousedown",i),q.bind("mousedown",k)),a(window).resize(function(){m.update("relative")}),m.options.wheel&&window.addEventListener?b[0].addEventListener(v,j,!1):m.options.wheel&&(b[0].onmousewheel=j)}function i(b){a("body").addClass("noSelect"),s=t?b.pageX:b.pageY,m.thumbPosition=parseInt(r.css(x),10)||0,u?(document.ontouchmove=function(a){a.preventDefault(),k(a.touches[0])},document.ontouchend=l):(a(document).bind("mousemove",k),a(document).bind("mouseup",l),r.bind("mouseup",l))}function j(c){if(m.contentRatio<1){var d=c||window.event,e="delta"+m.options.axis.toUpperCase(),f=-(d[e]||d.detail||-1/3*d.wheelDelta)/40;m.contentPosition-=f*m.options.wheelSpeed,m.contentPosition=Math.min(m.contentSize-m.viewportSize,Math.max(0,m.contentPosition)),b.trigger("move"),r.css(x,m.contentPosition/m.trackRatio),o.css(x,-m.contentPosition),(m.options.wheelLock||m.contentPosition!==m.contentSize-m.viewportSize&&0!==m.contentPosition)&&(d=a.event.fix(d),d.preventDefault())}}function k(a){if(m.contentRatio<1){var c=t?a.pageX:a.pageY,d=c-s;m.options.scrollInvert&&u&&(d=s-c);var e=Math.min(m.trackSize-m.thumbSize,Math.max(0,m.thumbPosition+d));m.contentPosition=e*m.trackRatio,b.trigger("move"),r.css(x,e),o.css(x,-m.contentPosition)}}function l(){a("body").removeClass("noSelect"),a(document).unbind("mousemove",k),a(document).unbind("mouseup",l),r.unbind("mouseup",l),document.ontouchmove=document.ontouchend=null}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var m=this,n=b.find(".viewport"),o=b.find(".overview"),p=b.find(".scrollbar"),q=p.find(".track"),r=p.find(".thumb"),s=0,t="x"===this.options.axis,u="ontouchstart"in document.documentElement,v="onwheel"in document||document.documentMode>=9?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",w=t?"width":"height",x=t?"left":"top";return this.contentPosition=0,this.viewportSize=0,this.contentSize=0,this.contentRatio=0,this.trackSize=0,this.trackRatio=0,this.thumbSize=0,this.thumbPosition=0,this.update=function(a){var b=w.charAt(0).toUpperCase()+w.slice(1).toLowerCase();switch(this.viewportSize=n[0]["offset"+b],this.contentSize=o[0]["scroll"+b],this.contentRatio=this.viewportSize/this.contentSize,this.trackSize=this.options.trackSize||this.viewportSize,this.thumbSize=Math.min(this.trackSize,Math.max(0,this.options.thumbSize||this.trackSize*this.contentRatio)),this.trackRatio=this.options.thumbSize?(this.contentSize-this.viewportSize)/(this.trackSize-this.thumbSize):this.contentSize/this.trackSize,s=q.offset().top,p.toggleClass("disable",this.contentRatio>=1),a){case"bottom":this.contentPosition=this.contentSize-this.viewportSize;break;case"relative":this.contentPosition=Math.min(Math.max(this.contentSize-this.viewportSize,0),Math.max(0,this.contentPosition));break;default:this.contentPosition=parseInt(a,10)||0}return g(),m},f()}var c="tinyscrollbar",d={axis:"y",wheel:!0,wheelSpeed:40,wheelLock:!0,scrollInvert:!1,trackSize:!1,thumbSize:!1};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}}); \ No newline at end of file diff --git a/responsive/css/website.css b/responsive/tinyscrollbar.css similarity index 69% rename from responsive/css/website.css rename to responsive/tinyscrollbar.css index 2988479..457ad89 100644 --- a/responsive/css/website.css +++ b/responsive/tinyscrollbar.css @@ -25,7 +25,7 @@ #scrollbar1 .scrollbar { - background:transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; + background:transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position:absolute; background-position:0 0; right: -20px; @@ -35,7 +35,7 @@ #scrollbar1 .track { - background:transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; + background:transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height:100%; width:13px; position:relative; @@ -44,7 +44,7 @@ #scrollbar1 .thumb { - background:transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; + background:transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height:20px; width:25px; cursor:pointer; @@ -56,7 +56,7 @@ #scrollbar1 .thumb .end { - background:transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; + background:transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow:hidden; height:5px; width:25px; diff --git a/simple/css/website.css b/simple/css/website.css deleted file mode 100644 index 2e76b63..0000000 --- a/simple/css/website.css +++ /dev/null @@ -1,10 +0,0 @@ -/* Tiny Scrollbar */ -#scrollbar1 { width: 520px; margin: 20px 0 10px; } -#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; } -#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; } -#scrollbar1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; } -#scrollbar1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; } -#scrollbar1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; } -#scrollbar1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; } -#scrollbar1 .disable { display: none; } -.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } diff --git a/simple/index.html b/simple/index.html index e86bb22..6473e67 100644 --- a/simple/index.html +++ b/simple/index.html @@ -6,10 +6,10 @@ - + - +