this question has answer here:
hello im new on jsfiddle. , somone me code in post , give me me: http://jsfiddle.net/cn8z6/1/
i tried make work in chrome dosen't work when press button... why?
my code:
<!doctype html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; text-align: center; } h1 { margin: 0; padding: 10px; font-family: helvetica, arial, sans-serif; font-size: 25px; } #menu { width: 100%; height: 20%; } #main-container { width: 100%; height: 80%; overflow: hidden; } #content-container { width: 300%; height: 100%; position: relative; top: 0; left: 0; font-size: 0px; transition: left 0.5s ease; -o-transition: left 0.5s ease; -ms-transition: left 0.5s ease; -moz-transition: left 0.5s ease; -webkit-transition: left 0.5s ease; } #content-container > div { width: 33.33%; height: 100%; display: inline-block; font-size: 15px; } #content1 { background: red; } #content2 { background: orange; } #content3 { background: green; } </style> <script type="text/javascript"> $("#right1, #left3").on("click", function() { // fires when 'right' pressed on content 1, // or 'left' pressed on content 3. in both cases // want move show content 2. $("#content-container").css({left: "-100%"}); }); $("#left2").on("click", function() { // fires when 'left' pressed on content 2. // want move show content 1. $("#content-container").css({left: "0%"}); }); $("#right2").on("click", function() { // fires when 'right' pressed on content 2. // want move show content 3. $("#content-container").css({left: "-200%"}); }); </script> </head> <body> <div id="menu"> <h1>this menu div</h1> </div> <div id="main-container"> <div id="content-container"> <div id="content1"> <h1>this content 1</h1> <a href="#" id="right1">right</a> </div> <div id="content2"> <h1>this content 2</h1> <a href="#" id="left2">left</a> <a href="#" id="right2">right</a> </div> <div id="content3"> <h1>this content 3</h1> <a href="#" id="left3">left</a> </div> </div> </div> </body> </html> hope can explain me why works on jsfiddle, , need run myself.
you're running script before dom loaded. either run script after, or put in $(document).ready().
<script type="text/javascript"> $(document).ready(function() { $("#right1, #left3").on("click", function() { // fires when 'right' pressed on content 1, // or 'left' pressed on content 3. in both cases // want move show content 2. $("#content-container").css({left: "-100%"}); }); $("#left2").on("click", function() { // fires when 'left' pressed on content 2. // want move show content 1. $("#content-container").css({left: "0%"}); }); $("#right2").on("click", function() { // fires when 'right' pressed on content 2. // want move show content 3. $("#content-container").css({left: "-200%"}); }); }); </script> 
Comments
Post a Comment