Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

set height of element dynamicly

Status
Not open for further replies.
mrsbean

mrsbean

Technical User
Jul 14, 2004
203
US
I'm stumbling around in javascript because i couldn't seem to get where I wanted to go in CSS.

I want to size a division tag so that the height of the element varies depending on the size of the browser. I'm not concerned about the size of the view (the user may have the window partially minimized, but I don't care). I want to make the main box bigger if the screen is bigger.

It doesn't work. I have been tinkering with a variable (thisHeight). Let's say that other elements on the page will take up at least 400 px. I want the division tag to be sized based on the height of the screen - 400 px. It doesn't work yet.

Code: 
<script>

var thisHeight
thisHeight = screen.height
thisHeight = screen.height-400

document.getElementById('mainbody').style.height=thisHeight+'1px'

</script>
<div id="mainbody">
&nbsp;
 </div>


All help is appreciated,

MrsBean
 
Sort by date Sort by votes
mrsbean, this should get you started, copy/paste into a new html file and study how it works in IE and Firefox - play around with the code to get it to do what you want:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>title test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

window.onload = resizeTheDiv;
window.onresize = resizeTheDiv;

function resizeTheDiv() {
   if (window.innerWidth) {
      var w = window.innerWidth;
      var h = window.innerHeight;
   }
   else {
      var w = document.documentElement.offsetWidth;
      var h = document.documentElement.offsetHeight;
   }
   w = (w < 200) ? 0 : w - 200;
   h = (h < 200) ? 0 : h - 200;
   var theDiv = document.getElementById("theDiv");
   theDiv.style.width = w + "px";
   theDiv.style.height = h + "px";
}

</script>
<style type="text/css">

div#theDiv {
   background-color:#0000aa;
   border:5px solid #ff0000;
}

</style>
</head>
<body>
<div id="theDiv"></div>
</body>
</html>

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
uncle_rico_thumb.jpg
 
Upvote 0 Downvote
Thanks kaht. I still think its funny that kaht is advertising dogs :0)

I'm much closer. The problem at the moment is that it doesn't work when the page loads. I have cut part of my code out in order to simplify. Can you tell my what I can do toget it to load on page load?

Code: 
<script type="text/JavaScript">
<!--

function resizeTheDiv() {
   if (window.innerHeight) {
      var h = window.innerHeight;
   }
   else {
      var h = document.documentElement.offsetHeight;
   }
   h = (h < 100) ? 0 : h - 100;
   var theDiv = document.getElementById("theDiv");
   theDiv.style.height = h + "px";
}

function resizeLeftNav() {
   if (window.innerHeight) {
      var h = window.innerHeight;
   }
   else {
      var h = document.documentElement.offsetHeight;
   }
   h = (h < 80) ? 0 : h - 80;
      var LeftNav = document.getElementById("LeftNav");
   LeftNav.style.height = h + "px";
}

window.onLoad = resizeTheDiv;
window.onresize = resizeTheDiv;
window.onLoad = resizeLeftNav;
window.onresize =resizeLeftNav;

//image swap script cut for brevity's sake

</script>

<body onLoad="MM_preloadImages('images/index_03_ro.gif','images/index_08_ro.gif','images/LatestNews_ro.gif','images/NewProduct_ro.gif','images/Specials_ro.gif','images/OrderCatalog_ro.gif','images/AboutUs_ro.gif','images/Links_ro.gif','images/blankButton_ro.gif','images/Products_ro.gif','images/Services_ro.gif','images/Support_ro.gif','images/Legal_ro.gif','images/left_nav1_01.gif','images/left_nav1_02.gif','images/left_nav1_03.gif','images/left_nav1_04.gif','images/left_nav1_05.gif','images/left_nav1_06.gif','images/left_nav1_07.gif'), resizeTheDiv, resizeLeftNav">

I've tried a few things, and haven't gotten it to work yet. It will work if I resize the window, but when the window is refreshed, the elements don't get sized appropriately.

MrsBean
 
Upvote 0 Downvote
javascript is case sensitive

Observe the difference between my working example (onload) and your non-working example (onLoad) and I'm sure you'll spot the culprit [smile]

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
uncle_rico_thumb.jpg
 
Upvote 0 Downvote
mrsbean, did this solve your issue?

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
uncle_rico_thumb.jpg
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
1K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
689
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
641
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
584
coldbohemia
coldbohemia
zydjohn
  • Locked
  • Question
How to load JavaScript files to enable DOM element click
Replies
1
Views
177
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top