Cannot get div element by id to display gif in internet explorer

Question

I am trying to make a .gif image display in a loading window to alert my user that loading is underway, quite simple. I was doing it using only css and background property like this:

/background: url(ajax-loader.gif) no-repeat center #fff;/

but my .gif was not loading in internet explorer. So I've made a research and found this and, based on J.Davies's solution, I have implemented this instead in my js file:

function ShowProgress() {
    if (!spinnerVisible) {
        $('div#layer').fadeIn("fast");
        $('div#spinner').fadeIn("fast");
        spinnerVisible = true;

        var pb = $('#spinner');
        pb.innerHTML = '<img src="./ajax-loader.gif" width=200 height=40/>';
        pb.style.display = "";
    }
}

My problem is that it works still in chrome, but I get a crash in internet explorer saying that it pb is undefined. Is there a specificity on how to work with jquery and internet explorer? For information, here's my display:

<div id="body">
    @RenderSection("featured", false)
    <section class="content-wrapper main-content clear-fix">
        <section>
            @Html.Partial("MessageDisplay")
        </section>
        <div id="layer"></div>
        <div id="spinner">
            Loading, please wait...
        </div> 
        @RenderBody()
    </section>
</div>

And the css saying that spinner and layer div are hidden:

div#spinner {
    display: none;
    width: 300px;
    height: 300px;
    position: fixed;
    top: 40%;
    left: 45%;
    /*background: url(ajax-loader.gif) no-repeat center #fff;*/
    text-align: center;
    padding: 10px;
    font: normal 16px Tahoma, Geneva, sans-serif;
    border: 1px solid #666;
    margin-left: -50px;
    margin-top: -50px;
    z-index: 2;
    overflow: auto;
}

div#layer {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #a4a3a3;
    background-color: rgba(164, 163, 163, 0.5);
    z-index: 1;
    overflow: auto;
    -moz-opacity: 0.5
}

`pb` is a jQuery object. not a dom reference so there is no `innerHTML` or `style` — Arun P Johny, Oct 06 '14 at 13:35
Oh ok! Is there a way that I could tune my code above to make it work? I've tried to use the `document.getElementByID` code line but I had the same result... — hsim, Oct 06 '14 at 13:36

score 3 · Accepted Answer · answered Oct 06 '14 at 13:36

3

pb is a jQuery object. not a dom reference so there is no innerHTML or style properties in it. You need to use the utility methods provided by jQuery to set those

var pb = $('#spinner');
pb.html('<img src="./ajax-loader.gif" width=200 height=40/>').show();

In your case you can use .html() to set the innerHTML and .show() to make it visible

answered Oct 06 '14 at 13:36

Arun P Johny

384,651
66
527
531

This seems to work, however I am not sure of the result because the initial css is not anymore visible; all I see now is a grey, transparent square displaying my gif. Is that the effect wanted? – hsim Oct 06 '14 at 13:42
Initially I have a white square, in the top I had "Loading, please wait..." and right underneath it I had my gif "playing". I want to reproduce the same effect on Internet explorer, hence my question. – hsim Oct 06 '14 at 13:46
Almost there! If I'm using this line instead: `pb.append('').show();` I do see the gif and my layout, however I am still not seeing the original white background. Any idea why? – hsim Oct 06 '14 at 13:50

Sebastien B. · Answer 2 · 2014-10-06T13:46:55.883

Change this :

        var pb = $('#spinner');
        pb.innerHTML = '<img src="./ajax-loader.gif" width=200 height=40/>';
        pb.style.display = "";

with this :

    var pb = $('#spinner');
    pb.html('<img src="./ajax-loader.gif" width=200 height=40/>');
    pb.css({'display':''});

Plus I must add that something IE8 have issue with fadeIn / fadeOut so I would recommande if you still have a problem to try .show() / hide() instead.

score 0 · Answer 3 · answered Oct 06 '14 at 14:08

I have accepted Arun's answer because it has helped me get to the solution. Based on his answer and my css, I have finally managed to make this jquery call:

function ShowProgress() {
    if (!spinnerVisible) {
        $('div#layer').fadeIn("fast");
        $('div#spinner').fadeIn("fast");
        spinnerVisible = true;

        var spinner = $('#spinner');

        spinner.append('<img src="../../Content/ajax-loader.gif" width="250" height="250"/>').css('background', '#fff').show();
    }
}

This keeps every css element originally present and plays my gif in both internet explorer and all other browsers. Thanks!

Cannot get div element by id to display gif in internet explorer

3 Answers3