CODEWITHSUNDEEP
javascriptcss
Maniac
Maniac

Reputation: 1

Setting Column Widths using Javascript

I'm Trying to Figure out how to set column widths and heights using javascript so that i can set them according to the browser window. i figured the following code. but its not working. please help

<script type="javascript">
function size()
{
                    document.getElementById("body").style.width=window.innerWidth;
document.getElementById("body").style.height=window.innerHeight;
var width=document.getElementById("body").style.width;
var height=document.getElementById("body").style.height;

document.getElementById("header").style.height=(.15*height);
document.getElementById("loginbox").style.height=(.15*height);
document.getElementById("navigation").style.height=(.05*height);
document.getElementById("leftpanel").style.height=(.70*height);
document.getElementById("contentarea").style.height=(.75*height);
document.getElementById("addcolumn").style.height=(.75*height);
document.getElementById("footer").style.height=(.10*height);

document.getElementById("header").style.width=(.75*width);
document.getElementById("loginbox").style.width=(.25*width);
document.getElementById("navigation").style.width=(width);
document.getElementById("leftpanel").style.width=(.20*width);
document.getElementById("contentare").style.width=(.65*width);
document.getElementById("addcolumn").style.width=(.15*width);
document.getElementById("footer").style.width=(width);
}    
</script>

i use css to float the columns according to requirement. and then i'm calling the function size() in body ( onload=size() )

but not working

Upvotes: 0

Views: 2529

Answers (3)

sabof
sabof

Reputation: 8192

style attributes are strings and need a unit in the end:

document.getElementById("addcolumn").style.width=(width + "px");

Chances are you've also need to set width and height as: 

var width = window.innerWidth;
var height = window.innerHeight

Upvotes: 2

Jahanzeb Khan
Jahanzeb Khan

Reputation: 440

Why not use simple css, make the width a percentage,

width: 75%;

Upvotes: 0

Niccol&#242; Campolungo
Niccol&#242; Campolungo

Reputation: 12042

I would suggest a different way to accomplish this, which will be easily mantainable:

function size() {
    var props = {
        header: {
            width: .75,
            height: .15
        },
        loginbox: {
            width: .25,
            height: .15
        },
        navigation: {
            width: 1,
            height: .05
        },
        leftpanel: {
            width: .2,
            height: .7
        },
        contentarea: {
            width: .65,
            height: .75
        },
        addcolumn: {
            width: .15,
            height: .75
        },
        footer: {
            width: 1,
            height: .1
        }
    },
        bodyElement = document.getElementById('body'),
        width = bodyElement.style.width = window.innerWidth,
        height = bodyElement.style.height = window.innerHeight;

    for (var id in props) {
        if (!props.hasOwnProperty(id)) continue;
        var element = document.getElementById(id),
            prop = props[id];
        element.width = (width * prop.width) + "px";
        element.height = (height * prop.height) + "px";
    }
}

Note: I haven't tested it, but it should work.

Upvotes: 0

Related Questions