Mouse Wheel testing

by dceast

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id="wheel-panel">
    <div id="example" class="box">
        <h3>Use your mouse wheel inside of this box</h3>
        
        <label> 
            delta: 
            <span id="delta"></span> <strong>&larr; Which way are we going?</strong>
        </label>      
        
        <label>
            event.originalEvent.wheelDelta: 
            <span id="wheelDelta"> </span> <strong>&larr; This is doesn't work in FireFox</strong>
        </label>
        
        <label>
            margin-left: 
            <span id="margin-left"> </span> <strong>&larr; To the left, to the left</strong>
        </label>        
        
    </div>
    <!-- /#example.box -->

    <div id="motion" class="box">
    
        <div>&larr;</div>
    
    </div>
    <!-- /#motion.box -->
    
</div>
<!-- /#wheel-panel -->

<div id="rotate" class="box">

</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body 
{
    font-family: 'Open Sans Condensed', Arial, Sans-Serif;
}

#scroll-panel {
    background: #fefefe;
    width: 100%;  
    height: 100%;    
}

div.box {
    border: 1px solid #BBB;
    height: 175px;
    width: 600px;
    margin: 10px;
    padding: 10px;
    
    background-color: #f1f1f1;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#efefef));/*Saf4+,Chrome */
    background-image: -webkit-linear-gradient(top, #f5f5f5, #efefef); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #f5f5f5, #efefef); /* FF3.6 */
    background-image: -ms-linear-gradient(top, #f5f5f5, #efefef); /* IE10 */
    background-image: -o-linear-gradient(top, #f5f5f5, #efefef); /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #f5f5f5, #efefef); /* CSS3 */
}

    div.box > h3 {
        border-bottom: 1px solid #777;
        font-size: 23px;
        margin-bottom: 20px;
    }

    div.box > label {
        color: #222;
        display: block;
        font-size: 20px;
        margin-bottom: 10px;
    }
 
    div.box > label > span {
        color: #FF2400;
    }

    div.box label:nth-child(0) > span {
        color: #FF2400;
    }

    div.box label > span + strong {
        background: #777;
        color: #FCD116;
        padding: 3px;
    }

#motion {
   width: 50px;
   height: 50px;    
}

    #motion div{
       font-size: 20px;
       text-align: center;
       position: relative;
       top: 10px;    
    }

.rotate {

/* Safari */
-webkit-transform: rotate(-180deg);

/* Firefox */
-moz-transform: rotate(-180deg);

/* IE */
-ms-transform: rotate(-180deg);

/* Opera */
-o-transform: rotate(-180deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=6);

}

JavaScript

$(function($) {
    
    (function() {
        
        var $body = $('body');
        $body.on('mousewheel', 'div.box', function (event, delta) {
            var inc = (delta * 100),
                $motion = $('#motion'),
                $div = $('#motion div'),
                marge = parseInt($motion.css("margin-left").replace("px", ""), 10),
                initialMarge = 10,
                flow = (-inc) + marge,
                max = $('#example').width(),
                min = 0;
    
            if((flow) > max) {
              flow = max - ($motion.width() - initialMarge );          
            }
            else if ((-flow) > min) {
              flow = min + 10;    
            }
            
            if(delta > 0) {
               $div.html('&larr;');
            }
            else {
               $div.html('&rarr;');
            }
         
            
            $motion.stop().animate({
                "margin-left": flow + 'px'
            }, 800, 'easeOutExpo');    
        
            // this is always zero
            $("#delta").text(delta);
            
            // the originalEvent object is not available in FF
            $("#wheelDelta").text(event.originalEvent.wheelDelta);
        
            $("#margin-left").text(marge);
            
            event.stopPropagation();
        });          
        
    })();
    
});