Javascript Screwed Up My Divs

NeoMoon

08-28-2008, 11:33 PM

Okay, here's the problem: My divs were not equal in height, so I looked up a javascript function to fix that. I came up with this:
function matchHeight(){
var divs,contDivs,maxHeight,divHeight,d;
// get all <div> elements in the document
divs=document.getElementsByTagName('div');
contDivs=[];
// initialize maximum height value
maxHeight=0;
// iterate over all <div> elements in the document
for(var i=0;i<divs.length;i++){
// make collection with <div> elements with class attribute 'container'
if(/\bcontainer\b/.test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for <div> element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container <div> elements
for(var i=0;i<contDivs.length;i++){
contDivs[i].style.height=maxHeight;
}
}
// execute function when page loads
window.onload=function(){
if(document.getElementsByTagName){
matchHeight();
}
}

The problem is, since one of the divs I need to extend starts off a little bit from the top of the page that div is still longer than the other that extends the whole page. To see what I mean, go here: http://neo-moon.com/ (Don't mind the multiple announcements, I just made those to test this out. :-P)

Any ideas as to what I could add to the function to fix this, or something in the CSS if it's possible?

The div's name that is not extending far enough is "content", by the way. :-P

Thanks in advance,
NeoMoon

PS: I know I posted this in the HTML/CSS forum, but I figured out this might be more suitable for my actual question. :S

stevenx

08-29-2008, 12:46 AM

maybe in your css

#content{
position:absolute;
top:(x)px;
height:(x)px;
}

seems not that difficult,...

NeoMoon

08-29-2008, 01:54 AM

maybe in your css

#content{
position:absolute;
top:(x)px;
height:(x)px;
}

seems not that difficult,...
Thanks for the response, but I don't see how that would help. If I change the top, it will just make the div not cover the whole page; it will only cover from where it is from the top. If I set the height, I don't see how that will help as the javascript bases how far the div has to extend on the height of the longest div.

Thanks in advance,
NeoMoon

stevenx

08-29-2008, 07:40 AM

well that might be because i don't exact understand your problem,
is it only the height of one div with .container ?, briefly looked
at your site just now..

Maybe its for the best to first add a few tags you seem to miss
</head>
<body> ??
couldn't find them ..

then check the whole thing, maybe its fixed then already,

maxheight is also a css thing, and a doctype definition would be
for the better also.

If all this won't help, please explain why you wan't to use js to fix
this .

NeoMoon

08-29-2008, 08:45 PM

I have the </head> and <body> tags, and adding the DOCTYPE totally screwed up the pages for some reason. :-P

Thanks,
NeoMoon

NeoMoon

08-30-2008, 08:12 PM

Is there anything I could add to the Javascript, something like: var contentHeight = document.content.style.height;
document.content.style.height = contentHeight + 400;

Something along those lines to just even them out?