...

View Full Version : Auto resize DIV in Javascript - see example #Newbie help#



monkey64
02-04-2007, 08:34 AM
Hi there

I'm a newbie to Javascript, so bear with me!

am attempting to make a DIV resize automatically using Javascript.
Why you ask?

Well, I have a CSS driven website: http://www.realbabyguide.co.uk/ which has left, right and centre sections. Unless the middle section is populated with enough content, the lower border crashes into the left and right sections. I want to control the DIV height of the main section.

I have written the code and it works in IE7, but not in Firefox.
Removing the Doctype enables it to run in FF.
I validated the code and it passed.

Here it is in action: http://www.realbabyguide.co.uk/div%20heights.html

I suspect my code is at fault...
Any ideas?
Thanks



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>A Test</title>
<style type="text/css">
body
{
background-color:#00CCFF;
}

.outer
{
font-size: 16px;
background-color:#00CC00;
padding: 10px;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #cc0000;
}
#inner
{
font-size: 16px;
background-color:#CC6633;
padding: 10px;
width: 50%;
border-width: 1px;
border-style: solid;
border-color: #cc0000;
}

</style>

</head>
<body>
<script language="javascript" type="text/javascript">
function getOff()
{
x = document.getElementById('inner');
return x.offsetHeight;
}
function changeOff(amount)
{
amount = 600-getOff();
var y = getOff();
x.style.height = y + amount;
}
</script>

<div class="outer">
<div id="inner">

<h1>This script resizes my "inner" DIV height to 600px - the current height.</h1>

<p>However, although it works in IE7 (haven't tried other IE versions), it will not work in Firefox (2.0.0.1).<br />
Removing the Doctype enables it to work in Firefox, but screws up IE7 as it renders the page in Quirks mode.<br />
The page
<a href="<A href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a">http://validator.w3.org/check?uri=http%3A%2F%2Fwww.realbabyguide.co.uk%2Fdiv%2520heights.html">validates.</a>
</a>
<br />
Any ideas?
</p>

</div><!-- Close inner DIV -->

</div><!-- Close outer DIV -->
<a href="javascript:changeOff()">Click here and the DIV should resize</a>
</body>

vwphillips
02-04-2007, 12:06 PM
x.style.height = y + amount+'px';

monkey64
02-04-2007, 05:16 PM
Vwphillips, thanks a million, you sorted it out!
It's so helpfull to have a forum like this, thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum