JQuery in IE

[buckycat7]

I took the code from the MenuFader tutorial and changed a few things about so it would work in the way I needed it to. It now works great in any browser other then IE but doesn’t work at all in IE.

Here is the Code I’m using:

CSS:

Code:

.menu{list-style: none;}
.menu li{float: left; padding-right: 2px;}
.menu li a{display:block; width: 120px; text-indent:-9999px;}
.menu li a.overview{background: url(images/overviewf.jpg) bottom center no-repeat; height:30px; }
.menu li a.details{background: url(images/details.jpg) bottom center no-repeat; height:30px; }

#content{width: 620px; height: 500px; border-top: 1px solid #666; padding: 1px;}

.buttonf {float: left; margin: 0; cursor: pointer; }

#one {display: block; opacity: 1}
#one-button {opacity: 1.0;}

#two {display: none; opacity: 1}
#two-button {opacity: 0.5;}

JQuery:

Code:

jQuery(document).ready(function($){

$(“#page-wrap .buttonf”).click(function(){

$clicked = $(this);

if($clicked.css(“opacity”) != “1” && $clicked.is(“:not(animated)”))
{
$clicked.animate({
opacity: 1,
borderWidth: 4
}, 600 );

var idToLoad = $clicked.attr(“id”).split(‘-‘);
$(“#content”).find(“div:visible”).fadeOut(“fast”, function(){
$(this).parent().find(“#”+idToLoad[0]).fadeIn();
})
}

$clicked.siblings().animate({
opacity: 0.5,
borderWidth: 1,

}, 600 );

});
});

Note: I’m using the jQuery(document) so that it will work in wordpress.

HTML:

Code:

• Text
• Text

This content is for one.

This content is for two.

Any ideas why this won’t work in IE?

[buckycat7]

Thanks?

[blackbookdesign]

I got the same problem for IE with wordpress
see related post if any ideas can come up: http://www.css-tricks.com/forums/viewtopic.php?f=5&t=1521
cheers.

[Author]

Posts