tinyscrollbar minor update
This commit is contained in:
parent
3182f5c9a8
commit
db2b371744
|
@ -11,19 +11,20 @@
|
||||||
* Depends on library: jQuery
|
* Depends on library: jQuery
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
( function( $ )
|
;( function( $ )
|
||||||
{
|
{
|
||||||
$.tiny = $.tiny || { };
|
$.tiny = $.tiny || { };
|
||||||
|
|
||||||
$.tiny.scrollbar = {
|
$.tiny.scrollbar = {
|
||||||
options: {
|
options: {
|
||||||
axis : 'y' // vertical or horizontal scrollbar? ( x || y ).
|
axis : 'y' // vertical or horizontal scrollbar? ( x || y ).
|
||||||
, wheel : 40 // how many pixels must the mouswheel scroll at a time.
|
, wheel : 40 // how many pixels must the mouswheel scroll at a time.
|
||||||
, scroll : true // enable or disable the mousewheel.
|
, scroll : true // enable or disable the mousewheel.
|
||||||
, lockscroll : true // return scrollwheel to browser if there is no more content.
|
, lockscroll : true // return scrollwheel to browser if there is no more content.
|
||||||
, size : 'auto' // set the size of the scrollbar to auto or a fixed number.
|
, size : 'auto' // set the size of the scrollbar to auto or a fixed number.
|
||||||
, sizethumb : 'auto' // set the size of the thumb to auto or a fixed number.
|
, sizethumb : 'auto' // set the size of the thumb to auto or a fixed number.
|
||||||
, onMove : function(){}
|
, invertscroll : false // Enable mobile invert style scrolling
|
||||||
|
, onMove : function(){}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -59,13 +60,15 @@
|
||||||
, iScroll = 0
|
, iScroll = 0
|
||||||
, iPosition = { start: 0, now: 0 }
|
, iPosition = { start: 0, now: 0 }
|
||||||
, iMouse = {}
|
, iMouse = {}
|
||||||
, touchEvents = ( 'ontouchstart' in document.documentElement ) ? true : false
|
, touchEvents = 'ontouchstart' in document.documentElement
|
||||||
|
, UA = $.browser
|
||||||
;
|
;
|
||||||
|
|
||||||
function initialize()
|
function initialize()
|
||||||
{
|
{
|
||||||
oSelf.update();
|
oSelf.update();
|
||||||
setEvents();
|
setEvents();
|
||||||
|
|
||||||
return oSelf;
|
return oSelf;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -124,6 +127,9 @@
|
||||||
{
|
{
|
||||||
oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
|
oWrapper[0].addEventListener( 'DOMMouseScroll', wheel, false );
|
||||||
oWrapper[0].addEventListener( 'mousewheel', wheel, false );
|
oWrapper[0].addEventListener( 'mousewheel', wheel, false );
|
||||||
|
oWrapper[0].addEventListener( 'MozMousePixelScroll', function( event ){
|
||||||
|
event.preventDefault();
|
||||||
|
}, false);
|
||||||
}
|
}
|
||||||
else if( options.scroll )
|
else if( options.scroll )
|
||||||
{
|
{
|
||||||
|
@ -133,6 +139,16 @@
|
||||||
|
|
||||||
function start( event )
|
function start( event )
|
||||||
{
|
{
|
||||||
|
$( "body" ).addClass( "noSelect" );
|
||||||
|
// Disable select text under IE10
|
||||||
|
if ( UA.msie < 10 ){
|
||||||
|
$( "body" ).attr({
|
||||||
|
"onselectstart": "return false",
|
||||||
|
"ondragstart": "return false"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
oScrollbar.obj.addClass( "dragging" );
|
||||||
|
|
||||||
var oThumbDir = parseInt( oThumb.obj.css( sDirection ), 10 );
|
var oThumbDir = parseInt( oThumb.obj.css( sDirection ), 10 );
|
||||||
iMouse.start = sAxis ? event.pageX : event.pageY;
|
iMouse.start = sAxis ? event.pageX : event.pageY;
|
||||||
iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
|
iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
|
||||||
|
@ -181,13 +197,13 @@
|
||||||
{
|
{
|
||||||
if( oContent.ratio < 1 )
|
if( oContent.ratio < 1 )
|
||||||
{
|
{
|
||||||
if( ! touchEvents )
|
if( options.invertscroll && touchEvents )
|
||||||
{
|
{
|
||||||
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
|
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( iMouse.start - ( sAxis ? event.pageX : event.pageY ) ))));
|
iPosition.now = Math.min( ( oTrack[ options.axis ] - oThumb[ options.axis ] ), Math.max( 0, ( iPosition.start + ( ( sAxis ? event.pageX : event.pageY ) - iMouse.start))));
|
||||||
}
|
}
|
||||||
|
|
||||||
iScroll = iPosition.now * oScrollbar.ratio;
|
iScroll = iPosition.now * oScrollbar.ratio;
|
||||||
|
@ -198,6 +214,12 @@
|
||||||
|
|
||||||
function end()
|
function end()
|
||||||
{
|
{
|
||||||
|
$( "body" ).removeClass( "noSelect" );
|
||||||
|
// Enable select text under IE10
|
||||||
|
if ( UA.msie < 10 ){
|
||||||
|
$( "body" ).removeAttr( "onselectstart", "ondragstart" );
|
||||||
|
}
|
||||||
|
oScrollbar.obj.removeClass( "dragging" );
|
||||||
$( document ).unbind( 'mousemove', drag );
|
$( document ).unbind( 'mousemove', drag );
|
||||||
$( document ).unbind( 'mouseup', end );
|
$( document ).unbind( 'mouseup', end );
|
||||||
oThumb.obj.unbind( 'mouseup', end );
|
oThumb.obj.unbind( 'mouseup', end );
|
||||||
|
|
|
@ -364,6 +364,14 @@
|
||||||
height: 6px;
|
height: 6px;
|
||||||
width: 6px;
|
width: 6px;
|
||||||
}
|
}
|
||||||
|
.noSelect {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-o-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
.tinycanvas .scrollbar {
|
.tinycanvas .scrollbar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 9;
|
z-index: 9;
|
||||||
|
@ -373,6 +381,10 @@
|
||||||
-moz-transition: opacity 0.3s ease;
|
-moz-transition: opacity 0.3s ease;
|
||||||
transition: opacity 0.3s ease;
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
|
.tinycanvas .scrollbar.dragging {
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
.tinycanvas .scrollbar.sb_h {
|
.tinycanvas .scrollbar.sb_h {
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: -6px;
|
bottom: -6px;
|
||||||
|
|
|
@ -276,7 +276,7 @@ a:focus { outline: none; }
|
||||||
height: 100%;
|
height: 100%;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 10;
|
z-index: 12;
|
||||||
}
|
}
|
||||||
#orbitdiag .tile { background-color: #000; }
|
#orbitdiag .tile { background-color: #000; }
|
||||||
.diag_holder { background-color: #000; }
|
.diag_holder { background-color: #000; }
|
||||||
|
@ -374,6 +374,9 @@ a:focus { outline: none; }
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
.widget.gs_w {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
/* header drop menu */
|
/* header drop menu */
|
||||||
.sdm_mdr .sdm_o { top: 36px; }
|
.sdm_mdr .sdm_o { top: 36px; }
|
||||||
|
@ -699,7 +702,7 @@ a:focus { outline: none; }
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 9;
|
z-index: 12;
|
||||||
}
|
}
|
||||||
.app_frame .app_holder {
|
.app_frame .app_holder {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
|
|
@ -85,8 +85,8 @@
|
||||||
<div class="diag_holder_inner">
|
<div class="diag_holder_inner">
|
||||||
<div class="diag_message"></div>
|
<div class="diag_message"></div>
|
||||||
<div class="diag_action">
|
<div class="diag_action">
|
||||||
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
|
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
|
||||||
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
|
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -81,8 +81,8 @@
|
||||||
<div class="diag_holder_inner">
|
<div class="diag_holder_inner">
|
||||||
<div class="diag_message"></div>
|
<div class="diag_message"></div>
|
||||||
<div class="diag_action">
|
<div class="diag_action">
|
||||||
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
|
<a href="" id="diag_confirm" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
|
||||||
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh2 hp" onclick="return false;"></a>
|
<a href="" id="diag_cancel" class="diag_btn admbg admtxt w1 hh1 hp" onclick="return false;"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Reference in New Issue