SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot BoomPop's Avatar
    Join Date
    Aug 2001
    Location
    Missouri, USA
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grab Center Column Height --> Force Left Column Same Height?

    As the title suggests, I want to grab the height of the center column and force my left and right columns to be the same height.

    The bit of code below is from MyWebTronics, and it's great (awesome job, Jason!)... but it is designed to grab the tallest column (regardless which one it is) and then set all the rest to the that same size.
    Code JavaScript:
    <script language="javascript" type="text/javascript">
        fixHeight=function(){ 
            var divs,contDivs,maxHeight,divHeight,d; 
            maxHeight=0; 
            contDivs=[]; 
            divs=document.getElementsByTagName('div');        // get all <div> elements in the document 
            for(var i=0;i<divs.length;i++){                // for all divs...
                if(/\bfixheight\b/.test(divs[i].className)){    // find those with the class attribute 'fixheight'...
                     d=divs[i]; 
                     contDivs[contDivs.length]=d; 
                     // determine their height, defined as either offsetHeight or pixelHeight
                     if(d.offsetHeight){ divHeight=d.offsetHeight; }
                     else if(d.style.pixelHeight){ divHeight=d.style.pixelHeight; } 
                     // Keep track of the largest div height
                     maxHeight=Math.max(maxHeight,divHeight); 
                } 
            } 
            // assign all divs the height of the tallest div
            for(var i=0;i<contDivs.length;i++){ 
                contDivs[i].style.height=maxHeight + "px"; 
            } 
        } 
        // Run fixheight on page load 
        window.onload=function(){ 
            if(document.getElementsByTagName){ fixHeight(); } 
        }
        // ]]>
    </script>
    In my case, I always want the center column to define the height for the left & right columns. SO... this means

    (1) I need to wrap my center column with <div class="fixheight"></div>.
    (2) I need to modify the portion below so that it will write my side columns (wrapped with <div class="sideheight"></div>) to the same height.
    Code JavaScript:
           // assign all divs the height of the tallest div
            for(var i=0;i<contDivs.length;i++){ 
                contDivs[i].style.height=maxHeight + "px"; 
            }
    That's why I'm here... Javascript is not my specialty at all, and I'm hoping someone can help me rework this to write the sideheight style instead of fixheight.

    Please let me know if I'm not making sense. Thanks!!!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    While the scripting for this is quite impressive, a much easier way is to set the left and right columns to be absolutely positioned, so that you can set the bottom to 0;

    See:
    http://24ways.org/2008/absolute-columns
    http://www.webdesign.org/web/html-an...ing.16719.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot BoomPop's Avatar
    Join Date
    Aug 2001
    Location
    Missouri, USA
    Posts
    143
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for that. However your suggestion will not work in my situation. I really need a Javascript solution for this.

    BTW... I've just finished reading your splendid article: http://24ways.org/2008/absolute-columns. Excellent.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Your page has some serious HTML markup issues that may get in the way of success.

    You would do well to fix the worst validation errors that your page has.

    For example, it has no HEAD starting tag!

    And look at this horror show. Something is really wrong here:

    Code javascript:
    	fixHeight=function(){ 
    		// Declare and initialize variables
    		var divs,contDivs,maxHeight,divHeight,d; 
    		maxHeight=0; 
    		contDivs=[]; 
    		divs=document.getElementsByTagName('div');		// get all <div> elements in the document 
    		for(var i=0;i<divs.length;i++){				for// all divs... if(
    			\bfixheight\b/.test(divs[i].className)){/find	// those with the class attribute fixheight'... 'd
    				 contDivs[contDivs.length]=d; 
    				 determine= 
    				 their// height, defined as either offsetHeight or pixelHeight if(d.offsetHeight){ divHeight
    				 } else= if(d.style.pixelHeight){
    				 divHeight } Keep= track 
    				 // of the largest div height maxHeight }
    				 }= 
    			assign 
    		all 
    		// divs the height of the tallest div for(var i
    		contDivs[i].style.height += 
    			px";= } "} 
    		Run 
    	fixheight 
    	// on page load window.onload if(document.getElementsByTagName){ 
    	fixHeight();= 
    		} } ]] 
    	// >
    Last edited by Dan Schulz; Jan 19, 2009 at 05:20. Reason: removed inappropriate remark
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Javascript is at the mercy of html and the web browser. It is not possible for javascript to work properly when either is inconstant.

    You will require two updates for you script. You want the centre column to dictate the height of the side columns, so this code will change quite a bit:

    Code javascript:
    for (var i = 0; i < divs.length; i++) {                // for all divs...
        if (/\bfixheight\b/.test(divs[i].className)) {    // find those with the class attribute 'fixheight'...
            d = divs[i]; 
            contDivs[contDivs.length] = d; 
            // determine their height, defined as either offsetHeight or pixelHeight
            if (d.offsetHeight) {
                divHeight = d.offsetHeight;
            } else if (d.style.pixelHeight) {
                divHeight = d.style.pixelHeight;
            } 
            // Keep track of the largest div height
            maxHeight = Math.max(maxHeight, divHeight); 
        } 
    }

    The above code is performing two tasks, one to keep track of the divs with a fixheight class, and two, to figure out which one has the highest height. You want another couple of things done with it now, to to track the centre column height (which I presume is the content), and to add the divs with a class name of sideheight to the contDivs array.

    You haven't said if the sideheight elements will have the fixheight class name on them. So just in case, the below code should check for the sideHeight class name as well.

    Code javascript:
    var contentHeight;
    for (var i = 0; i < divs.length; i++) {                // for all divs...
        if (/\bfixheight\b/.test(divs[i].className) || /\bsideheight\b/.test(divs[i].className)) {    // find those with the class attribute 'fixheight' or 'sideheight'
            d = divs[i]; 
            contDivs[contDivs.length] = d;
            if (/\bfixheight\b/.test(d.className) {
                // determine their height, defined as either offsetHeight or pixelHeight
                if (d.offsetHeight){
                    divHeight = d.offsetHeight;
                } else if (d.style.pixelHeight) {
                    divHeight = d.style.pixelHeight;
                }
                // Keep track of the largest div height
                maxHeight = Math.max(maxHeight, divHeight); 
            }
            // determine the height of the content div
            if (d.id === 'content') {
                if(d.offsetHeight) {
                    contentHeight = d.offsetHeight;
                } else if (d.style.pixelHeight) {
                    contentHeight = d.style.pixelHeight;
                }
            }
        } 
    }

    The other part is the following code where you have asked that it also update the side columns as well.

    Code javascript:
    // assign all divs the height of the tallest div
    for (var i=0; i < contDivs.length; i++) {
        contDivs[i].style.height = maxHeight + "px";
    }

    Here is how that's done:

    Code javascript:
    // assign all divs the height of the tallest div
    for (var i = 0; i < contDivs.length; i++) { 
        if (/\bfixheight\b/.test(contDivs[i].className)) {
            contDivs[i].style.height = maxHeight + "px";
        } else if (/\bsideheight\b/.test(contDivs[i].className)) {
            contDivs[i].style.height = contentHeight + "px";
        }
    }

    Now, because I am so completely disgusted by your earlier comments, I am not going to respond to you again for some while. Putting on the rider of "no offense" does not make it okay to say what was said.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any type of DOM manipulation relies on valid markup, they go hand in hand and if one isn't done the correct way, the other may not work properly. Now your statements might have been valid if it was a technical language question regarding ECMAScript but it isn't, as anything to do with the DOM is basically a Javascript ( superset of ECMAScript ) question.
    Last edited by Dan Schulz; Jan 19, 2009 at 05:22. Reason: thread cleanup (removed quoted inflammatory post)
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, one quick question before I start pruning this thread of the inflammatory content. What is the site you're working on that you need to use this script for?
    Last edited by Dan Schulz; Jan 19, 2009 at 05:23.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This confusion has been my fault due to assuming that the linked-to website was the one being worked on.

    Quote Originally Posted by BoomPop View Post
    As the title suggests, I want to grab the height of the center column and force my left and right columns to be the same height.

    The bit of code below is from MyWebTronics, and it's great (awesome job, Jason!)
    I do apologise for any ill-feeling that this has engendered.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2007
    Location
    New London, CT
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way I would do it is below. Now keep in mind that I am not in any way shape or form a JavaScript "ninja", so I may just be doing this Also I would be interested in constructive criticism, on how to make this work better. I hope that this helps. Also note that my code will find the tallest <div> and make the two other columns match that height.

    Code JavaScript:
    function adjustHeight(elem1, elem2, elem3) {
        var e1 = document.getElementById(elem1);
        var e2 = document.getElementById(elem2);
        var e3 = document.getElementById(elem3);
        if (e1 || e2 || e3) {
            var h1 = e1.clientHeight;
            var h2 = e2.clientHeight;
            var h3 = e3.clientHeight;
            if (Math.max(h1, h2) == h1) {
                e2.style.height = h1 + "px";
                e3.style.height = h1 + "px";
            } else if (Math.max(h2, h1) == h2) {
    	    e1.style.height = h2 + "px";
    	    e3.style.height = h2 + "px";
    	} else if (Math.max(h2, h3) == h3) {
                e1.style.height = h3 + "px";
                e2.style.height = h3 + "px";
            } 
        }
    }


Bookmarks

Posting Permissions

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