Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    83
    Thanks
    8
    Thanked 0 Times in 0 Posts

    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

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    83
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Somebody must have a solution. :-P


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •