Looking for script

**Nasso** · 11-02-2006, 10:11 AM

Something like this...

HTML Code:

<div id="holder" style="width: 750px; height: 500px;">
 <div id="head" style="width: 750px;">
  head
 </div>
 <div id="content" style="overflow: auto; width: 750px;">
  content
 </div>
</div>

Head and Content are dinamicly loaded via ajax. The problem is when in the head is loaded longer text it wraps in 2 lines and content move down and the holder increase its height. I want Content to fill the remaining height on 100% but without resizing the holder. Please help.

**jscheuer1** · 11-02-2006, 10:20 AM

HTML Code:

 <div id="head" style="width: 750px;">
  head
 </div>
<div id="holder" style="width: 750px; height: 500px;">
 <div id="content" style="overflow: auto; width: 750px;">
  content
 </div>
</div>

**Nasso** · 11-02-2006, 10:24 AM

Originally Posted by jscheuer1

HTML Code:

 <div id="head" style="width: 750px;">
  head
 </div>
<div id="holder" style="width: 750px; height: 500px;">
 <div id="content" style="overflow: auto; width: 750px;">
  content
 </div>
</div>

I want all div-s to be 500px height

**jscheuer1** · 11-02-2006, 07:25 PM

Originally Posted by Nasso

I want all div-s to be 500px height

It is hard to hit a moving target. To literally do that, just give them all the height:500px style. I don't think you meant that though. Consider this -

If a division has height and width defined and has more content than its dimensions will fit, that content must overflow the division. In IE, the division can grow to accommodate the extra content, all other browsers show the content outside the borders of the division. One can institute scrolling as a way to confine this extra content or simply make it so any extra stuff simply isn't seen. There is no way to add more content to a division than it will hold and not have something change as a result.

That's one thing to think about. Another is that, with dynamic content, any reference to percentages as regards size is rather meaningless because, as content changes, the benchmark of the actual size that any given % figure would represent changes. This fact can be made to work for you but, only if you are willing to let the size of containers change with their content.

**Nasso** · 11-03-2006, 08:03 AM

Code:

<script type="text/javascript">
document.getElementById('head').onresize = resize;
function resize(){
 document.getElementById('content').style.height = 500 - document.getElementById('head').offsetHeight;
 document.getElementById('content')..style.overflow = 'auto';
}
setTimeout('resize();', 0);
</script>

I need firefox support for this script

**Nasso** · 11-03-2006, 08:50 AM

Code:

<script type="text/javascript">
document.getElementById('head').onresize = resize;
document.onmousemove = resize;
function resize(){
		document.getElementById('content').style.height = 500 - document.getElementById('head').offsetHeight + 'px';
}
setTimeout('resize();', 0);
setInterval('resize();', 5);
</script>

enjoy

**jscheuer1** · 11-03-2006, 09:05 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#holder, #head, #content {
width:750px;
}
#content {
overflow:auto;
border:1px solid black;
}
</style>
<script type="text/javascript">

function resize(){
document.getElementById('content').style.height = 500 - document.getElementById('head').offsetHeight + 'px';
}

function pollH(){
if (document.getElementById('head').offsetHeight!==hh){
hh=document.getElementById('head').offsetHeight;
resize();
}
}
function onload_function(){
resize();
hh=document.getElementById('head').offsetHeight;
setInterval("pollH()", 60);
}
if ( typeof window.addEventListener != "undefined" ){
var hh;
    window.addEventListener( "load", onload_function, false );
}
else
onload=function(){resize();document.getElementById('head').onresize=resize;}
</script>

</head>
<body>
<div id="holder">
 <div id="head">
  head
 </div>
 <div id="content">
  content
 </div>
</div>
</body>
</html>

Thread: Looking for script

Thread Tools

Search Thread

Looking for script

Bookmarks

Bookmarks

Posting Permissions