I encountered the same problem with 1.3.2 in Safari (latest version,
on OS X 10.6). It seemed to wait to redraw until I moved the mouse
over the element whose class had changed (though I was not
using :hover in any selectors). Everything worked as expected in
Firefox.
Nathan
On Dec 30, 11:48 am, candlerb <b.cand...@pobox.com> wrote:
> 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>
--
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en.
