2013-02-22 18:26:17 +02:00
<!DOCTYPE html>
< html lang = "en" >
2013-02-22 09:47:31 -06:00
< head >
2013-02-22 18:26:17 +02:00
< meta charset = "iso-8859-1" >
2013-02-22 09:47:31 -06:00
< title > Testing mousewheel plugin</ title >
< style >
2013-11-13 21:01:37 +02:00
html {
font : 13 px Arial , sans-serif ;
}
2013-10-18 10:58:20 -05:00
# stage {
2013-11-18 18:14:47 +02:00
color : #fff ;
2013-10-18 10:58:20 -05:00
position : relative ;
2013-11-14 12:50:28 -05:00
zoom : 1 ;
2013-10-18 10:58:20 -05:00
}
2013-11-13 21:01:37 +02:00
2013-11-18 18:14:47 +02:00
# test1 , # test2 , # test3 , # test4 , # test5 , # test6 , # test7 {
float : left ;
}
2013-02-22 09:47:31 -06:00
# test1 {
background-color : #000 ;
width : 120 px ;
height : 100 px ;
}
# test2 {
background-color : #333 ;
width : 120 px ;
height : 100 px ;
}
# test3 {
background-color : #666 ;
width : 120 px ;
height : 100 px ;
}
# test4 {
background-color : #000 ;
width : 120 px ;
height : 100 px ;
}
# test5 {
background-color : #333 ;
padding : 5 px ;
width : 400 px ;
height : 400 px ;
}
# test6 {
background-color : #666 ;
padding : 5 px ;
width : 250 px ;
height : 250 px ;
}
# test7 {
background-color : #000 ;
padding : 5 px ;
width : 100 px ;
height : 100 px ;
}
# forceScroll {
clear : both ;
height : 1000 px ;
}
# logger {
position : absolute ;
2013-10-18 10:58:20 -05:00
top : 100 px ;
2013-11-14 12:50:28 -05:00
left : 0 ;
2013-10-18 10:58:20 -05:00
width : 480 px ;
height : 310 px ;
2013-02-22 09:47:31 -06:00
overflow : auto ;
2013-10-18 10:58:20 -05:00
z-index : 100 ;
2013-02-22 09:47:31 -06:00
}
# logger p {
2013-11-18 18:14:47 +02:00
color : #000 ;
2013-02-22 09:47:31 -06:00
padding : 2 px ;
border-bottom : 1 px solid #ccc ;
margin : 0 ;
}
# logger p : nth-child ( even ) {
2013-11-13 21:01:37 +02:00
background-color : #ffffe8 ;
2013-02-22 09:47:31 -06:00
}
# logger p : nth-child ( 10n ) {
border-bottom-color : #000 ;
}
</ style >
2013-11-18 17:58:46 +02:00
< script >
( function () {
var verMatch = /v=([\w\.]+)/ . exec ( location . search ),
version = verMatch && verMatch [ 1 ],
src ;
if ( version )
src = 'code.jquery.com/jquery-' + version ;
else
src = 'code.jquery.com/jquery-git' ;
document . write ( '<script src="http://' + src + '.js"><\/script>' );
})();
</ script >
2013-02-22 18:26:17 +02:00
< script >
2013-02-22 09:47:31 -06:00
$ ( function () {
$ ( '#userAgent' ). html ( navigator . userAgent );
2013-10-18 10:57:40 -05:00
$ ( '#jqueryVersion' ). html ( $ . fn . jquery );
2013-02-22 09:47:31 -06:00
2013-11-15 07:47:34 -05:00
var loghandle = function ( event , delta ) {
2014-02-19 11:34:51 -05:00
var o = '' , id = event . currentTarget . id || event . currentTarget . nodeName ;
2013-02-22 09:47:31 -06:00
2013-11-15 07:47:34 -05:00
o = '#' + id + ':' ;
2013-02-22 09:47:31 -06:00
2013-11-15 07:47:34 -05:00
if ( delta > 0 )
2013-11-15 07:51:12 -05:00
o += ' up (' + delta + ')' ;
2013-11-15 07:47:34 -05:00
else if ( delta < 0 )
2013-11-15 07:51:12 -05:00
o += ' down (' + delta + ')' ;
2013-02-22 09:47:31 -06:00
2013-11-15 07:47:34 -05:00
if ( event . deltaY > 0 )
o += ' north (' + event . deltaY + ')' ;
else if ( event . deltaY < 0 )
o += ' south (' + event . deltaY + ')' ;
2013-02-22 09:47:31 -06:00
2013-11-15 07:47:34 -05:00
if ( event . deltaX > 0 )
o += ' east (' + event . deltaX + ')' ;
else if ( event . deltaX < 0 )
2013-11-15 09:26:04 -05:00
o += ' west (' + event . deltaX + ')' ;
2013-02-22 09:47:31 -06:00
2013-11-15 07:47:34 -05:00
o += ' deltaFactor (' + event . deltaFactor + ')' ;
log ( o );
};
2014-02-19 11:34:51 -05:00
$ ( document )
. mousewheel ( function ( event , delta ) {
loghandle ( event , delta );
});
2013-11-15 07:47:34 -05:00
$ ( '#test1' )
2013-11-18 18:04:13 +02:00
. mousewheel ( function ( event , delta ) {
2013-11-15 07:47:34 -05:00
loghandle ( event , delta );
2013-02-22 09:47:31 -06:00
log ( 'pageX: ' + event . pageX + ' pageY: ' + event . pageY );
});
$ ( '#test2' )
2013-11-18 18:04:13 +02:00
. mousewheel ( function ( event , delta ) {
2013-11-15 07:47:34 -05:00
loghandle ( event , delta );
2013-02-22 09:47:31 -06:00
return false ; // prevent default
});
$ ( '#test3' )
. hover ( function () { log ( '#test3: mouseover' ); }, function () { log ( '#test3: mouseout' ); })
2013-11-13 21:03:54 +02:00
. mousewheel ( function () {
2013-02-22 09:47:31 -06:00
log ( '#test3: I should not have been logged' );
})
. unmousewheel ();
2013-11-13 21:03:54 +02:00
var testRemoval = function () {
2013-02-22 09:47:31 -06:00
log ( '#test4: I should not have been logged' );
};
$ ( '#test4' )
2013-11-18 18:04:13 +02:00
. mousewheel ( function ( event , delta ) {
2013-11-15 07:47:34 -05:00
loghandle ( event , delta );
2013-02-22 09:47:31 -06:00
return false ;
})
. mousewheel ( testRemoval )
2013-11-18 18:04:13 +02:00
. mousewheel ( function ( event , delta ) {
2013-11-15 07:47:34 -05:00
loghandle ( event , delta );
2013-02-22 09:47:31 -06:00
return false ;
})
. unmousewheel ( testRemoval );
$ ( '#test5' )
2013-11-18 18:04:13 +02:00
. mousewheel ( function ( event , delta ) {
2013-11-15 07:47:34 -05:00
loghandle ( event , delta );
2013-02-22 09:47:31 -06:00
event . stopPropagation ();
event . preventDefault ();
});
$ ( '#test6' )
2013-11-18 18:04:13 +02:00
. mousewheel ( function ( event , delta ) {
2013-11-15 07:47:34 -05:00
loghandle ( event , delta );
2013-02-22 09:47:31 -06:00
event . stopPropagation ();
event . preventDefault ();
});
$ ( '#test7' )
2013-11-18 18:04:13 +02:00
. mousewheel ( function ( event , delta ) {
2013-11-15 07:47:34 -05:00
loghandle ( event , delta );
2013-02-22 09:47:31 -06:00
event . preventDefault ();
});
function log ( msg ) {
2013-11-13 21:03:54 +02:00
$ ( '#logger' ). append ( '<p>' + msg + '<\/p>' )[ 0 ]. scrollTop = 999999 ;
}
2013-02-22 09:47:31 -06:00
});
</ script >
2013-11-18 17:58:46 +02:00
< script src = "../jquery.mousewheel.js" ></ script >
2013-02-22 09:47:31 -06:00
</ head >
< body >
2013-10-18 10:57:40 -05:00
< h1 id = "banner" > jQuery mousewheel.js Test with jQuery < span id = "jqueryVersion" ></ span ></ h1 >
2013-02-22 09:47:31 -06:00
< h2 id = "userAgent" ></ h2 >
< ul >
2013-11-14 09:58:47 +02:00
< li >< strong > Test1</ strong > is just using the plain on < code > mousewheel()</ code > with a function passed in and does not prevent default. (Also logs the value of < code > pageX</ code > and < code > pageY</ code > event properties.)</ li >
2013-02-22 09:47:31 -06:00
< li >< strong > Test2</ strong > should prevent the default action.</ li >
2013-11-14 09:58:47 +02:00
< li >< strong > Test3</ strong > should only log a < code > mouseover</ code > and < code > mouseout</ code > event. Testing < code > unmousewheel()</ code > .</ li >
2013-02-22 09:47:31 -06:00
< li >< strong > Test4</ strong > has two handlers.</ li >
< li >< strong > Test5</ strong > is like Test2 but has children. The children should not scroll until mousing over them.</ li >
< li >< strong > Test6</ strong > is like Test5 but should not scroll children or parents.</ li >
< li >< strong > Test7</ strong > is like Test6 but has no children. It will propagate the event and scroll test 6 as well.</ li >
</ ul >
2013-10-18 10:58:20 -05:00
< div id = "stage" >
< div id = "test1" >< p > Test1</ p ></ div >
< div id = "test2" >< p > Test2</ p ></ div >
< div id = "test3" >< p > Test3</ p ></ div >
< div id = "test4" >< p > Test4</ p ></ div >
< div id = "test5" >
< p > Test5</ p >
< div id = "test6" >
< p > Test6</ p >
< div id = "test7" >< p > Test7</ p ></ div >
</ div >
2013-02-22 09:47:31 -06:00
</ div >
2013-10-18 10:58:20 -05:00
< div id = "logger" ></ div >
2013-02-22 09:47:31 -06:00
</ div >
< div id = "forceScroll" ></ div >
</ body >
2008-10-15 20:35:05 -05:00
</ html >
