SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting several elements to the same height

    Hello,

    I'm trying to emulate a table-based layout with a css-based layout that uses javascript to find the element with the largest height and set all elements to this height. My initial attempt does this on page load, but doesn't when the text is resized. Can anyone suggest a possible solution?

    The table-based layout is here:
    http://www.maryvillecollege.edu/parents/index.asp

    My javascript/css test is here:
    http://www.maryvillecollege.edu/lab/...rtalCells.html

    Here's my script:
    window.onload = function () {

    var theDivs = document.getElementsByTagName('div');

    function getMaxHeight() {
    for(i=0; i<theDivs.length;i++){
    if(theDivs[i].className == 'cellGray' || theDivs[i].className == 'cellBlue') {
    var maxHeight = theDivs[i].clientHeight;
    if (theDivs[i].clientHeight > maxHeight){
    maxHeight = theDivs[i].clientHeight;
    }
    return maxHeight;
    }
    }
    }
    var newHeight = getMaxHeight();


    for(i=0; i<theDivs.length;i++) {

    if(theDivs[i].className == 'cellGray' || theDivs[i].className == 'cellBlue') {
    if(theDivs[i].clientHeight < newHeight) {

    theDivs[i].style.height = newHeight + 'px';

    }
    }

    }
    };

    Thanks!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    If a user has javascript turned off, this will not look as you intend it to. You can make this work as you want with CSS only. Look in the CSS forum at the 3-column layout sticky at the top and read the stuff about all the columns having the same height even if the content of one column is longer than the others. You could easily do this to make it into your layout where you have three columns and then another three below them by simply wrapping each set of three columns in a div and using the CSS explained in the 3-columns thread. Much cleaner and user-compatible than using JS.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi rcarr359, Welcome to SPF!

    It looks like you need 4 columns - right?

    Check out Raffles' suggestion. That thread is excellent.

    If you still would like to use Js then I will be glad to make some suggestions.

    To start, you can look at how I used Js to enhance a basic CSS layout in these demos:

    http://cross-browser.com/x/examples/layout3.html
    http://cross-browser.com/x/examples/layout5.html

    Btw... be sure to view those pages with Js enabled as well as disabled.


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
  •