Why is simple jQuery animation not working correctly?
Your help will be very much appreciated. I spend 4 hours trying to figure this out but failed, although this is a very simple example:
Given the following example (full run and copy and paste), I have two weird problems (found in both IE and Firefox):
1.) Given a line <div id="notexid" style="clear:both;">
with the following style tag: The "style="clear:both;"
problem is that Toggle Display does not "hide / slide over the layer". Whenever you click a link, only a layer (but that is of course not intended). It should go in on the first click and exit on the next click ....) => So style="clear:both;"
interrupts the jQuery toggle function, but why?
2.) If I remove style="clear:both;"
(which seems to be causing this problem) I get another weird behavior which appears in the Toggle (= render slide) element not in the correct position, but rather on the right side and jumps and then after rendering to the final position. But why is this rendering done on the right side when it later returns to the correct position ??? (So jQuery knows where the correct position is actually ...)
I would be very grateful if someone can just confirm that this is a strange bug in jQuery, so I can present this as a bug. Or, if anyone has a solution to the problem, it will be even bigger!
Many thanks!
<!DOCTYPE HTML PUBLIC"-// W3C//DTD HTML 4.01 Transitional//EN"" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
*.item {clear:both;}
*.item > *.label { display:block; float:left; width:150px; }
*.item > *.content { display:block; float:left; width:220px;}
</style>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<form method="GET" accept-charset="UTF-8" action="dddd">
<div class="item">
<span class="label">
<label for="note">Label 0
</label>
</span>
<span class="content">
<textarea id="coafasf" name="casfasfasf" cols="30" rows="4">
</textarea>
</span>
</div>
<script type="text/javascript">
function toggleElement() {
$("#notexid").slideToggle("slow");
}
$(document).ready ( function() {
$("#notexid").before('<div class="item"><span class="label"> <\/span><span class="content"><a href="javascript:toggleElement();"> CLICK HERE TO TOGGLE <\/a><\/span><\/div>');
}
);
</script>
<!-- INSERT style="clear:both;" Solves the formating Problem but results in a broken toggle -->
<div id="notexid" style="clear:both;">
<div class="item">
<span class="label">
<label for="note">Label 1
</label>
</span>
<span class="content">
<textarea id="test" name="test" cols="30" rows="2">
</textarea>
</span>
</div>
</div>
<div class="item">
<span class="label">
<label for="teasst">Label 2
</label>
</span>
<span class="content">
<input id="aaaaaa" name="asdfasfasf" type="text">
</span>
</div>
</body>
</html>
source to share
Problem
You float everything that would otherwise give height div
. So when jQuery goes to animate it and it checks the height to see if it needs to shrink or expand, it sees 0 and decides to expand. Everytime.
One solution
An easy (and general) solution to this is to simply put something after the floated children, set them to clear, and therefore force the parent to have a height - for example:
<div id="notexid" style="clear:both;">
<div class="item" >
<span class="label"><label for="note">Label 1</label></span>
<span class="content">
<textarea id="test" name="test" cols="30" rows="2" ></textarea>
</span>
</div>
<br clear="all"> <!-- you could probably find something less useless... -->
</div>
But this is ugly. You should change your markup and keep adding these additional elements, whether or not you use them for them.
The best decision
Instead, I suggest changing your styles to reduce the amount of floats:
*.item > *.label { display:block; float:left; width:150px; }
*.item > *.content { display:block; width:220px; overflow:hidden; }
Now only the tags are floating. Content sits and takes place normally, allowing shortcuts to float nearby. Note the addition of style overflow:hidden
: this allows the oversized kids to get out of the blocks content
and ruin your layout.
source to share