Jquery Slide function -
i've been little confused how i'm supposed connect jquery page, , i'm still still relatively new learning javascript/jquery. when put script in head nothing happens when click on have set in file below. on jfiddle works fine.
i have portion of site want have mock iphone people visit page can click on it.
i used jfiddle found on stack overflow: how make div slide right left
there's link goes jqueryui , shows script slide effect there. supposed use in head?
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
this jfiddle tweaked i'm looking achieve: http://jsfiddle.net/tokyothekid/weujtht5/
here's current code in head:
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script> $( document ).click(function() { $('#iphone-button1').click(function(){ if ($('#iphone-panel2').is(':hidden')) { $('#iphone-panel2').show('slide',{direction:'right'},1000); } else { $('#iphone-panel2').hide('slide',{direction:'right'},1000); } }); </script>
here html:
<div id="iphone-panel1"> logo <a id="iphone-button1">start</a> </div> <div id="iphone-panel2">user area</div>
my css:
#iphone-panel1{ width:200px; height:200px; position:absolute; } { color: #000; cursor:pointer; display:block; } #iphone-panel2 { width: 200px; height: 200px; display: none; background: red; position:relative; }
appreciate help
Comments
Post a Comment