Question

I am experimenting using the HTML5 boilerplate and the jQuery Supersized script.

Everything is working correctly in dev, however, after using the HTML5 boilerplate build script, the #supersized-loader is always visible on the screen, it doesn’t disappear.

Using the build script, my js files are concatenated, however, I have removed all supersized scripts from being concatenated and I am still faced with the same problem.

A live example can be found here – http://zetamedia.co.uk/supersized if anyone can shed any light on what may be happening.

Thanks.

Answer 1

never tried these before but it looks like it has to do with the z-indexes particularly in the #supersized-loader rule. Try changing

#supersized-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    text-indent: -999em;
    background: url(../img/progress.gif) no-repeat center center;
}

to

#supersized-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1000; /*changed this*/
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    text-indent: -999em;
    background: url(../img/progress.gif) no-repeat center center;
}

in supersized.css (or directly on the page)