Side navigation
Ticket #4753: jquery-table-toggle-bug.html
File jquery-table-toggle-bug.html, 1.5 KB (added by darkoz, July 13, 2009 01:41AM UTC)
buug example and workaround
<!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">
<head>
<title>jQuery IE8 toggle bug</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
//setup
var column = $("table td:nth-child(2)");
var div = $("div");
//error
div.append("<p>At start -> display:" + column.css("display") + "</p>");
column.toggle();
div.append("<p>After 1 toggle -> display: " + column.css("display") + "</p>");
column.toggle();
div.append("<p style=\"color:red;\">After 2 toggles -> display:" + column.css("display") + " <- This should be table-cell or block</p>");
//workaround - dont use toggle
column.show();
div.append("<p>After column.show() -> display:" + column.css("display") + "</p>");
});
</script>
<style>
table { border-collapse:collapse; margin:20px; }
td { border:1px solid #ccc; padding:0 5px; }
</style>
</head>
<body>
<p>This is an IE8 issue only. Toggle works only when hiding table cells, but not when it needs to show it.</p>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</table>
<div></div>
</body>
</html>
Download in other formats:
Original Format
File jquery-table-toggle-bug.html, 1.5 KB (added by darkoz, July 13, 2009 01:41AM UTC)
buug example and workaround
<!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">
<head>
<title>jQuery IE8 toggle bug</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
//setup
var column = $("table td:nth-child(2)");
var div = $("div");
//error
div.append("<p>At start -> display:" + column.css("display") + "</p>");
column.toggle();
div.append("<p>After 1 toggle -> display: " + column.css("display") + "</p>");
column.toggle();
div.append("<p style=\"color:red;\">After 2 toggles -> display:" + column.css("display") + " <- This should be table-cell or block</p>");
//workaround - dont use toggle
column.show();
div.append("<p>After column.show() -> display:" + column.css("display") + "</p>");
});
</script>
<style>
table { border-collapse:collapse; margin:20px; }
td { border:1px solid #ccc; padding:0 5px; }
</style>
</head>
<body>
<p>This is an IE8 issue only. Toggle works only when hiding table cells, but not when it needs to show it.</p>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>4</td>
<td>3</td>
<td>2</td>
<td>1</td>
</tr>
</table>
<div></div>
</body>
</html>