February 26th, 2009
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. :)
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!