Ticket #4753 (closed bug: duplicate)
toggle in IE8
| Reported by: | anthony_au | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.4 |
| Component: | selector | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
The following code work in IE6+ IE7 and Firefox, but won't work in IE8
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN" " http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<title>Testing</title> <script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){
$('.clickable').hover(
function(){
$(this).css("color", "#c77405");
}, function(){
$(this).css("color", "#000000");
}
).each(function() {
$(this).click( function() {
$('#subnode').toggle(500);
});
});
}); </script>
</head> <body>
<h1>Testing</h1>
<table border='1px solid #e78f08'>
<thead>
<tr>
<th width="100%">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><u id="node" class="clickable">aaa aaaaa aaaaaaaaaa</u></td>
</tr>
<tr id="subnode" style="display:none;padding:0;margin:0;">
<td>hello</td>
</tr>
</tbody>
</table>
</body> </html>
Attachments
-
jquery-table-toggle-bug.html
(1.5 KB) -
added by darkoz 4 years ago.
- buug example and workaround
Change History
comment:2 Changed 4 years ago by darkoz
another example of this:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" " 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>
Changed 4 years ago by darkoz
-
attachment
jquery-table-toggle-bug.html
added
buug example and workaround
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
IE version 8.0.6001.18783 running on Vista x64