jquery slideToggle doesn't work in IE

[andrewsmd]

I'm trying to make a div that is hidden at the top of a page until you click support, and then it slides out. I've got this working fine in FF, but in IE it's really choppy. I don't really have any idea why other than the fact that it's the way IE handles JS. Does anyone have any thoughts on how I can go about trouble shooting this?

[JAB Creations]

jQuery seriously needs to be banned, you don't need a massive 70KB framework to animate something that doesn't even require a kilobyte.

This is straight out of my site so you may need to make a few adjustments though all the heavy lifting has been done. If you encounter problems I highly recommend Opera for JavaScript debugging and Safari is good too, Firefox is a hit or miss as it doesn't always report errors and IE8 will show you exactly where it doesn't like something.

The animation will fade out until the sidebar is at 50% width and when showing the sidebar it will start to fade in at 50%. Not doing so would make everything look weird if the elements in the sidebar were really tiny.

This should save you the five or so hours it took me to write from scratch and I'd much rather give the code away then see more people thinking jQuery is an answer for anything because frankly it's not and the fact that everyone complains that it doesn't work in certain browsers completely negates the point of having a framework that works cross-browser.

- John

function change(id, newClass)
{
 if (document.getElementById(id)) {document.getElementById(id).className=newClass;}
 else if (id) {id.className=newClass;}
 else {alert('Error: the id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+newClass);}
}

function dhtml_sidebar(a,b,o)
{
 change('sidetogglehide','hidden');
 change('sidetoggleshow','hidden');
 var c = document.getElementById('content');
 var s = document.getElementById('side');

 if (typeof dhtml.a=='undefined')
 {
 dhtml.a = 0;
 dhtml.c = c.clientWidth;
 dhtml.s = s.clientWidth;
 dhtml.w = dhtml.c+dhtml.s;
 }

 if (o==undefined)
 {
 if (a=='hide')
 {
 if (s.style.opacity!=undefined) {o = 1.0;}
 else {o = 100;}
 }
 else if (a=='show')
 {
 if (s.style.opacity!=undefined) {o = 0.0;}
 else {o = 0;}
 }
 }

 if (dhtml.a==0 && typeof b=='undefined' || dhtml.a==1 && b==1)
 {
 dhtml.a=1;

 if (typeof dhtml.side=='undefined') {dhtml.side = s.clientWidth;}

 if (a=='hide')
 {
 if (s.clientWidth>0)
 {
 if (s.clientWidth-10>0)
 {
 if (o!=0.00)
 {
 if (s.style.opacity!=undefined)
 {
 o = o-.05;
 var oo = o.toFixed(2);
 s.style.opacity=oo;
 }
 else
 {
 oo = o-5;
 s.style.filter='alpha(opacity='+oo+')';
 s.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+oo+')';
 }
 }
 else
 {
 oo = 0;
 }

 s.style.width = s.clientWidth-10+'px';
 c.style.width = c.clientWidth+10+'px'
 setTimeout(function() {dhtml_sidebar('hide',1,oo);},25);
 }
 else
 {
 c.style.width = c.clientWidth+s.clientWidth+'px';
 s.style.width = '0px';
 s.style.display='none';
 change('sidetoggleshow','block');
 dhtml.a = 0;
 }
 }
 }
 else if (a=='show')
 {
 if (s.clientWidth<=dhtml.side)
 {
 if (s.clientWidth+10<dhtml.s)
 {
 var t1 = s.clientWidth;
 var t2 = dhtml.s/2;
 var c1 = c.clientWidth - dhtml.c;

 if (c1>t2) {s.style.display='block';}

 if (t1>t2)
 {
 if (s.style.opacity!=undefined)
 {
 if (s.clientWidth!=dhtml.s)
 {
 if (typeof o!='number') {o = parseFloat(o);}
 var o1 = o + .05;
 var oo = o1.toFixed(2);

 s.style.opacity=oo;
 }
 else {s.style.opacity=1.0;}
 }
 else
 {
 oo = o+5;
 s.style.filter='alpha(opacity='+oo+')';
 s.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+oo+')';
 }
 }
 s.style.width = s.clientWidth+10+'px';
 c.style.width = c.clientWidth-10+'px';
 setTimeout(function() {dhtml_sidebar('show',1,oo);},25);
 }
 else
 {
 s.style.width = dhtml.s+'px';
 c.style.width = dhtml.c+'px';
 if (s.style.opacity) {s.style.opacity=1.0;}
 else {s.style.filter='alpha(opacity=100)';}
 change('sidetogglehide','block');
 dhtml.a = 0;
 }
 }
 }
 }
}

[rocknbil]

Does anyone have any thoughts on how I can go about trouble shooting this?

First stop: put just the relevant bits of code in an empty document and see if it smooths out. There are some jQuery functions that don't work as well as you'd like, and when they don't, you could use something else - the animate() function, for example.

[andrewsmd]

I do have this in just a blank page, to rule out anything else. I'll look into the animate function. Thanks for the idea.

[andrewsmd]

So i took a look at your function, I can't say I understand it completely? Am I just supposed to pass the id of the div I want changed and the new class of what it should be? If so, I don't see how it will give me any animation?

[andrewsmd]

Ok, I'm getting a bunch of problems trying to make this cross browser compatible. Does anyone have any suggestions about how to do this. I basically have a div at the top that I need to stay hidden and animate to pop out when a user clicks the support button. I'm open to all suggestions.

[Fotiman]

A few questions...
1. Is it only on your computer that IE seems choppy?
2. Are there other actions happening on the page (is the browser busy doing other things)?
3. What code are you using to attach the slideToggle functionality?
4. Have you tried a small sample test case to identify if the problem is IE in general, or specific to your page?

[andrewsmd]

1. this problem happens on different versions of IE across different computers.
2. this is a dotnetnuke site, but I removed everything and just put this into a test.html site to make sure it was not something to do with dnn
3. Here is the basic code I use to do this slide toggle.
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$("#myDiv").hide();
$('#slidebottom a').click(function () {
$(this).prev().slideToggle(1200);
});
});
function toggleDiv() {
$("#myDiv").slideToggle(1200);

} //toggleDiv
</script>
<style type="text/css">

.greenBg{
background-color: Green;
width: 300px;
height: 300px;
}

</style>
</head>
<body>
<div id="myDiv" class="greenBg">
test
</div><br /><br />

<input type="button" onclick="toggleDiv();" value="click" />

</body>
</html>

4. My previous code does not work, and that is as simple as I can make it.

[Fotiman]

I tried your example code with IE7 and it was just as smooth as other browsers. I'm running Windows XP.

[andrewsmd]

I am having this issue on windows 7 machines. I have verified on IE 8 and IE 9 beta win 7 32 and 64 bit respectively. I just fired up my xp virtual machine and you're right. It works great in xp.

[Fotiman]

I'll give it a try on Win7 tomorrow.

[andrewsmd]

Got it. Changed my doctype to lose and that fixed it. Thanks for the help everyone