Question

The previous question I asked about creating a DIV where size is calculated from height x width of viewport is answered very well here: Square DIV where height is equal to viewport

I have a background image applied to the #square DIV that fits and resizes beautifully when JavaScript is on. However when JavaScript is OFF, the background image stretches to a width of 100% of the viewport- I presume because the #square div isn’t being fed any information about how wide it should be, and is defaulting to 100%.

So my question is: what approaches could I use so that this doesn’t happen? Can I feed my #square DIV a default-width in case JavaScript is OFF, but which is overridden when JavaScript is ON?

Here is the JQuery (thanks to the answer on the previous question):

$(document).ready(function(){
    var height = $(window).height();
    $('#square').css('height', height);
    $('#square').css('width', (height*1.1));
});

Here is the CSS:

html, body, img {
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

#container {
    width: 100%;
    height: 100%;
    min-width: 500px;
    min-height: 500px;
    background-color: #e0aa0e;
}

#square {
    min-width: 500px;
    min-height: 500px;
    overflow: hidden;
    background-image:url('images/bg.png');
    background-repeat: no-repeat;
    background-size:cover;
}

and here is the HTML:

<div id="container">
    <div id="square">
        Content within square
    </div>
</div>

What I am trying to do is create a liquid, resizable page with information elements arranged over different regions of the background image of #square- so I am basing all element sizing off the size of #square. Which, since #square is getting it’s sizing from JQuery, doesn’t work with JavaScript off. Am happy for the no-JQuery view to be static rather than liquid. Thanks in advance for all suggestions.

Answer 1

You could put a CSS class on the #square div which has an absolute width and height set, and then in your jQuery script, use removeClass() on #square to remove that CSS class. Thus with no jQuery available, it’d be that set width and height, and then if jQuery is enabled, it becomes liquid.

#square {
    min-width: 500px;
    min-height: 500px;
    overflow: hidden;
    background-image:url('images/bg.png');
    background-repeat: no-repeat;
    background-size:cover;
}

#square.nojavascript {
    width: 960px;
    height: 960px;
}

---

<div id="square" class="nojavascript">

---

$('#square').removeClass('nojavascript');