I'm a complete javascript newbie and I know it's not exactly wise to
jump into jquery as such, but I did so anyway because I needed
something done fairly quickly and in a simple manner. So, forgive me
if this is not the most efficient way to get this done.
Anyway, the idea behind the script is to swap out the existing linked
css file with another random one after a set amount of time.
As such, I have the following in the head section:
Code:
<link href="styles/style1.css" type="text/css" rel="stylesheet"
id="stylesheet" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
var interval
$(document).ready(function() {
interval = setInterval("getCSS()", 5000);// 5 secs between
requests
});
function getCSS() {
// randomize the stylesheet to be loaded
var r = Math.floor(Math.random()*3+1);
// set stylesheet to new stylesheet + randomized number
$("#stylesheet").attr({href : "styles/style"+r+".css"});
}
</script>
Everything works nicely in all browsers I've tested (FF, Safari, and
Opera) except (of course) IE. Mainly, it swaps out the css (in this
case, I'm just changing the background and some text colors for
testing purposes). The problem is that only the area that has content
receives an update in the background color. Anywhere else, the
background remains the same as before. I'm not sure what the problem
is, maybe IE renders too slowly, but if you minimize the browser, then
maximize again, the background colors display correctly. The problem
only shows up if the screen is in view when the css swap happens.
Anyone know a way to fix this problem? Any help is much appreciated.
