Grow your CSS skills. Land your dream job.

Javascript For Div Height

  • # October 4, 2012 at 10:02 am

    I have a small script that runs and makes sure that two of my divs are the same height and if not, then gives them the same height.

    I’m trying to find a way to modify it to work with my Foundation3 layout. Once the scree is resized to a certain width or it’s viewed from a mobile device, i need the two divs to just take on their auto height.

    This is the code that I currently have.

    var maxHeight = 0;
    $(‘div.jHeight’).each(function() {
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    if (maxHeight < $('#content-section').height()) { maxHeight = $('#content-section').height()}
    });
    $(‘div.jHeight’).each(function(){
    $(this).Height(“maxHeight”);
    });

    # October 5, 2012 at 8:54 am

    Hi Maddtechwf!

    I really like the [jQuery .map() example](http://api.jquery.com/map/#example-2). But if you need a bit more functionality, check out the [Equalizer](https://github.com/CSS-Tricks/Equalizer) plugin.

    # October 12, 2012 at 12:29 am

    try this:

    # October 12, 2012 at 12:30 am

    $(function(){

    //mobile
    if( $(window).width() < = 495 ){
    $(‘div.jHeight’).each(function() {
    $(this).css(‘height’,’auto’);
    });
    }
    //desktop
    else {
    var maxHeight = 0;

    $(‘div.jHeight’).each(function() {
    if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    if (maxHeight < $('#content-section').height()) { maxHeight = $('#content-section').height()}
    $(this).css(‘height’,maxHeight);
    });
    }

    });

    $(window).resize(function() {

    $(‘div.jHeight’).each(function() {
    $(this).css(‘height’,’auto’);
    });

    });​

    # October 14, 2012 at 8:31 pm

    If one div takes prescendence over the other then JS is your solution, but for mobile couldn’t you target a mobile.css and have the widths to auto? Mobile detection would be pretty good as well? Lookup some HTML5 boilerplates and a document inspector like modernizr

    # October 15, 2012 at 12:12 pm

    Thanks for all the help guys. I got it working now.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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