Javascript for page layout [Archive]

Onika Staas

08-09-2005, 05:53 PM

Hi, I am CSS and Javascript newbie and currently trying to build a website where I want the footer to start where ever the longest column ends.

Can someone please have a look at the following script and let me know, where I am going wrong and if I need to insert this in my template, in my CSS sheet or in each individual page, as my footer who is on "hidden" in my CSS style sheet, does not appear, when I load the index page!

// JavaScript Document
<skript type="text-javascript">
function adjustLayout()
{
// Ermittle die tatsaechlichen Hoehenwerte
var cHeight = xHeight ("main_content");
var cHeight = lHeight ("infofield_content");

//Ermittle den groessten Hoehenwert
var maxHeight = Math.max(cHeight, Math.max(lHeight));

// Weise den groessten Hoehenwert allen Spalten zu
xHeight("main", maxHeight);
xHeight("infofield", maxHeight);

// Zeige die Fusszeile and
xShow("border_low");
xShow("footer");
}

window.onload = function ()
{
xAddEventListener(window, "resize", adjustLayout, false);
}
</skript>

Thank you so much for your help!

Onika

vwphillips

08-09-2005, 06:49 PM

Just a thought

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Footer(){
if(document.all){
eles=document.all;
}
else {
eles=document.getElementsByTagName('BODY')[0].getElementsByTagName('*');
}
ftobj=document.getElementById('fred');
ft=0;
for (i=0;i<eles.length;i++){
if (eles[i].offsetTop){
if (eles[i].offsetTop+eles[i].offsetHeight>ft){
ft=eles[i].offsetTop+eles[i].offsetHeight
}
}
}
ftobj.style.top=(ft+10)+'px';

}
/*]]>*/
</script></head>

<body onload="Footer();">
<div style="position:absolute;top:20px;left:20px;width:200px;height:200px;background-color:red;" ></div>
<div style="position:absolute;top:20px;left:320px;width:200px;height:350px;background-color:blue;" ></div>
<div id="fred" style="position:absolute;top:20px;left:0px;width:400px;height:100px;background-color:yellow;" ></div>
</body>

</html>