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 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    83
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Javascript Screwed Up My Divs

    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?

    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 2008
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post
    maybe in your css

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

    seems not that difficult,...
    Last edited by WA; 08-29-2008 at 01:53 AM.

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    83
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by stevenx View Post
    maybe in your css

    #content{
    position:absolute;
    topx)px;
    heightx)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
    Last edited by NeoMoon; 08-29-2008 at 03:16 AM.

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    26
    Thanks
    0
    Thanked 1 Time in 1 Post
    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 .

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    83
    Thanks
    8
    Thanked 0 Times in 0 Posts
    I have the </head> and <body> tags, and adding the DOCTYPE totally screwed up the pages for some reason. :-P

    Thanks,
    NeoMoon
    Last edited by NeoMoon; 08-30-2008 at 09:11 PM.

  • #6
    New Coder
    Join Date
    Aug 2007
    Posts
    83
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

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