Javascript left - right toggle
Hey guys, dont suppose any of you kind folks could help me out with a bit of code could you please?
Heres the code -
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var s = $('#slide'), w = $(s.find('span')[0]).width();
s.css({width: 0, overflow: 'hidden', whiteSpace: 'nowrap'});
$('#clicky').toggle(function(){
s.stop(true).animate({width: 0}, {duration: 'slow', queue: false, complete: function(){s.hide();}});
}, function(){
s.stop().animate({width: w}, {duration: 'slow', queue: false});
});
});
</script>
<style>
#slide{
float:left;
width:200px;
height:100px;
background:yellow;
margin-left:20px;
}
#next{
float:left;
width:200px;
height:100px;
background:red;
margin-left:20px;
}
</style>
</head>
<body>
<input name="" type="button" value="Navigation" id="clicky"><br> <br>
<div id="slide">
<h1><span>Hello World!</span></h1>
</div> <div id="next"></div>
</body>
</html>
Now my problem, when you first load the page and click the navigation button it dosent behave as it should. If you press the button a second time it behaves perfect and then for each button click it works as it should, its just the very first button click, it dosent seem to scroll across.
Any ideas what i have done wrong in my code?
Thanks
CSS Codes
Reply With Quote
Bookmarks