CODEWITHSUNDEEP
javascriptjqueryhtml
Jooxa
Jooxa

Reputation: 637

Bind mousewheel with jquery 1.8+

I'm using Jquery 1.8.3 on my site.

I can't bind mousewheel with this jquery version , but 1.4.2 version is bind mousewheel successfully.

Please give me a solution to solve this problem ?

Note : I need to bind mousewheel with only 1.8+ version. Because other plugins are depends on Jquery 1.8+

My example code is :

<!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<style type='text/css'>
body { text-align: center; }
#res
{
    margin-top: 200px;
    font-size: 128px;
    font-weight: bold;
}
</style>
<script type='text/javascript'>
$(document).ready(function(){
    var num = 0;
    $(document).bind('mousewheel',function(e){
        if (e.wheelDelta > 0)
        {
            $("#res").text(++num);
        }
        else
        {
            $("#res").text(--num);
        }
    });
});
</script>
</head>
<body>
<div id="res">0</div>
</body>
</html>

Upvotes: 2

Views: 4399

Answers (1)

Gilles Hemmerl&#233;
Gilles Hemmerl&#233;

Reputation: 537

Here is a working example with your code, just add the mousewheel javascript plugin : http://brandonaaron.net/code/mousewheel/demos

<!DOCTYPE html>
<html>
<head>
<title>Mouse Wheel</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='http://flexicontent.googlecode.com/svn-history/r1517/trunk/com_flexicontent_v2.x/site/librairies/fancybox/lib/jquery.mousewheel-3.0.6.pack.js'></script>
<style type='text/css'>
body { text-align: center; }
#res
{
    margin-top: 200px;
    font-size: 128px;
    font-weight: bold;
}
</style>
<script type='text/javascript'>

jQuery(document).ready(function($){
    var num = 0;
    $(document).bind('mousewheel',function(e, delta){
        if (delta > 0)
        {
            $("#res").text(++num);
        }
        else
        {
            $("#res").text(--num);
        }
    });
});
</script>
</head>
<body>
<div id="res">0</div>
</body>
</html>

Upvotes: 4

Related Questions