There is a panel on my page with no default background-image css. On load it is set with jquery
to an initial image, waits for 10 seconds then loads a random image out of some predetermined images. There are previous and next buttons which allow you
to cycle through
the images. In ie6
the initial image loads and then a random image also loads after 10 seconds, however pressing prev/next causes
the background
to become white and
the images aren't loaded. With alerts I was able
to find that it's still keeping track of
the position and url of
the image it's supposed
to load, but just won't load it. Here is
the code below.
<script type="text/javascript">
var facts = new Array();
var position;
$(document).ready(function() {
<xsl:for-each select="$currentPage/ancestor-or-self::node[@level=1]/../node[@nodeName='Fun Fact Folder']/node">
facts[<xsl:value-of select="position()" />] = '<xsl:value-of select="." />';
</xsl:for-each>
if(window.location.pathname == "/homepage.aspx" || window.location.pathname == "/") {
$(".fun_facts_bg").css("background-image", "url(images/fun_fact_homepage.JPG)");
setTimeout("randomFact()",10000);
} else {
randomFact();
}
});
function randomFact() {
$("a.previous_button").css("display", "block");
$("a.next_button").css("display", "block");
position = Math.ceil(Math.random() * (facts.length - 1));
changeFact(0);
}
function changeFact(increment) {
position = checkPosition(position, increment);
$(".fun_facts_bg").css("background-image", "url(" + facts[position] + ")");
}
<xsl:text disable-output-escaping="yes"><!--//--><![CDATA[//><!--
function checkPosition(currentPos, increment) {
currentPos = currentPos + increment;
if (currentPos > facts.length - 1) {
currentPos = 1;
} else if (currentPos < 1) {
currentPos = facts.length - 1;
}
return currentPos;
}
//--><!]]></xsl:text>
</script>
<a class="previous_button" href="javascript:void(0);" onclick="changeFact(-1);">
<a class="next_button" href="javascript:void(0);" onclick="changeFact(1);">
