I'm experiencing a very minor, but increasingly irritating problem with JQuery used in a custom block. 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:
<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>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.
Joined: 04/14/2008