html - What's wrong with my javascript mousewheel animation code? -
i tried make website this: http://www.nominet.uk/
i found code in jsfiddle seems perfect me: http://jsfiddle.net/mark_s/6ssra/1/
but if make code own , create html file this:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {margin:0; padding:0;} body { overflow:hidden;} </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> var winh = $(window).height(), $root = $('body, html'); $('#slider > div').height(winh) $(document).ready(function(){ $(window).on('mousewheel dommousescroll', function(e){ e.preventdefault(); var delta = e.originalevent.detail < 0 || e.originalevent.wheeldelta > 0 ? 1 : -1; //get current active slide var $active = $('#slider > .active'); if(delta < 0) { //mousewheel down var $next = $active.next(); //check if there's next slide available if($next.length){ //animate scrolling next slide offset top $root.stop(true).animate({scrolltop:$next.offset().top},'slow'); //move indicator class 'active' $next.addclass('active').siblings().removeclass('active'); } }else{ //mousewheel var $prev = $active.prev(); if($prev.length){ //animate scrolling previous slide offset top $root.stop(true).animate({scrolltop:$prev.offset().top},'slow'); $prev.addclass('active').siblings().removeclass('active'); } } }); }); </script> </head> <body> <div id="slider"> <div id="slide1" class="active">slide 1</div> <div id="slide2">slide 2</div> <div id="slide3">slide 3</div> </div> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> </body> </html> the code doesn't work. think .js including wrong. think?
var winh = $(window).height(), $root = $('body, html'); // vvvv use selector find #slider, should ensure slider accessible. $('#slider > div').height(winh) these part should put domready, #slider not render before <head>, need access when it's ready in page. in linked jsfiddle, writer change load settings ondomready, lines in fact wrapped in domready callback.
also, don't need include jquery twice, can remove 1 @ end of body.
* {margin:0; padding:0;} body { overflow:hidden;}<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {margin:0; padding:0;} body { overflow:hidden;} </style> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var winh = $(window).height(), $root = $('body, html'); // put scripts in head. slider in body not render @ time, // need put domready's callback. $('#slider > div').height(winh) $(window).on('mousewheel dommousescroll', function(e){ e.preventdefault(); var delta = e.originalevent.detail < 0 || e.originalevent.wheeldelta > 0 ? 1 : -1; //get current active slide var $active = $('#slider > .active'); if(delta < 0) { //mousewheel down var $next = $active.next(); //check if there's next slide available if($next.length){ //animate scrolling next slide offset top $root.stop(true).animate({scrolltop:$next.offset().top},'slow'); //move indicator class 'active' $next.addclass('active').siblings().removeclass('active'); } }else{ //mousewheel var $prev = $active.prev(); if($prev.length){ //animate scrolling previous slide offset top $root.stop(true).animate({scrolltop:$prev.offset().top},'slow'); $prev.addclass('active').siblings().removeclass('active'); } } }); }); </script> </head> <body> <div id="slider"> <div id="slide1" class="active">slide 1</div> <div id="slide2">slide 2</div> <div id="slide3">slide 3</div> </div> </body> </html>
Comments
Post a Comment