Jump to content

IE7 jQuery problem


ll87

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.

Link to comment
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

Link to comment
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);
});
});

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...