jQuery slideToggle and Internet Explorer
Just noticed something quirky today regarding jQuery’s slideToggle effect in Internet Explorer versions 6 and 7. (I’m guessing the use of jQuery’s slideDown and slideUp will give you the same problem.) I’ve been creating some nice sliding div effects these past couple of weeks in work and wondering why the slide animation in IE6+ was so jagged and clunky, while Firefox and Safari rendered it perfectly. Through the process of elimination and some hair loss, I figured it out.
The fix:
Be sure that whatever it is you’re sliding (usually a div) doesn’t have any associated CSS attribute position declared. It doesn’t matter if it’s position: relative or position: absolute, or if this styling is applied to the sliding element or to a child of the sliding element; just rip it out of there.
Do that and your slideToggle should look all smooth in every browser.
September 26th, 2007 at 5:12 pm
seems to be one of the golden rules of JQuery…. if something isnt behaving as it should, strip off the position attributes around it and build it back up again correctly. I spent 2 hours the other day trying to pick something apart and it turned out that it was because i had assigned position relative to it…. painful!
September 26th, 2007 at 5:33 pm
Floats are my new best friend. I don’t find it as quick and easy to position stuff with floats, but it seems like the best way to avoid the cross-browser issues. Damn you, IE!
September 26th, 2007 at 5:50 pm
I find safari worse than IE these days…. I’d love to smack it!
September 27th, 2007 at 9:52 am
Safari is a beautiful and unique snowflake.
September 27th, 2007 at 8:19 pm
Damn right Jason, it melts next to Firefox.
October 9th, 2007 at 1:54 am
[…] Niall Doherty » Blog » Blog Archive » jQuery slideToggle and Internet Explorer need to try this, I’m tired of my elements jumping around like Tom Cruise (tags: javascript webdev jquery) […]
January 23rd, 2008 at 3:07 pm
One thing that also might help: give a height of 101% in CSS to all block-level-elements involved!
This solved my problems with jquery-slideUp/slideDown and IE.
May 20th, 2008 at 5:45 pm
Johannes Lietz, thank you so much! I tried the 101% tweak and now it works! Otherwise I’d commit a suicide, i think (wasted so much time trying to guess what that fripping IE wanted)
September 12th, 2008 at 4:52 pm
Confirmed: 101% tweak helped me with slide-down problems in IE as well. I’m using slideDown on a UL, and IE was producing more of a slide-in-from-the-left effect instead. Nice
September 17th, 2008 at 5:18 am
Hi All,
What a great tool, eh?
We’ve been customizing it a bit, and for our first post on “How To’s” with this tool, feel free to check out how we added a timed automatic rotation here:
http://eliasinteractive.com/blog/making-it-happen-coda-slider/
Thanks to all involved on this!
- Lee Taylor
September 29th, 2008 at 5:12 pm
Hey, i have tried the 101% hack, but didnt work yet, take a look http://www.chazzuka.com/experiments/ajaxpage/
November 18th, 2008 at 11:43 am
Anybody know how to implement a slider inside a slideToggle?
It needs position: absolute; to work so i can’t use float instead.