i wonder if can me. i'm making use of tutorial http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/ use scrolling method. reason can't see, doesn't work me.
my html file looks like:
<!doctype html> <html> <head> <title>coming - onesg buying club</title> <meta name="viewport" content="initial-scale=1.0; minimum-scale=1, maximum-scale=1"/> <!--css code links--> <link href='http://fonts.googleapis.com/css?family=open+sans+condensed:300,300italic,700' rel='stylesheet' type='text/css'/> <link rel = "stylesheet" type = "text/css" href = "css/styles.css"/> <!--js , jquery code links--> <script type="text/javascript" src = "js/jquery-1.10.2.js"></script> <script type ="text/javascript" src = "js/jquery/easing.min.js"></script> <script type="text/javascript" src = "js/scripts.js"></script> </head> <body> <div id = "wrapper"> <section id = "screen1"> <div class = "pagenum"> <p>1</p> </div> <h2>coming soon</h2> <div class = "vline"></div> <div class = "hline"></div> <div id = "next"> <a href = "#screen2"> <img id = "nextr" src = "img/texth.png"/> <img id = "arrowr" src = "img/arrowright.png"/> </a> </div> <img id = "socket" src = "img/electric.png"/> <div class = "vline2"></div> <div class = "hline2"></div> </section> <section id = "screen2"> <div id = "track"></div> <div id = "pagenum2"> <p>2</p> </div> <div id = "transbox"></div> <div id = "transbox2"></div> <h2>this website <span>placeholder something</span> amazing</h2> <aside> <img id = "router" src = "img/router.png"/> <div id ="next2"> <img id = "vnext" src = "img/textv.png"/> <img id = "varrow" src = "img/arrowdown.png"/> </div> </aside> <div id = "cable"></div> <div id = "cable2"></div> </section> <section id = "screen3"> <div id = "trackbar"></div> <div id = "pagenum3"> <p>3</p> </div> <div id = "transbox3"></div> <div id = "transbox4"></div> <div id = "cable3"></div> <div id = "cable4"></div> <div id = "cable5"></div> <p id = "moreinfo">more info?</p> <div id = "next3"> <img id = "arrow3" src = "img/arrowleft.png"/> <img id = "text3" src = "img/texth.png"/> </div> </section> <section id = "screen4"> <div id = "trackbar4"></div> <div id = "pagenum4"> <p>4</p> </div> <div id = "transbox5"></div> <div id = "cable6"></div> <div id = "cable7"></div> <aside> <img id = "me" src = "img/illustration.png"/> <img id = "arrowup" src = "img/arrowup.png"/> </aside> <p id = "contactus">contact us</p> </section> </div> </body> </html> and javascript looks like:
$(document).ready(function() { // call pagelayout function pagelayout(); $('#next').bind('click',function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollleft: $(anchor.attr('href')).offset().left }, 1500, 'easeinoutexpo'); event.preventdefault(); }); }); // set width , height of sections , place them function pagelayout() { // create variables store width , height of screen var screenwidth = $(window).width(); var screenheight = $(window).height(); var wrapperwidth = screenwidth * 2; var wrapperheight = screenheight * 2; // set each section screen width , height $("#wrapper").css({'height': wrapperheight + 'px', 'width': wrapperwidth + 'px'}); $("#screen1").css({'height': screenheight + 'px', 'width': screenwidth + 'px', 'left':'0', 'top':'0', 'position':'absolute'}); $("#screen2").css({'height': screenheight + 'px', 'width': screenwidth + 'px', 'left': screenwidth + 'px', 'top':'0', 'position':'absolute'}); $("#screen3").css({'height': screenheight + 'px', 'width': screenwidth + 'px', 'left': screenwidth + 'px', 'top': screenheight + 'px', 'position':'absolute'}); $("#screen4").css({'height': screenheight + 'px', 'width': screenwidth + 'px', 'left':'0', 'top': screenheight + 'px', 'position':'absolute'}); } does know why isn't working???
on line:
scrollleft: $(anchor.attr('href')).offset().left you mispelled variable $anchor. change to:
scrollleft: $($anchor.attr('href')).offset().left either way recommend learn how use dev-tools of browser , how use break points can check variable doesn't behave expect.
Comments
Post a Comment