Need to force IE to recalculate displayed styles
This is not necessarily a jquery problem, but I'll raise it here
anyway because perhaps jquery could fix it.
The HTML below demonstrates a problem with IE8/Win7 (and I believe IE7/
XP although I don't have such a box next to me right now).
There is a CSS style .header.selected + .body { ... }, so that if a
header object is selected, the adjacent body object is highlighted
also.
However if I use jquery to toggle the .selected class on the .header
item, the highlight on the .body isn't being updated - it's as if the
screen is waiting to be redrawn. It's the same both in normal mode and
in compatibility mode.
The same page works properly in Firefox and Chrome though.
Is there a way I can force the CSS to be "recalculated" or "redrawn"
in IE8 after making such a change to the DOM - either through jQuery,
or to some lower layer? Could jQuery make such redraw requests
automatically?
Thanks,
Brian.
P.S. in my real application the page is somewhat more complex, and I
find that moving the mouse around outside of the div will cause the
styles to be redrawn. I haven't been able to replicate this behaviour
in the simple page below though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang='en-US' xml:lang='en-US' xmlns='http://www.w3.org/1999/
xhtml'>
<head>
<title>Test</title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery( function($) {
$('.toggle').live('click', function() {
$(this).closest('.header').toggleClass('selected');
return false;
});
});
</script>
<style type="text/css">
.header.selected { background-color: #e81; }
.header.selected + .body { background-color: #fc5; }
</style>
</head>
<body>
<div class="header">
<a href="#" class="toggle">This is the header</a>
</div>
<div class="body">
And this is the body. When I select the header, the body should be
selected too.
</div>
<div class="header selected">
<a href="#" class="toggle">Another header</a>
</div>
<div class="body">
And another body which is initially highlighted
</div>
</body>
</html>
--