PDA

View Full Version : Javascript left - right toggle



davidhopkins
03-16-2010, 01:49 PM
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:confused::confused:

davidhopkins
03-18-2010, 10:46 AM
Nody has any ideas ?:confused: