Bug Tracker

Opened 11 years ago

Closed 10 years ago

Last modified 8 years ago

#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:
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)

jquery-table-toggle-bug.html (1.5 KB) - added by darkoz 10 years ago.
buug example and workaround

Download all attachments as: .zip

Change History (4)

comment:1 Changed 11 years ago by anthony_au

IE version 8.0.6001.18783 running on Vista x64

comment:2 Changed 10 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 10 years ago by darkoz

buug example and workaround

comment:3 Changed 10 years ago by john

Component: unfilledselector
Resolution: duplicate
Status: newclosed

Duplicate of #4512, which has already been fixed.

Note: See TracTickets for help on using tickets.