• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 416
  • Last Modified:

how to customize <div> height

hi experts,

How can I customize <div> height ???

<div style="overflow:auto;width:200px;height:275px;">
..
//display records
..
</div>

I want my <div> height to be 600px when Monitor Resolution is (800 x 600)
and
I want my <div> height to be 768px when Monitor Resolution is (1024 x 768)
or
bascially default to 600px and according to monitor resolution set that height.

thx,
PH
0
princehyderabad
Asked:
princehyderabad
  • 5
  • 4
1 Solution
 
Pravin AsarCommented:
<html>
<head>
<title>Set Height of Div on page load</title>
<script language="javascript">
function getDivHeight () {
var ht = parseInt (window.screen.height);
var wt = parseInt(window.screen.width);
var dht = ht;
if (ht >= 768) { dht = 768; }
else if (ht >= 600) { dht = 600;}
return dht;
}
function setDivHeight () {
var dObjs = document.getElementByTagName ('DIV');
for (dx=0; dx < dObjs.length; dx++) { dObjs[dx].style.height = getDivHeight(); }
}
</script>
<body onload="setDivHeight();">
<div id="div1">Height is set based on screen resolution</div>
<div id="div2">Height is set based on screen resolution</div>
</body>
</html>
0
 
princehyderabadAuthor Commented:
Firefox Error: document.getElementByTagName is not a function
IE error: Object doesn't support this property or method.

0
 
Pravin AsarCommented:
Sorry for the typo

It should be

getElementsByTagName

missing s

Do you want to apply this as global style to all divs or only to a few ??




0
Technology Partners: 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!

 
princehyderabadAuthor Commented:
Even after correcting type it didnt worked. I mean no JS error nor proper output.
what I;m excepting is when <div> ... </div> goes more then page screen hieght display it should show scroll next to menu. But instead its showing regular scroll at right side of browse.

>>Do you want to apply this as global style to all divs or only to a few ??
Only to the Left Menu section. ie only to 1 <div>
0
 
princehyderabadAuthor Commented:
EVEN renamed <div id="DIV" > to see changes but still not
0
 
Pravin AsarCommented:
This has been tested code..


<html>
<head>
<title>Set Height of Div on page load</title>
<script language="javascript">
function getDivHeight () {
var ht = parseInt (window.screen.height);
var wt = parseInt(window.screen.width);
var dht = ht;
if (ht >= 768) { dht = 768; }
else if (ht >= 600) { dht = 600;}
return dht;
}
function setDivHeight () {
var dObjs = document.getElementsByTagName ('DIV');
alert (dObjs.length);
for (dx=0; dx < dObjs.length; dx++)
{
dObjs[dx].style.height = getDivHeight();
}
}
</script>
<body onload="setDivHeight();">
<div id="div1">Height is set based on screen resolution</div>
<div id="div2">Height is set based on screen resolution</div>
</body>
</html>
0
 
princehyderabadAuthor Commented:
Still didnt worked. But I added style code
<div id="DIV1" style="overflow:auto;"> and it worked now.

How about if I want to make this effect only to one of my <div> not all in that case ??
I tried : document.getElementsByTagName ('DIV1');
..
<div id="DIV1"
didnt worked ??
0
 
Pravin AsarCommented:

If you want for a particular div then we need to use getElementById


function setDivHeight (divIdx) {
var dObj = document.getElementById(divIdx);
if (!dObj) { return ; }
dObj.style.height = getDivHeight();
}

<body onload="setDivHeight('div1');">
<div id="div1" style="overflow:auto;">This is div 1<div>
0
 
princehyderabadAuthor Commented:
Thanks it worked !! "o)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now