Jquery toggle code making div jumpy

JavaScript
1

Hey I have a button and when its pressed I have it so that a div slides down. The code works both in FF and IE but in IE as the div is sliding down it does sort of like a jumpy or flickry effect? Dont really know how to describe it. Here is my code:


	$(document).ready(function(){
		$("#toolsToggle").toggle(
			function(){
				$("#subNavigation").slideDown("fast");
			},
			function(){
				$("#subNavigation").slideUp("fast");
			}
		);
	});

and the div:


<div id="subNavigation" style="display:none;">
<table width="1000" height="27" border="0" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td background="images/templateHeader_12.gif" width="1000" align="right" style="padding-right:30px;">
				<a href="userAdmin.php" style="color:white;"><b>User Admin</b></a> <font color="white"><b>|</b></font> <a href="tools.php" style="color:white;"><b>Tools</b></a>
		</td>
	</tr>
</table>
</div>

Does anyone see anything wrong there that may cause this? Thanks.

2

Does #subNavigation have any padding/margin? - if it does then there’s your problem.

A potential solution: Wrap the div in another div and animate it:


$(document).ready(function(){
    $("#toolsToggle").toggle(
        function(){
            $("#subNavigation").wrap('<div/>').parent().slideDown("fast");
        },
        function(){
            $("#subNavigation").parent().slideUp("fast");
        }
    );
});
3

Hey thanks for the reply. No #subNavigation does not have any css other than display:none to hide it when the page is first loaded. I tried the code you provided but it does not work. It doesnt slide down or up at all.

EDIT: Also just noticed that about 10% of the time it works normally. The other 90% its jumpy.

4

My code won’t work out of the box because #subNavigation is set to display:none … if it’s only happening in IE it’s probably something your just gonna have to live with. :frowning:

5

I just dont get why this doesnt work. Its exactly how its shown on the Jquery docs. I created a file called test.html and slapped the following code on there


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#toolsToggle").click(function (){
			$("#subNavigation").slideToggle("slow");
		});
	});
</script>
<a href="#" id="toolsToggle">TEST</a>
<div id="subNavigation" style="display:none;">
	asd
</div>

Is it flickering and jumping for anyone else?

6

It works perfectly for me in IE(7)/FF/Safari. http://qd9.co.uk/sp/js/jqueryToggle_PHPmonkey.html

7

WOW I finally fingured it out. I had a mistake in my code that wasnt shown here. I had <html> on top of the DOCTYPE. Thats why it was crapping out. I put it in the correct order and its working fine now. Thanks JimmyP for the time.

8

This was my issue as well only in IE, I just used:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>

and worked like a charm no more skipping…