Jump to content
Killersites Community
ll87

IE7 jQuery problem

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);
});
});

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×