Setting Column Widths using Javascript

Question

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

So you have an element which ID is body? Seems strange, maybe you wanted to refer to document.body? — Niccolò Campolungo
– Niccolò Campolungo, Commented Jul 20, 2013 at 10:08
i removed the ' type=javascript ' and added a document.write("hello"). it was printed — Maniac
– Maniac, Commented Jul 21, 2013 at 17:46

sabof · Accepted Answer · 2013-07-21 18:09:24Z

2

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

edited Jul 21, 2013 at 18:09

answered Jul 20, 2013 at 9:55

sabof

8,2024 gold badges32 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sabof Over a year ago

I've updated the answer. If you were to post a link to the page, or a fiddle, it would be a lot easier for people to help you.

Niccolò Campolungo · Accepted Answer · 2013-07-20 10:22:44Z

0

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.

answered Jul 20, 2013 at 10:22

Niccolò Campolungo

12k4 gold badges35 silver badges40 bronze badges

4 Comments

Maniac Over a year ago

can u explain mein the condition in the for loop. i dont knw what it means

Maniac Over a year ago

have you defined a array and are using a foreach loop?

Maniac Over a year ago

i tried using it. but it didnt work. is there any way i can send u the code m typing?

Niccolò Campolungo Over a year ago

Not without showing it to everyone. There is jsfiddle.net if you need to make a fiddle(or jsbin). Are you calling the function size() correctly?

Jahanzeb Khan · Accepted Answer · 2013-07-20 10:53:58Z

0

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

width: 75%;

answered Jul 20, 2013 at 10:53

Jahanzeb Khan

4404 silver badges17 bronze badges

3 Comments

Maniac Over a year ago

width 75% of what? i have to take some value so that its percentage is defined. and that is why i'm trying to take the value as the brower width

Jahanzeb Khan Over a year ago

if the div is a child of something, its width will be according to its parent, so if the parents width is the size of the browser, then it would work, you didn't post your html

Maniac Over a year ago

yes. thats my ques. how to set the parent width equal to the size of the browser!

Collectives™ on Stack Overflow

Setting Column Widths using Javascript

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related