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: 13px 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: 120px;
height: 100px;
}
#test2 {
background-color: #333;
width: 120px;
height: 100px;
}
#test3 {
background-color: #666;
width: 120px;
height: 100px;
}
#test4 {
background-color: #000;
width: 120px;
height: 100px;
}
#test5 {
background-color: #333;
padding: 5px;
width: 400px;
height: 400px;
}
#test6 {
background-color: #666;
padding: 5px;
width: 250px;
height: 250px;
}
#test7 {
background-color: #000;
padding: 5px;
width: 100px;
height: 100px;
}
#forceScroll {
clear: both;
height: 1000px;
}
#logger {
position: absolute;
2013-10-18 10:58:20 -05:00
top: 100px;
2013-11-14 12:50:28 -05:00
left: 0;
2013-10-18 10:58:20 -05:00
width: 480px;
height: 310px;
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: 2px;
border-bottom: 1px 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" > < \ / s c r i p t > ' ) ;
})();
< / 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 >
