?
Solved

resize div overlay

Posted on 2008-11-11
1
Medium Priority
?
554 Views
Last Modified: 2012-05-05
how to resize div overlay, so it detects the size of main window (browser) and determine or set the position of overlay either goes up or down.
0
Comment
Question by:johndenny
1 Comment
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 2000 total points
ID: 22943354
Here is a comprehensive example, which anchors the div to top , bottom and adjusts the middle one accordingly
based on the window size.

The Page listens to  onload and onresize events


<html>
<head>
<title>Set Height of Div on page load and resize-Pravin Asar</title>
<script language="javascript">
function GetWindowSize()
{
    this.width = 0;
    this.height =0;
    var myWidth=800;
    var myHeight=600;
	if( typeof( window.innerWidth ) == 'number' ) {
		//Non-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	}
	//IE 6+ in 'standards compliant mode'
	else if( document.documentElement &&
		  (document.documentElement.clientWidth || 
           document.documentElement.clientHeight )) {
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	}
	//IE 4 compatible
	else if( document.body && 
             ( document.body.clientWidth || document.body.clientHeight ) ) {
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
 
    this.width = myWidth;
    this.height = myHeight;
    return (this);
}
 
function GetScreenSize () {
	this.width = window.screen.width;
	this.height = window.screen.height;
}
 
function setDivHeight () {
var ws = new GetWindowSize();
var ss = new GetScreenSize();
var hHt = 100;
var fHt = 50;
var dObj;
dObj = document.getElementById ('header');
dObj.style.width = ws.width;
dObj.style.height = hHt;
dObj = document.getElementById ('content');
dObj.style.width = ws.width;
dObj.style.height = ws.height - (hHt) - (fHt);
dObj = document.getElementById ('footer');
dObj.style.width = ws.width;
dObj.style.height = (fHt);
}
</script>
<body onload="setDivHeight();" onresize="setDivHeight();">
<style type="text/css">
* {margin: 0px;
padding: 0px;
}
</style>
<div style="background-color: #FF9933;" id="header">HEADER</div>
<div style="background-color: #33DD99;" id="content">CONTENT</div>
<div style="background-color: #4499dd;" id="footer">FOOTER</div>
</body>
</html>

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question