CODEWITHSUNDEEP
jqueryanimation
thom
thom

Reputation: 1306

jquery fadeIn/Out IE problem - frustrating

please please help me someone, i am losing my mind.

i have absolute/relative (tried both) positioned divs all with class of box. on click i want the divs to fade out then the correct one fade in. works fine in all browsers apart from IE 6 and 7 (sometimes 8). they fade out but nothing fades back in. looked all over the net for this type of problem but none help. Please please help.

this is the code

$("li#about").click(function(){
   $box.fadeOut(200);
   $("div#about").delay(800).fadeIn(800);
});

$("li#portfolio").click(function(){
    $box.fadeOut(200);
    $("div#portfolio").delay(800).fadeIn(800);
});

etc......

what am i missing? demo here - dead link!

Upvotes: 0

Views: 424

Answers (3)

Terminalpunk
Terminalpunk

Reputation: 125

I would def be adding achors to your main navigation so that they accessible via keyboard and when JavaScript is turned off. You can then make your script smaller too by doing the following :

<div id="nav">
<ul>
    <li><a href="#about">about</a></li>
    <li><a href="#portfolio">portfolio</a></li>
    <li><a href="#social">social</a></li>
    <li><a href="#contact">contact</a></li>
</ul>


$("#nav li a").click(function(){
    $box.fadeOut(200);
    $($(this).attr('href')).delay(800).fadeIn(800);
});

Upvotes: 1

user571545
user571545

Reputation:

If I'm reading this correctly, do you have multiple HTML tags with the same ID, even though they're different types of tags? For example, li#about and div#about. Maybe Internet Explorer would prefer if they had unique IDs?

Upvotes: 1

Yoram de Langen
Yoram de Langen

Reputation: 5499

you dont define $box. in IE you need to define it so :

var $box = .........

you need to do this also with $nav

EDIT The elements in your script that arent working are the once you did not define

Upvotes: 0

Related Questions