Side navigation
Ticket #1054: toggleTest.html
File toggleTest.html, 1.3 KB (added by joelbirch, March 17, 2007 01:32AM UTC)
Test html page with test code embedded. It links to my server for CSS and jQuery 1.1.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>One/toggle test page</title>
<meta name="description" content="test page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://users.tpg.com.au/j_birch/plugins/assets/css/demo.css" media="screen,print">
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/jquery-1.1.2.js"></script>
<script type="text/javascript">
$(function(){
$("button").one("click",function() {
//change button behaviour to toggle pause/resume
$(this).text("Run toggle 1").toggle(
function() { $(this).text('Run toggle 2') },
function() { $(this).text('Run toggle 1') }
);
});
});
</script>
</head>
<body>
<h1>One/toggle <small>test page</small></h1>
<h3>Inconsistant cross-browser behaviour</h3>
<p>After one click the behaviour of this button is changed to toggle between two functions. IE toggles between them in the wrong order. Firefox will display the button label as “Run toggle 1” first, whereas IE displays the label as “Run toggle 2” and makes good on its threat to do so. <button>Run the “one” function</button></p>
</div>
</body>
</html>
Download in other formats:
Original Format
File toggleTest.html, 1.3 KB (added by joelbirch, March 17, 2007 01:32AM UTC)
Test html page with test code embedded. It links to my server for CSS and jQuery 1.1.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>One/toggle test page</title>
<meta name="description" content="test page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://users.tpg.com.au/j_birch/plugins/assets/css/demo.css" media="screen,print">
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/jquery-1.1.2.js"></script>
<script type="text/javascript">
$(function(){
$("button").one("click",function() {
//change button behaviour to toggle pause/resume
$(this).text("Run toggle 1").toggle(
function() { $(this).text('Run toggle 2') },
function() { $(this).text('Run toggle 1') }
);
});
});
</script>
</head>
<body>
<h1>One/toggle <small>test page</small></h1>
<h3>Inconsistant cross-browser behaviour</h3>
<p>After one click the behaviour of this button is changed to toggle between two functions. IE toggles between them in the wrong order. Firefox will display the button label as “Run toggle 1” first, whereas IE displays the label as “Run toggle 2” and makes good on its threat to do so. <button>Run the “one” function</button></p>
</div>
</body>
</html>