Odd JQuery behavior in FF

I'm experiencing a very minor, but increasingly irritating problem
with JQuery used in a custom block in a drupal implementation. I'm
using an ajax call to a php script to change the content of the block
every 10 seconds or so (called from w/in a setInterval). I use fadeIn/
fadeOut to make it all look a little more professional and less
abrupt. Problem is, in firefox, fadein and fadeout seem to apply their
style/opacity changes to all the text on the page, resulting in an
subtle but annoying fading of all the text as the content of the block
fades out and back in. I suspected it might have to do with inherited
css traits (i.e. I wasn't implicitly setting the style of the div
being replaced -- its properties were inherited other portions of the
page (namely, the body)). Setting the text formatting implicitly for
the div didn't fix the issue, however. I watched the page for a while
in firebug, and noticed that when the content of the div is reloaded,
it appears to disappear from the DOM altogether. Perhaps an artifact
of the .load() JQuery function? I'm not really sure. Here's the
original code set in the block:

<code>
<div id="someDiv">some content</div>
<script type="text/javascript">
var refreshId = setInterval(function() {
     $('#someDiv').fadeOut('slow');
      $('#someDiv').load('someScript.php',function(){
          $('#someDiv').fadeIn('slow');
     });
}, 10000);

</script>
</code>
Nothing is jumping out at me as a work-around. I don't see the same
behavior in Safari (not sure about IE, and unable to test at the
moment). Any suggestions or insights anyone might have are greatly
appreciated.

[Karl Swedberg-2]

I'm assuming you're using FF for the Mac, right? This is a known bug  
in Firefox 2 whenever opacity is changed from 1 to any other value and  
vice versa. One workaround is to set the -moz-opacity property on the  
body element in your stylesheet:

body { -moz-opacity: 0.9999; }

or in jQuery, in your $(document).ready() :

$('body').css({opacity: .9999});


Hope that helps.

--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jun 9, 2008, at 11:34 AM, pinson.nick@... wrote:

>
> I'm experiencing a very minor, but increasingly irritating problem
> with JQuery used in a custom block in a drupal implementation. I'm
> using an ajax call to a php script to change the content of the block
> every 10 seconds or so (called from w/in a setInterval). I use fadeIn/
> fadeOut to make it all look a little more professional and less
> abrupt. Problem is, in firefox, fadein and fadeout seem to apply their
> style/opacity changes to all the text on the page, resulting in an
> subtle but annoying fading of all the text as the content of the block
> fades out and back in. I suspected it might have to do with inherited
> css traits (i.e. I wasn't implicitly setting the style of the div
> being replaced -- its properties were inherited other portions of the
> page (namely, the body)). Setting the text formatting implicitly for
> the div didn't fix the issue, however. I watched the page for a while
> in firebug, and noticed that when the content of the div is reloaded,
> it appears to disappear from the DOM altogether. Perhaps an artifact
> of the .load() JQuery function? I'm not really sure. Here's the
> original code set in the block:
>
> <code>
> <div id="someDiv">some content</div>
> <script type="text/javascript">
> var refreshId = setInterval(function() {
>     $('#someDiv').fadeOut('slow');
>      $('#someDiv').load('someScript.php',function(){
>          $('#someDiv').fadeIn('slow');
>     });
> }, 10000);
>
> </script>
> </code>
> Nothing is jumping out at me as a work-around. I don't see the same
> behavior in Safari (not sure about IE, and unable to test at the
> moment). Any suggestions or insights anyone might have are greatly
> appreciated.