Bug Tracker

Ticket #4685: jquery_toggle_webkit_bug.xhtml

File jquery_toggle_webkit_bug.xhtml, 1.6 KB (added by alex_sh, 14 years ago)

A test case

Line 
1<?xml version="1.0" encoding="utf-8"?>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4        <head>
5                <meta content="application/xhtml+xml; charset=utf-8" http-equiv="Content-Type" />
6                <meta content="text/javascript; charset=utf-8" http-equiv="Content-Script-Type" />
7                <meta content="text/css; charset=utf-8" http-equiv="Content-Style-Type" />
8                <title>JQuery toggle() test</title>
9
10                <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
11
12                <style type="text/css">
13                        <!--/*--><![CDATA[/*><!--*/
14
15                                table {
16                                        width: 100%;
17                                        border: 1px solid black;
18                                        border-collapse: collapse;
19                                }
20
21                                th, td {
22                                        border: 1px solid black;
23                                }
24
25                                th {
26                                        /* This actually fixes the problem in opera, FF and ie7, but NOT webkit */
27                                        width: 300px;
28                                }
29
30                        /*]]>*/-->
31                </style>
32
33        </head>
34        <body>
35
36        <script type="text/javascript">
37                <!--//--><![CDATA[//><!--
38
39                $(document).ready(function() {
40
41                        $("#show_hide_button").click(function() {
42                                $("#show_hide_div").toggle(4000);
43                        });
44
45                });
46
47                //--><!]]>
48        </script>
49
50        <form id="f_form" action="#">
51
52                <table>
53                        <tbody>
54                                <tr>
55                                        <th>Customer</th>
56                                        <td>
57                                                        <input name="show_hide_button" id="show_hide_button" type="button" value="Click me" />
58
59                                                        <div id="show_hide_div" style="display: none;">
60                                                                <textarea name="f_area1" rows="10" cols="40"></textarea>
61                                                        </div>
62
63                                                        <div>
64                                                                <textarea name="f_area2" rows="10" cols="40"></textarea>
65                                                        </div>
66                                        </td>
67                                </tr>
68                        </tbody>
69                </table>
70
71        </form>
72
73        </body>
74</html>