Log in

View Full Version : Looking for script


Nasso
11-02-2006, 10:11 AM
Something like this...

<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. :confused:
jscheuer1
11-02-2006, 10:20 AM
<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
<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
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
<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
<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
<!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>