asked on

Manipulate the height of a div using the screen resolution

Hello experts.
I want to set the height of a pop-up div depending the height of the screen.
Any help to get the 2/3 height for my div with class popdivheight
The pop updiv:
<div style="border: 1px solid #CCC;overflow: scroll;" class="popdivheight">
</diV>

HainKurt

try this

<div style="border: 1px solid #CCC;overflow: scroll;" class="popdivheight"></div> 

<script type='text/javascript'>
var winW;
var winH;
function getWH(){
	if (parseInt(navigator.appVersion)>3) {
	 if (navigator.appName=="Netscape") {
	  winW = window.innerWidth;
	  winH = window.innerHeight;
	 }
	 if (navigator.appName.indexOf("Microsoft")!=-1) {
	  winW = document.body.offsetWidth;
	  winH = document.body.offsetHeight;
	 }
	}
	alert (winW +" x "+winH);
}

</script> 
<body onload="getWH()" onresize="getWH()">
</body>

Open in new window

Panos

ASKER

Hi Hainkurt.
Thank you for your code but I don't know how to use this.
I found another tutorial that is handling the width checking the screen.width and than setting the style:
<script LANGUAGE="JavaScript" type="text/javascript">
if(screen.width < 801) {
document.write('<style>.popdivheight {width: 100%;}</style>');
}

if(screen.width > 800) {
document.write('<style>.popdivheight {width: 85%;}</style>');
}
</script>

Can you use something like this to set the height?

HainKurt

check this sample code

<script type='text/javascript'>
function setWH(){
	var myDiv = document.getElementById("myDiv");
	myDiv.style.height=screen.height * 2/3;
	myDiv.style.width=screen.width * 1/2;
}

</script> 
<body onload="setWH()">
<div id=myDiv style="width:600; height:300; border:1px solid red; float:left">HainKurt</div>
</body>

Open in new window

Panos

ASKER

Can you plase use class instead of id?

Panos

ASKER

Sorry.
The id is no problem.I will check this.One moment please

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

above sample is changing the style of .myDiv width and height on body load... all elements with that class will be affected :) I hope you have all the tools right now...

Panos

ASKER

It seems it is not working Hainkurt.
1. Because i will use it in more than one div i will need to handle this using the class tag.
2. I did delete the width and height of the style but the div still is not getting the width and height from the script.

Panos

ASKER

I lost your last post.I wll check it now

Panos

ASKER

OK .
It is working fine.Thank you for your help!!!

Panos

ASKER

Thank you for your help.
Regards
Panos