Using Richard's solution, I manage finished my widget. It works
flawlessly in Firefox. toggleClass(...) is broken in Webkit (Safari
and Chrome) browsers and IE7/8. With IE, if I didn't set the
foreground color, toggleClass works. Is this another bug with
toggleClass? Is there a way round this? I have included a short
snippet to highlight the issue.
Please advise. Thanks
<html>
<head>
<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></
script>
<script src="lib/jquery/jquery-ui-1.7.2.js" type="text/javascript"></
script>
<script type="text/javascript">
$(document).ready(function() {
$("#redClick").click(function() {
$("#redConsole").toggleClass('red', 0);
return false;
});
$("#greenClick").click(function() {
!$("#greenConsole").is(":animated") && $
("#greenConsole").toggleClass('green', 2000);
return false;
});
$("#blueClick").click(function() {
!$("#blueConsole").is(":animated") && $
("#blueConsole").toggleClass('blue', 2000);
return false;
});
});
</script>
<style>
.red {background-color:red;}
.green {background-color: green;}
.blue{background-color: blue; color:white;}
.button {border: 1px black solid; padding: 2px;}
</style>
</head>
<body>
<div id="redConsole">RED - works for "ALL" browsers</div>
<div id="redClick" class="button">Click Me</div>
<div style="clear:both;height:1em"></div>
<div id="greenConsole">GREEN - works for IE7/8 and FireFox 3</div>
<div id="greenClick" class="button">Click Me</div>
<div style="clear:both;height:1em"></div>
<div id="blueConsole">BLUE - works only for FireFox 3 (This text
should be white)</div>
<div id="blueClick" class="button">Click Me</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=.
