Question

I am having problem with appending a div with an image to a page after clicking a link.
Here is my script, which on document.ready() adds the event.

var handler = function () {
    $('#content').append("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>");
    //$("<div class=\"loading-graphic\" style=\"position:absolute;height:200px;width:200px;top:30%;left:40%;z-index:999;\"></div>").appendTo("div#content");
}

$(document).ready(function () {
    for (var ls = document.links, numLinks = ls.length, i = 0; i < numLinks; i++) {

        if (ls[i].parentElement.className != "t-window-actions t-header" && ls[i].parentElement.className != "t-widget t-numerictextbox") {
            ls[i].onclick = handler;
        }
    }
})

The problem here that it doesn’t work in Chrome while in Firefox and IE its working perfectly. After some digging i found out that it actually adds the div but doesn’t show the image. (Tested it with adding the div on the beginning of the page, everything moves down and the div is empty)

I have tested it also adding it directly to page and then it works good but it’s not what I’m looking for unfortunately.

Here is my css class:

.loading-graphic
{
    background: url('~/Content/ico/loading_big.gif') no-repeat;
}

Got no idea what is causing the problem. Anyone got an idea? ;/

Answer 1

Honestly sometimes Chrome screws up. I have had issues with Chrome and background images, but it was only my computer. Try it on a different computer Chrome browser, it might not be the same.

The other thing I would suggest is, have your div coded already instead of appending it. So basically have it on the html code and position it out of sight, then when you need it, just move it to the right position.