Grow your CSS skills. Land your dream job.

Boxes of equal height

  • # December 16, 2012 at 5:18 pm

    I got finally all my boxes equal height by using jQuery 1.8.3 and this little snipet:

    $(document).ready(function() {
    setHeight(‘.box’);
    });

    var maxHeight = 0;
    function setHeight(column) {
    column = $(column);
    column.each(function() {
    if($(this).height() > maxHeight) {
    maxHeight = $(this).height();;
    }
    });
    column.height(maxHeight);
    }

    With media query below I am using class full and stretching all the boxes full width of the view port like this

    @media only screen
    and (max-width : 640px) {
    html {font-size:93.8%;}
    .full {width:95%;margin:0 0 22px 2.5%;}
    }

    How do I alter that script when I go to 640px width and below not make the boxes equal height anymore? Thanks.

    # December 16, 2012 at 5:23 pm

    Check this out…. I haven’t needed to use it yet, but I’m sure you can manage to make it work. I know a couple people that have.

    http://github.com/paulirish/matchMedia.js/

    The readme is pretty helpful too. I think this is what you’re looking for.

    # December 16, 2012 at 5:56 pm

    @kevin11189, thanx for the link Kevin. I am sure there’s lot of cool stuff in that repository I looked at. But I am just starting out with js step by step, small things, and I would like to accomplish that within the existing snippet. I tried several things with var maxWidth=640, but I am not able to accomplish that.

    # December 16, 2012 at 6:07 pm

    Honestly, I don’t do a whole lot of js without just manipulating plugins and stuff… I can see what I can do. I have a feeling someone else is going to come in here and make me look stupid. I’m learning with you.

    have you tried

    if (screen.width > 640) {
    $(document).ready(function() {
    setHeight(‘.box’);
    });

    var maxHeight = 0;

    function setHeight(column) {
    column = $(column);
    column.each(function() {
    if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();;
    }
    });
    column.height(maxHeight);
    }
    }​
    or
    if (document.documentElement.clientWidth > 640) {
    $(document).ready(function() {
    setHeight(‘.box’);
    });

    var maxHeight = 0;

    function setHeight(column) {
    column = $(column);
    column.each(function() {
    if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();;
    }
    });
    column.height(maxHeight);
    }
    }

    # December 16, 2012 at 6:07 pm

    The code block broke on the second one. It starts at “if (document…….”

    # December 16, 2012 at 6:21 pm

    @jurotek Is this what you are after? http://jsfiddle.net/joshnh/Mx3RX/

    Note: I’ve taken a mobile first approach with this method. When designing responsively, I am a firm believer that mobile first is the way to go.

    # December 16, 2012 at 6:58 pm

    @joshuanhibbert, awesome bro, works like a charm. Mobile first ha. I do it other way around, hmmm… I’ll keep that in mind cause it makes lot of sense. Thanx.

    # December 16, 2012 at 6:58 pm

    @jashuanhibbert Very nice. I’m saving that one for later use.

    # December 16, 2012 at 7:15 pm

    Awesome, glad it does what you want! Also, it’s not hard to flip it around if you want to work the other way.

    # December 17, 2012 at 10:13 am

    @joshuanhibbert, Josh, I brought it with me to work and published it on server and Iam experiencing some strange behavior. When you initially open it you get equal height. When you re-size browser to 768px I get no longer equal height. When I refresh the browser at this point equal height is back. When you re-size browser back to full width I get big gap under paragraph. The script you shared with me is as I got it from jsfiddle. I might be doing something wrong with css or media query. I dodn’t know. Here’s the link: http://thecableconnection.com/Test/index.html

    # December 17, 2012 at 5:25 pm

    @jurotek That is about the extent of my jQuery knowledge, and it doesn’t take into account the changing content height. Sorry :(

    # December 17, 2012 at 7:42 pm

    It works great on the initial load, say for a 960px grid on a big browser. However, I have a break point at 959px where everything gets narrower, and then again at 767px where all the columns stack on top of one another. The script needs to refresh at each breakpoint and readjust the column heights as they get narrower, but I’m not sure how to do that.

    # December 17, 2012 at 7:58 pm

    @jurotek Out of curiosity, does this work? http://jsfiddle.net/joshnh/3cQ93/

    I moved the setting of the height inside of the window resize function so that it runs it again whenever the window is resized.

    # December 17, 2012 at 8:06 pm

    @joshuanhibbert, thanx Josh, just got home from work was a long day finishing online store in existing website and making it live. I am going to look at it tomorrow when I get to work and I’ll get in touch with you then. Cheers.

    # December 17, 2012 at 8:16 pm

    No worries!

Viewing 15 posts - 1 through 15 (of 36 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".