jQuery.slideDown() issues in IE: quick fixes
Posted by Fred Wu
A simple Google search suggests that people are having problems with jQuery.slideDown() on Internet Explorer.
I’ve come across two issues on Internet Explorer 7 while developing a website containing some slideDown() effects, and found some quick fixes for them. :)
Issue 1: slideDown() does not actually slide, the target HTML element appears the same way as show().
After messing around with the JavaScript and HTML, I’ve finally nailed down the issue. It occurs when there are absolutely positioned elements in the target HTML.
Typically when we have absolutely positioned elements, we would want to have a relatively positioned wrapper element to control the position of the elements on the page. It makes perfect sense to simply trigger the slideDown() effect on the wrapper.
The HTML schema would look something like this:
Wrapper A (the element that contains Wrapper B, it makes an AJAX call to retrieve Wrapper B)
…. Wrapper B (the relatively positioned target element that is assigned to the slideDown() event)
…. …. Element C (absolutely positioned)
Both Firefox and Safari don’t have any problems with that, but Internet Explorer does. On IE 7 (I haven’t tested IE 6), the targeted HTML (Wrapper B) will simply appear without the sliding effect, resulting the same effect as calling show().
The fix is simple, make the parent element (Wrapper A) relatively positioned too.
Issue 2: slideDown() animates, then the element vanishes immediately afterwards.
The problematic JavaScript looks something like this:
var data = 'Some HTML retrieved from an AJAX call.';
$("div#wrapper_b").hide().html(data).slideDown();
The fix is quick and simple:
var data = 'Some HTML retrieved from an AJAX call.';
$("div#wrapper_b").hide().html(data).slideDown().show(function(){
$(this).html(data).show();
});
Of course, depending on the HTML markup, your mileage may vary.
Hi, I’ve been going around in circles trying to make slideDown() work in IE and you seem to have the only diagnosis on the web specific to this problem.
Im relatively new to javascript and would really appreciate some help with my code.
$(‘#projectLoaded’).hide();
$(‘.projectThumbs a’).click(function() {
$(‘#projectLoaded’).slideDown(2000);
return false;
});
$(‘#closeProject a’).click(function() {
$(‘#projectLoaded’).slideUp(2000);
return false;
});
Thanking you.
You should do what is written in the article. As follows, your code should look this way:
$(’.projectThumbs a’).click(function() {
$(’#projectLoaded’).slideDown(2000).show(function(){
$(this).show();
});
return false;
});
Or..
You can set a css property on the div in question
zoom: 1
to give it the coveted hasLayout
zoom:1 also worked for me quite nicely! Thanks for the post.
Hey there!
I’m using something similar on my page, when you click the about-link in the menu, the info about me slides down, pushing the content below down. Well, in FF and Safari it does.
My problem is that in IE7, which is the only browser where it won’t work, I can’t make the appearing box push the rest of the content on the page down, instead it lays on top of everything and looks really bad.
Do you know what might be the problem for this, I suspect this too is a matter of css tweaking..
Thanks!
// Jens.
Hello again!
Just wanted to let you know that I got everything to work, after testing every trick in the book, by giving the container a min-height value instead of a plain height value.
Take care!
Thanks a bunch :-D
Hi, Thanks for this nice tips. Very helpful…
Very nice and useful tutorials for web designers,
Thanks for posting.
and do not forget to define the width of the slideable content in IE(7)! the content will not appear correctly otherwise. (for me it was also a bug)
*note my case was a two column layout… so the width is essential for counting the proper width in IE.
In my case I put the Div to be slided inside li element.
No problem while sliding down but the problem is:
It takes some time before it starts sliding in IE.Please any suggestion will be helpfull.
Hey all,
had this issue in IE6 and 7 – fixed it by setting a width on the element being slided.
Thank you very much. You saved my life!!!!
“zoom: 1;” works for me, simple and elegant. Thanks a lot guys!
Sorry guys, I’ve have tried every suggestion here and nothing is working for me.
jQuery doesn’t even seem to load at all – only in IE7. (validated code)
I’m utterly stuck.
Any other words of wisdom?
The start of my js is:
jQuery(document).ready(function($) {
$(‘#accordion dd’).hide();
It’s not even getting that far.
Thanks guys, after reading your article I played around with positioning the element that was being slided. position:relative fixed the display problem in IE6 and IE9 compatibility mode.
Cheers
zoom:1; solved it… Thanks!