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);">
