Badly Needed help on this one..
here is my code for my sliding divs. This code works perfectly in Chrome and Safari but having problems in FF 3 and IE7. On the initial load on ff3 and ie7, when you click the link the first time it will work and the rest is history.
Please help on how to resolve this one.
Thanks in advance.
--------------------------javascript code ----------------------------------
<script type="text/javascript">
$(document).ready(function(){
$('#slide1').animate({ left: 0 });
$('#slide2').animate({ left: 900 });
$('#slide3').animate({ left: 1800 });
$('a#s1').click(function(){
$('#slide1').animate({ left: 0 });
$('#slide2').animate({ left: 900 });
$('#slide3').animate({ left: 1800 });
});
$('a#s2').click(function(){
$('#slide1').animate({ left: -900 });
$('#slide2').animate({ left: 0 });
$('#slide3').animate({ left: 900 });
});
$('a#s3').click(function(){
$('#slide1').animate({ left: -1800 });
$('#slide2').animate({ left: -900 });
$('#slide3').animate({ left: 0 });
});
});
</script>
------------------------ css code ------------------------
#slideshow {
width:900px;
height:300px;
border:#999 solid medium;
overflow:hidden;
clear:both;
position:relative;
}
#slide1{
width:900px;
height:300px;
background:url(../images/slider_images/psp5.jpg);
position:absolute;
z-index:101;
}
#slide2{
width:900px;
height:300px;
background:url(../images/slider_images/psp4.jpg);
position:absolute;
z-index:100;
}
#slide3{
width:900px;
height:300px;
background:url(../images/slider_images/psp3.jpg);
position:absolute;
z-index:99;
}
-------------------html code -------------------------------------
<div id="slideshow">
<div id="slide1"><a href="#" id="s1"> Slide 1</a> <br /> <a href="#" id="s2"> Slide 2</a> <br /> <a href="#" id="s3"> Slide 3</a></div>
<div id="slide2"><a href="#" id="s1"> Slide 1</a> <br /> <a href="#" id="s2"> Slide 2</a> <br /> <a href="#" id="s3"> Slide 3</a></div>
<div id="slide3"><a href="#" id="s1"> Slide 1</a> <br /> <a href="#" id="s2"> Slide 2</a> <br /> <a href="#" id="s3"> Slide 3</a></div>
</div>