ll87 Posted November 4, 2010 Report Share Posted November 4, 2010 (edited) It's working in Chrome, Firefox, and Safari and IE8. http://mymediaventure.com/pricing.php clicking the options on the left fades out the content but the next div does not fade in. Can anyone help? Alex Edited November 6, 2010 by ll87 Quote Link to comment Share on other sites More sharing options...
ll87 Posted November 6, 2010 Author Report Share Posted November 6, 2010 bump Quote Link to comment Share on other sites More sharing options...
virtual Posted November 6, 2010 Report Share Posted November 6, 2010 Your link is broken Quote Link to comment Share on other sites More sharing options...
ll87 Posted November 6, 2010 Author Report Share Posted November 6, 2010 sorry, there was a full stop after the url Quote Link to comment Share on other sites More sharing options...
BeeDev Posted November 8, 2010 Report Share Posted November 8, 2010 Good idea is to always run the pages through the W3C markup validator first: http://validator.w3.org/ Basicly what your problem is: You have a Syntax error in your HTML. You CANNOT have 2 items with same ID. Your left side link container <li> have id "birthdays", but also the <div> that's supposed to fadeIn also has an id that says "birthdays". As far as IE7 is concerned, item with ID "birthday" is already shown so therefore it's not doing anything. More modern browsers like IE8, FF 3.6 etc are, I guess you could say, "idiot-proof", so even if you forget to close a tag, or put items with 2 same id's, they still work. Easiest solution is to take the ID's out from <li> tags, and put them in the "href" attribute of the <a> tags inside the <li>'s. So the link to fadeIn the "birthdays" <div> will say: <a href="#birthdays">Birthdays</a> So you can just take the "href" attribute when you're fading in: jQuery(function($){ $("a").click(function(){ $($(this).attr("href")).fadeIn(); }); }); Voila! Hope this helps. Quote Link to comment Share on other sites More sharing options...
ll87 Posted November 11, 2010 Author Report Share Posted November 11, 2010 duhhhh. thanks very much, got it sorted now. but in the interests of clean code, i just added "_cont" to end of the id of the main content divs. can i ask about your solution? the $(this).attr('href') would return '#' right now yes? so are u saying it should give the href the value of the div we want to fade in. that way im only using the ID on the div and not on the navigation? thanks again Quote Link to comment Share on other sites More sharing options...
BeeDev Posted November 12, 2010 Report Share Posted November 12, 2010 Yeah, basically you don't need ID's on the <li> or the <a> inside them. May be a good idea to put a same "class" on the <a> so you can exclusively select those anchors. There's lots of ways to approach this though, there's no single correct way. Say you give those <a>'s a class="trigger". <ul> <li><a href="#birthday" class="trigger">Birthdays</a></li> ..... ..... </ul> <div id="div_container"> <div id="birthday"> ..... </div> <div id="...."> ..... </div> ..... </div> jQuery(function($){ var $trigs = $("a.trigger"); var $cont = $("#div_container"); var $all = $("div", $cont); // Selects all descendant <div> of $cont $trigs.click(function(e){ // Cancel default link action so the // browser won't jump to top e.preventDefault(); // Get the ID of the target div which is // in the "href" attribute of the clicked anchor var $target = $(this).attr("href"); // fadeOut all the divs first $all.fadeOut(250); // fadeIn the target $( $target ).fadeIn(250); }); }); Quote Link to comment 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.
Note: Your post will require moderator approval before it will be visible.