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.
