Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-07-2008, 01:12 AM   PM User | #1
NeoMoon
New Coder

 
Join Date: Aug 2007
Posts: 83
Thanks: 8
Thanked 0 Times in 0 Posts
NeoMoon is an unknown quantity at this point
Javascript and Equal Div Heights

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:

Code:
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? Something like "var contentHeight = document.content.style.height;
document.content.style.height = contentHeight + 400;"? << I tried that, but it didn't work. :-P

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
NeoMoon is offline   Reply With Quote
Old 09-10-2008, 10:27 PM   PM User | #2
NeoMoon
New Coder

 
Join Date: Aug 2007
Posts: 83
Thanks: 8
Thanked 0 Times in 0 Posts
NeoMoon is an unknown quantity at this point
Somebody must have a solution. :-P
NeoMoon is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:17 PM.


Advertisement
Log in to turn off these ads.