Side navigation
#4753 closed bug (duplicate)
Opened June 12, 2009 12:28PM UTC
Closed August 07, 2009 09:11PM UTC
Last modified March 15, 2012 03:39PM UTC
toggle in IE8
| Reported by: | anthony_au | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.4 |
| Component: | selector | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
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 (1)
Change History (3)
Changed June 12, 2009 12:31PM UTC by comment:1
Changed July 13, 2009 01:40AM UTC by comment:2
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>
IE version 8.0.6001.18783 running on Vista x64