CODEWITHSUNDEEP
javascriptjqueryinternet-explorer-7cssslideup
Brian
Brian

Reputation: 3958

jQuery slideDown / slideUp not working in IE7

So I'm using a very basic jQuery .slideDown which is working great in FF, Safari, and Chrome. Won't work at all in IE7. here is the script:

//Top Mailing List Drop down animation
$(document).ready(function() {
$('div#top_mailing_hidden').hide();

// Expand Panel
$("input#top_mailing").focus(function(){
$("div#top_mailing_hidden").slideDown("slow");
});

// Collapse Panel
$("input#top_mailing").blur(function(){
$("div#top_mailing_hidden").slideUp("slow");
});
});

I've been researching for hours and found something about a bug relating to slideup/down that causes it to fail in IE7 when being used on descendants of postion:fixed elements. This animation is happening within a position:fixed navbar, however, I've tried wrapping the inner elements with position:relative but to no avail, I still get nothing in IE. Also, notice that the nav element is being hidden with jQuery, that function is working even in IE7, however, the slideup/down are not.

Here is the related CSS:

/* --------------Top Dropdown Mailing List------------------- */

#top_nav div#top_mailing{
    float: right;
    width: 351px;
    padding: 0 10px 10px 5px;
    background: url(images/top_mailing_bg.png) bottom center no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    text-shadow:0 -1px 0px #222;
}
#top_mailing #top_mailing_hidden{
    font-size: .7em;
    text-align: center;
    position: relative;
    height: 30px;
    zoom: 1;
}
#top_mailing #top_mailing_hidden div{
}
#top_mailing #top_mailing_hidden a{
    color: #acffc0;
    font-weight: bold;
}
#top_mailing #top_mailing_visible{
    height: 30px;
    font-weight: bold;
    font-size: .9em;
    padding-top: 5px;
}

Upvotes: 5

Views: 12351

Answers (2)

Bob Fanger
Bob Fanger

Reputation: 29897

jQuery's slideUp(), slideDown() and slideToggle() don't work with position:relative elements in IE7. Some slide issues can be resolved by adding

zoom: 1;

To the sliding container and/or elements.

We had to revert to use <table> for layout to solve some of the sliding issues.

Upvotes: 23

Brian
Brian

Reputation: 3958

The reason for this behavior in my example is that IE doesn't recognize .focus which I was using to trigger the .slideUp/Down. I've found a good answer explaining the problem here, however this allows you to add a CSS class on focus, but I need to animate a separate element with slideUp/Down on .focus so the CSS class doesn't help my situation, anyone have ideas?

Got it! I had to use mouseenter rather than focus, but here is the completed script with a conditional mouseenter event for the devil, a.k.a. IE:

//Top Mailing List Drop down animation
$(document).ready(function() {

    if (jQuery.browser.msie === true) {
        jQuery('#top_mailing')
                .bind("mouseenter",function(){
                    $("#top_mailing_hidden").slideDown('slow');
                }).bind("mouseleave",function(){
                    $("#top_mailing_hidden").slideUp('slow');
                });
    }

$('#top_mailing_hidden').hide();

// Expand Panel
$("input#top_mailing").focus(function(){
$("#top_mailing_hidden").slideDown("slow");
});

// Collapse Panel
$("input#top_mailing").blur(function(){
$("#top_mailing_hidden").slideUp("slow");
});

});

Upvotes: 1

Related Questions