Grow your CSS skills. Land your dream job.

JQuery in IE

  • # November 12, 2008 at 4:08 pm

    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:

    This content is for one.

    This content is for two.

    Any ideas why this won’t work in IE?

    # November 13, 2008 at 12:06 pm

    Thanks?

    # January 22, 2009 at 2:07 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".