Background-image won't change using jquery in IE6

Posted by slav on Stack Overflow See other posts from Stack Overflow or by slav
Published on 2010-04-27T23:05:01Z Indexed on 2010/04/27 23:13 UTC
Read the original article Hit count: 303

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">&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
    function checkPosition(currentPos, increment) {
        currentPos = currentPos + increment;
        if (currentPos &gt; facts.length - 1) {
            currentPos = 1;
        } else if (currentPos &lt; 1) {
            currentPos = facts.length - 1;
        }
        return currentPos;
    }
    //--&gt;&lt;!]]&gt;</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);">

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery