Home/ Questions/Q 6014231
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T02:39:43+00:00

I have the following code in JQuery (JavaScript), and works fine in Chrome, Safari

  • 0

I have the following code in JQuery (JavaScript), and works fine in Chrome, Safari and Firefox. However, it does not show them in Internet Explorer 8. What could be possibly wrong? I am using 960gs as CSS framework.

// JavaScript
var site_root = "http://localhost:8080";

var banner = new Array();

banner[1] = site_root + "/images/banner-1.png";
banner[2] = site_root + "/images/banner-2.png";
banner[3] = site_root + "/images/banner-3.png";
banner[4] = site_root + "/images/banner-4.png";
banner[5] = site_root + "/images/banner-5.png";
banner[6] = site_root + "/images/banner-6.png";
var counter = 1;

$(document).ready(function() {
    $('#top_banner').hide();
    $('#top_banner').slideDown('slow');

    var timer = setInterval(StepThroughBanners, 5000);

    function StepThroughBanners() {
        var link = "url(" + banner[counter] + ")";
        $('#top_banner').css("background-image", link); 

        if(counter<6) { 
            counter++;
        } else {
            counter = 1;
        }
    }

});

Here is my CSS:

#top_banner {
    background: #fff;
    background-image: url("../images/banner-1.png");
    background-repeat:no-repeat;

    color: #fff;
    height: 370px;
    padding: 1em;
}

EDIT: (HTML added)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head><title><?= $title ?></title>
    <!-- load style framework 960 -->
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/960.css" />
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/reset.css" />
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/text.css" />
    <!-- load custom styles -->
    <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/custom.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="<?= base_url();?>scripts/general.js" type="text/javascript" charset="utf-8"></script>


    </head>
        <body>
            <div class="container_16">
                <div id="top_menu" class="grid_16">


        <div class="menu">
                    <ul>
                    <li><a href="#">item 1</a></li>
                    <li><a href="#">item 2</a></li>
                    <li><a href="#">item 3</a></li>
                    <li><a href="#">item 4</a></li>
                    <li><a href="#">item 5</a></li>
                    <li><a href="#">item 6</a></li>
                    </ul>
                    </div>
                    <div class="tool">
                    <ul>
                    <li><a href="#">one &#x25BE;</a></li>
                    <li><a href="#">two &#x25BE;</a></li>
                    <li><a href="#">three &#x25BE;</a></li>
                                    </ul>
                    </div>
                    <div class="search">
                        <form>
                        <input type="text" value="search..."></input>
                    </form>
                </div>
            </div>

            <div class="clear"></div>
            <div id="top_banner" class="grid_16">&nbsp;</div>
            <div class="clear"></div>

            <div class="grid_4 mockup">460px</div>
            <div class="grid_4 mockup"><p>460px</p></div>
            <div class="grid_4 mockup"><p>460px</p></div>
            <div class="grid_4 mockup">460px</div>

            <div class="clear"></div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Works fine for me. It just takes time for the first time the images are loaded.

    Though you should update this line, just to be sure, from:

    var link = "url(" + banner[counter] + ")";

    to

    var link = "url('" + banner[counter] + "')";
    • 0