[jQuery] table rows are reluctant to give up their space
nd am seeing something strange, though it is probably more
javascript related. I have a simple table of rows for items in a
shopping cart. in each row is a remove link that should remove the item
from the cart, and the row from the table. here's the basic HTML:
<div class="codebox"><div class="incqbox"><div class="scrollbox" style="height: 35em;"><pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>javascript fun</title>
<script src="jquery-base.js" type="text/javascript"></script>
<script src="hiderow_1.js" type="text/javascript"></script>
<style type="text/css">
body { font-family:Arial; }
</style>
</head>
<body>
<table cellpadding="10" cellspacing="0" class="cartitems" id="cartitems" width="100%" bgcolor="blue">
<tr id="product1">
<td bgcolor="yellow">
<a href="#" id="removeitem1" class="removeitem">remove</a>
</td>
</tr>
<tr><td bgcolor="green">green</td></tr>
</table>
</body>
</html></pre></div></div></div>
and the contents of cart_index.js:
<div class="codebox"><div class="incqbox"><div class="scrollbox" style="height: 18em;"><pre>$(document).ready(function(){
$("a#removeitem1").click(
function(){
$("tr#product1").fadeOut("slow", function() {
$(this).remove();
});
return false;
}
);
})</pre></div></div></div>
which
does fade the contents of the row out, and removes the element from the
table, but the table row does not "collapse". or the height does not go
away. see the example here:
<a href="http://danmarvelo.us/working/jquery/hiderow_1.html">http://danmarvelo.us/working/jquery/hiderow_1.html</a>
I
figured out that if I commented out the y.display = "block"; on line
1511 of jquery-latest.js, the row did actually go away. so I thought it
might just be setting that property. but if I hid the row just by
setting the css properties, the row did go away, so it wasn't exactly
the "block" that was causing the problems.
<div class="codebox"><div class="incqbox"><div class="scrollbox" style="height: 18em;"><pre>$(document).ready(function(){
$("a#removeitem1").click(
function(){
$("tr#product1").css("display", "block");
$("tr#product1").css("display", "none");
return false;
}
);
})</pre></div></div></div>
or, see <a href="http://danmarvelo.us/working/jquery/hiderow_2.html">http://danmarvelo.us/working/jquery/hiderow_2.html</a>
but when I executed the code to set the display property to "none" after a timer, we were back to the original behavior:
<div class="codebox"><div class="incqbox"><div class="scrollbox" style="height: 18em;"><pre>$(document).ready(function(){
$("a#removeitem1").click(
function(){
$("tr#product1").css("display", "block");
setTimeout(function() { $("tr#product1").css("display", "none"); }, 1000);
return false;
}
);
})</pre></div></div></div>
or, see <a href="http://danmarvelo.us/working/jquery/hiderow_3.html">http://danmarvelo.us/working/jquery/hiderow_3.html</a>
what is up with that? anyone have ideas on this? this is all in Firefox 2.0 on Windows. it works fine in IE :)
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/