[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 717
  • Last Modified:

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
0
dgintz1217
Asked:
dgintz1217
  • 6
  • 2
1 Solution
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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
 
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now