Javascript that lets my div grow/shrink as i resize a DIV and/or browser

What would the javascript look like on a div that I wanted to resize to the height of the browser window as it grew and shrunk?  I put 100% on the width for the div and that works for the width issue.  But having a devil of a time getting the height to do the same thing?

Thanks for any advice, example code you can provide.

Ricardo
dgintz1217Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ftaco96Commented:
Try this...
var timerId = 0;
function resizeBox() {
    if (timerId != 0) {
        window.clearTimeout(timerID);
        timerId = 0;
    }    
    timerId = window.setTimeout("doResize()", 250);
}

function doResize() {
    var bodyHeight = document.body.clientHeight;
    document.getElementById("yourDIVIdHere").style.height = (bodyHeight - 10).toString() + "px";
}


window.onresize = resizeBox;

Open in new window

0
dgintz1217Author Commented:
Going to try this solution today.
thanks
0
dgintz1217Author Commented:
ftaco96,

where would i put this javascript, in the <body> tag where the div is?

ricardo
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

dgintz1217Author Commented:
I got this:

var bodyHeight = document.body.clientHeight;


I need to know the window height, not the document body

how do i get that?

i tried this:

var bodyHeight = window.clientHeight;

that gives me "undefined"
0
dgintz1217Author Commented:
Someone posted this info (javascripter.net):

Question: How do I get the browser window size?

Answer: To determine the actual size of the browser window, use the following properties:

in Netscape Navigator 4:
window.innerWidth, window.innerHeight
in Microsoft Internet Explorer:
document.body.offsetWidth, document.body.offsetHeight
Note that the code that uses document.body.offsetWidth and document.body.offsetHeight must be executed after the browser has parsed the <BODY> tag.

So how do I get this code to execute OUTSIDE the <body> tag? I need to have my resize javascript execute when someone resizes the browser window.

Here's my code:

var timerId = 0;
function resizeBox() {
    if (timerId != 0) {
        window.clearTimeout(timerId);
        timerId = 0;
    }    
    timerId = window.setTimeout("doResize()", 1250);
}

function doResize() {
    var bodyHeight = document.body.clientHeight;
    document.getElementById("iframe_calendar").style.height = (bodyHeight - 200).toString() + "px";

}
window.onresize = resizeBox;

===================
When I resize, the clientWidth DOES give the right value, but the clientHeight always stays at 94, regardless of what i resize the window to.

BTW, it DOES work in firefox - the height/width are correct (using innerHeight)
0
dgintz1217Author Commented:
Wow, no one answers on this?  bummer.  Anyway, I paid someone in rent-a-coder.com to solve this for me.  Here's some free (for the rest of you) advice on IE8 Div resize height:

Remove this from your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Removing the DOCTYPE statement solved my problem.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ftaco96Commented:
Sorry I couldn't follow up with you on this one. I've been away from work for a bit.
Are you still using the resizeBox() code, or did you not need that after taking out the DOCTYPE statement?
0
dgintz1217Author Commented:
Actually the resize worked only after I took out the !DOCTYPE statement.  As it turns out, this is a very specific IE8 problem.  And really worth having someone put this in the knowledge base - I could not find this here or on Google - just got lucky with this one guy :)

I appreciate ya'lls help though!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.