jnf555 Posted February 7, 2013 Share Posted February 7, 2013 hi this jquery code should slide from one img to another, but it dont, any help i will be glad of <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jquery learning</title><style type="text/css">.slider{width:350px;height:250px;overflow:hidden;margin:30px auto;}.slider img{width:350px;height:250px;display:none;}</style><script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script><script type="text/javascript">function Slider(){$(".slider#1").show("fade",500);$(".slider#1").delay(5500).hide("slide",{direction:'left',500);var sc = $(".slider img").size();var count = 2;setinterval(function(){$(".slider#"+count).show("slide",{direction:'right'},500);$(".slider#"+count).delay(5500).hide("slide",{direction:'left'},500);if(count == sc){count = 1;}else{count = count + 1;}},6500);}</script> </head><body onload="slider();"><div class="slider"><img id="1" src="images/pic1.jpg" border="0" alt="pic1" /><img id="2" src="images/pic2.jpg" border="0" alt="pic1" /><img id="3" src="images/pic3.jpg" border="0" alt="pic1" /><img id="4" src="images/pic4.jpg" border="0" alt="pic1" /></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2013 Share Posted February 7, 2013 id reference should not start with number, try adding letter character before it. Link to comment Share on other sites More sharing options...
thescientist Posted February 7, 2013 Share Posted February 7, 2013 (edited) have you checked for errors in the console? have you done any sort of debugging to see how and what your code is executing? (Notice how we say this each time?) One thing i see that the console would show you is that in body onload you are calling slider, but your function is called Slider. case matters. Edited February 7, 2013 by thescientist Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2013 Share Posted February 7, 2013 you need a space between .slider#1 as in .slider #1, the first is unrecognisable, the second identifies with a space that #1 is a child of .slider. Link to comment Share on other sites More sharing options...
jnf555 Posted February 7, 2013 Author Share Posted February 7, 2013 thanks for replies, made some changes<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jquery learning</title><style type="text/css">.slider{width:350px;height:250px;overflow:hidden;margin:30px auto;}.slider img{width:350px;height:250px;display:none;}</style><script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script><script type="text/javascript">function gallery(){$(".slider #a1").show("fade",500);$(".slider #a1").delay(5500).hide("slide",{direction:'left',500);var sc = $(".slider img").size();var count = 2;setinterval(function(){$(".slider #"+count).show("slide",{direction:'right'},500);$(".slider #"+count).delay(5500).hide("slide",{direction:'left'},500);if(count == sc){count = 1;}else{count = count + 1;}},6500);}</script></head><body onload="gallery();"><div class="slider"><img id="a1" src="images/pic1.jpg" border="0" alt="pic1" /><img id="b2" src="images/pic2.jpg" border="0" alt="pic1" /><img id="c3" src="images/pic3.jpg" border="0" alt="pic1" /><img id="d4" src="images/pic4.jpg" border="0" alt="pic1" /></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2013 Share Posted February 7, 2013 (edited) Unless you produce code to increase alphabet character for each loop i suggest you keep it the same. <img id="a1" src="images/pic1.jpg" border="0" alt="pic1" /><img id="a2" src="images/pic2.jpg" border="0" alt="pic1" /><img id="a3" src="images/pic3.jpg" border="0" alt="pic1" /><img id="a4" src="images/pic4.jpg" border="0" alt="pic1" /> and below needs to reflect a reference to same char+num ref setinterval(function(){$(".slider #a"+count).show("slide",{direction:'right'},500);$(".slider #a"+count).delay(5500).hide("slide",{direction:'left'},500); plus you missed a curly closing bracket $(".slider#1").delay(5500).hide("slide",{direction:'left'},500); Edited February 7, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
thescientist Posted February 7, 2013 Share Posted February 7, 2013 fwiw, the OP has been told numerous times in the past about looking in the console as a debugging tool. I hope he/she realizes now how quickly they could have found a lot of these issues on their own. Link to comment Share on other sites More sharing options...
jnf555 Posted February 7, 2013 Author Share Posted February 7, 2013 i think there is proberbly a lot of learners that use this forum that have missed of brackets etc, if they got it right they wouldnt need to ask the experts.which i didnt think was a problem. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 7, 2013 Share Posted February 7, 2013 There certainly are a lot of people who use the forum who have common syntax errors. Most of them do not look for error messages on their own, they just post their code here. That does not teach them how to debug code, you need to know how to use the debugging tools that are available to you. For what it's worth, I read your initial post and chose not to respond because you didn't say anything about checking for error messages and there's really only so many times I want to go through that with people. We're here to help people learn how to program, not to act as syntax checkers. Link to comment Share on other sites More sharing options...
jnf555 Posted February 7, 2013 Author Share Posted February 7, 2013 ok thanks,i understand that. thanks for what help you have given me Link to comment Share on other sites More sharing options...
thescientist Posted February 7, 2013 Share Posted February 7, 2013 (edited) i think there is proberbly a lot of learners that use this forum that have missed of brackets etc, if they got it right they wouldnt need to ask the experts.which i didnt think was a problem.the problem is not asking. the problem is not learning from previous questions. like I have done in the past and pointed you to the console, it would be prudent to absorb that advice and consider the console the first place to look. nothing helps people solve their problems than by being able to find the are errors actually telling them what the problem is. in fact, the point you made about the brackets would have been in the console. A lot of the bugs found in this code would have shown up in the console. And that's the only point I was trying to make. Since it wasn't your first time being given this knowledge, I was trying to be more forward with reminding you. Edited February 7, 2013 by thescientist Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now