Twitter Bootstrap Question posted in

Set division height under special conditions through jQuery – Twitter bootstrap

I want to write a program to set height to four divisions.

The height of four divisions will be set equal to largest height of the four divisions.

I have used twitter bootstrap just for designing purpose.

In this case as the height of div with id=four has the largest height, all the rest three divisions should set that height.

below is the html code

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>
        </title>
        <meta charset="utf-8" />
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
            <div id="one" class="col-lg-3 col-md-3 col-sm-3 well">
                <p>Line one<p>
            </div>
            <div id="two" class="col-lg-3 col-md-3 col-sm-3 well">
                <p>Line one<p>
                <p>Line two<p>
            </div>
            <div id="three" class="col-lg-3 col-md-3 col-sm-3 well">
                <p>Line one<p>
                <p>Line two<p>
                <p>Line three<p>
            </div>
            <div id="four" class="col-lg-3 col-md-3 col-sm-3 well">
                <p>Line one<p>
                <p>Line two<p>
                <p>Line three<p>
                <p>Line four<p>
            </div>
        </div>
        </div>      
        <!-- Latest compiled JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

Below is the code is custom.js

$(document).ready(function(){
    var one1 = $('#one').height();
    var two2 = $('#two').height();
    var three3 = $('#three').height();
    var four4 = $('#four').height();
    var greatestDiv = "";

    if(one1 > two2 && one1 > three3 && one1 > four4){
        greatestDiv = $('#one').height();
        $('#one').height(greatestDiv);      
    }

    if(two2 > one1 && two2 > three3 && two2 > four4){
        greatestDiv = $('#two').height();   
        $('#two2').height(greatestDiv);     
    }

    if(three3 > one1 && three3 > two2 && three3 > four4){
        greatestDiv = $('#three').height();
        $('#three3').height(greatestDiv);       
    }

    if(four4 > one1 && four4 > two2 && four4 > three3){
        greatestDiv = $('#four').height();  
        $('#four4').height(greatestDiv);        
    }
});

I am a beginner in jQuery. Let me know below in comments regarding any query or misunderstanding.

Tags:

2

Answers


  1. 0

    In your code you are setting the height in the wrong places for each elem.

    if four4 has the greatest height, and you only set greatestDiv in that if statement, then the other divs are left with what the value of greatestDiv was before it.

    To fis this, set all the heights AFTER you get the gratestDiv

    $(document).ready(function(){
    var one1 = $('#one').height();
    var two2 = $('#two').height();
    var three3 = $('#three').height();
    var four4 = $('#four').height();
    var greatestDiv = "";

    if(one1 > two2 && one1 > three3 && one1 > four4){
        greatestDiv = $('#one').height();  
    }

    if(two2 > one1 && two2 > three3 && two2 > four4){
        greatestDiv = $('#two').height();   
    }

    if(three3 > one1 && three3 > two2 && three3 > four4){
        greatestDiv = $('#three').height();
    }

    if(four4 > one1 && four4 > two2 && four4 > three3){
        greatestDiv = $('#four').height();  
    }

    $.each($('.row > div'), function(i, elem){
      $(elem).height(greatestDiv)
    });
});
    Login or Signup to reply.
  2. 0

    First, you need to add similiar class to four divs like this: <div id="one" class="division col-lg-3 col-md-3 col-sm-3 well">, <div id="two" class="division col-lg-3 col-md-3 col-sm-3 well">… It needs for use one selector for all foer divs.

    Second, remove useless strings $('#one').height(greatestDiv);, $('#two2').height(greatestDiv);…

    Third, add last string $('.division').height(greatestDiv);

    Like this: https://jsfiddle.net/m43d1dzc/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search