CyberShot Posted December 3, 2009 Share Posted December 3, 2009 i need help with my code. I made a very very simple slider that does work. Here is the code $("#headerBottom p").hide(); $("#logo").hide(); $("#headerBottom p:eq(4)").show(); $("#content span").hide(); $("#content span:eq(0)").show(); $("#topLogo").click(function(){ $("#content span").hide(); $("#headerBottom p").hide(); $("#content span:eq(0)").show(); $("#headerBottom p:eq(4)").show(); }); $("#aboutPage").click(function(){ if($("#content span:eq(1)").is(':visible')) { $("#aboutPage").show(); } else { $("#headerBottom p:eq(4)").hide(); $("#content span").slideUp(); $("#content span:eq(1)").slideDown(); $("#headerBottom p").hide(); $("#headerBottom p:eq(0)").show(); } }); $("#workPage").click(function(){ if($("#content span:eq(2)").is(':visible')) { $("#workPage").show(); } else { $("#content span").slideUp(); $("#content span:eq(2)").slideDown(); $("#headerBottom p").hide(); $("#headerBottom p:eq(1)").show(); } }); $("#socialPage").click(function(){ if($("#content span:eq(3)").is(':visible')) { $("#aboutPage").show(); } else { $("#content span").slideUp(); $("#content span:eq(3)").slideDown(); $("#headerBottom p").hide(); $("#headerBottom p:eq(2)").show(); } }); $("#contactPage").click(function(){ if($("#content span:eq(4)").is(':visible')) { $("#contactPage").show(); } else { $("#content span").slideUp(); $("#content span:eq(4)").slideDown(); $("#headerBottom p").hide(); $("#headerBottom p:eq(3)").show(); } }); }); my issue is that I am using the span tag as a hook. To say in the code...Find all span tags and hide their content. But the problem is that the span tag is an inline element and I am running into validation problems using a block element inside an inline element. So I need to re work this code. I thought instead. Maybe I could put my 4 divs into an array and call them that way or seperately. something like var contentDiv = array [#about, #work, #social, #contact]; so then in my jquery above, instead of saying ("#content span").slideUp(); I could do ("contentDiv").slideUp(); ("contentDiv:eq(1)").slideDown(); but not sure how to make the array. can you help Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/ Share on other sites More sharing options...
JustLikeIcarus Posted December 3, 2009 Share Posted December 3, 2009 Is this what you meant regarding using an array? var contentDiv = array ['about', 'work', 'social', 'contact']; $.each(contentDiv. function(){ $('#'+this).slideUp(); $('#'+this+':eq(1)).slideDown(); }); Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970678 Share on other sites More sharing options...
CyberShot Posted December 3, 2009 Author Share Posted December 3, 2009 what about the if statement in the code? would it be if('#'+this+':eq(1)){ $(this).slidedown } else { rest of code here } Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970680 Share on other sites More sharing options...
JustLikeIcarus Posted December 3, 2009 Share Posted December 3, 2009 Well looking at your original code it would be if($('#'+this+':eq(1)').is(':visable')){ Right? Actually why is the if needed, and not just do $('#'+this+':eq(1):visible').slideDown(); Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970683 Share on other sites More sharing options...
CyberShot Posted December 3, 2009 Author Share Posted December 3, 2009 i didn't know you could do that. it does the same thing as the iff? I have been looking through the jquery, but sometimes the code examples they give are to confusing. so I tend to do things the long way around. I don't know javacript, learning it as I go along Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970684 Share on other sites More sharing options...
JustLikeIcarus Posted December 3, 2009 Share Posted December 3, 2009 Yeah im thinking that should do the same thing. jQuery is made of magicks haha. Its able to do a lot of neat things. Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970689 Share on other sites More sharing options...
JustLikeIcarus Posted December 3, 2009 Share Posted December 3, 2009 Is this the end result you are wanting? http://jqueryfordesigners.com/coda-slider-effect/ Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970690 Share on other sites More sharing options...
CyberShot Posted December 3, 2009 Author Share Posted December 3, 2009 i know of that slider, I have even used it. I was wanting to make my own to learn. I am going to try out your code right now and see if I can get it working on a test Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970692 Share on other sites More sharing options...
CyberShot Posted December 3, 2009 Author Share Posted December 3, 2009 I am getting a syntax error, this is my test code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(docuemtn).ready(function(){ var contentDiv = array ['about', 'work', 'social', 'contact']; $.each(contentDiv. function(){ $('#'+this+':eq(0)).hide(); $('#'+this+':eq(1)).slideDown(); }); </script> <style type="text/css"> #about { width: 100px; height: 100px; } #work { width: 100px; height: 100px; } #social { width: 100px; height: 100px; } #contact { width: 100px; height: 100px; } </style> </head> <body> <div id="about"> about </div> <div id="work"> work </div> <div id="social"> social </div> <div id="contact"> contact </div> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970697 Share on other sites More sharing options...
JustLikeIcarus Posted December 3, 2009 Share Posted December 3, 2009 Your missing some single quotes after the eq()'s Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970698 Share on other sites More sharing options...
CyberShot Posted December 3, 2009 Author Share Posted December 3, 2009 ok, fixed that and also noticed that the funciton wasn't closed with the }); but still something is wrong $(docuemtn).ready(function(){ var contentDiv = array ['about', 'work', 'social', 'contact']; $.each(contentDiv .function(){ $('#'+this+':eq(0)').hide(); $('#'+this+':eq(1)').slideDown(); }); }); Quote Link to comment https://forums.phpfreaks.com/topic/183877-help-with-slider/#findComment-970700 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.