Auto Resizing the height and the width of a web application

Question

I'm developing a web app and i want to auto resize three columns divs filled with a background image in order to make them fill the whole page whenever i zoom in or out with ctrl- and + exactly like jsfiddle.net, here is what i have written to make this effect but it failed:

HTML:

<div id="three_columns_container">
     <div id="first-column">...</div>
     <div id="second-column">...</div>
     <div id="third-column">...</div>
</div>

CSS:

#first-column{
    background:('slice.png');
    width: 15%;
    height: 97%;
}
#second-column{
    background:('slice.png');
    width: 15%;
    height: 97%;
}
#third-column{
    background:('slice.png');
    width: 70%;
    height: 97%;
}

JS:

 $(window).resize(function(){
      $("#three_columns_container").height() = $(window).height * 0.97;
      $("#three_columns_container").width() = $(window).width* 0.97;
    });

this link may help solving the problem but it doesn't make the exact effect link

i was wondering if anybody can help me with this

score 0 · Answer 1 · answered Dec 25 '11 at 19:38

0

for variable width use %age. and for fixed use pixels. what else dont you understand. if you require the background pic also to be resizd you will have to write js for that.

answered Dec 25 '11 at 19:38

Deept Raghav

1,381
12
14

score 0 · Accepted Answer · answered Dec 25 '11 at 19:43

0

I think that this is solution for your problem:

CSS

#firstColumn {
    width: 15%;
    height: 150px;
    background: #1e3340;
    float: left;
}
#secondColumn {
    width: 70%;
    height: 150px;
    background: #305a5e;
    float: left;    
}
#thirdColumn {
    width: 15%;
    height: 150px;
    background: #323e45;
    float: left;    
}

HTML

<div id="three_columns_container">
     <div id="firstColumn">...</div>
     <div id="secondColumn">...</div>
     <div id="thirdColumn">...</div>
</div>

JS

$(document).ready(function () {
    var divRatio = {};
    setRatio('firstColumn');
    setRatio('secondColumn');
    setRatio('thirdColumn');
    $(window).resize(function () {
        fixHeight('firstColumn');
        fixHeight('secondColumn');
        fixHeight('thirdColumn');
    });
    function setRatio(container) {
        var selector = '#' + container;
        divRatio[container] = $(selector).height() / $(selector).width();
    }
    function fixHeight(container) {
        var selector = '#' + container,
            ratio = divRatio[container],
            height = ratio * $(selector).width();
        $(selector).height(height);     
    }
});

answered Dec 25 '11 at 19:43

Minko Gechev

23,174
7
57
66

That's Really a great answer it works very efficient, thanks a lot, but i have a small question, what if i want to put in the background an image url instead of the bg color? i tried it but it doesn't fill the whole height of the div, do you know how? – Bassam Tarek Dec 26 '11 at 15:09
I worked in solution for fixing the background but it's not very stable [there are also differences in the different browsers for detecting the background size (there's also problem if you haven't specified the 'background-size' property)]. The upper script also will not work if the page is zoomed when it's loaded so it's working just when you open the web page with 100% zoom. May be better approach is detecting the zoom level...but just see what a mess is that: http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers – Minko Gechev Dec 26 '11 at 22:59
This just helps in getting the zoom level but actually i tried to look in the codes in order to be able to set the zoom level but i think that this is not possible, do you have any idea how to make this? also i found this plugin i think it will help alot but not with the maximum zoom in: http://methvin.com/splitter/3csplitter.html – Bassam Tarek Dec 27 '11 at 11:51
You can not set the zoom level. You can just check it and set specific size of specific elements which size depend on this zoom level. – Minko Gechev Dec 27 '11 at 18:53
There is a strange thing happens in your script when i need to make the columns start from the top by a margin of 100px for example, the script is ineffective then :s – Bassam Tarek Dec 28 '11 at 10:58
You have to compute the ratio for the margin too. It's similar to the script I've wrote but instead of height use the margin. – Minko Gechev Dec 28 '11 at 19:24

Auto Resizing the height and the width of a web application

2 Answers2