CODEWITHSUNDEEP
javascriptjquery
jinfy
jinfy

Reputation: 157

slider heights are not equal

I have four sliders with different heights, I want to set same height for all sliders and height should be evaluvated from each slider. So I'm using each condition and checking the values based on each slider values. But the problem is one slider is not working which one is large height. Please suggest what is the issue.

JS

   var maximum = null;

    $('.lgi-grouping-responsive').each(function() {
        var value = parseFloat($(this).height());
        maximum = (value > maximum) ? value : maximum;

    });

HTML

<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed
</div>
<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed</div>
<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>
<div class=".lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>

Upvotes: 0

Views: 64

Answers (1)

Michael Beeson
Michael Beeson

Reputation: 2875

In your html, you don't need to add the "." in front of the class name. Just write:

<div class="lgi-grouping-responsive">

The "." is used for jquery to pick up all the divs with that classname. I've put your code into a working fiddle for you. You'll see all the divs end up with the same height (maximum):

var maximum = 0;
var $biggestDiv = null;

    $('.lgi-grouping-responsive').each(function() {
        var value = parseFloat($(this).height());
        if (value > maximum) {
            maximum = value;
            $biggestDiv = $(this);
        }
    });

$('.lgi-grouping-responsive').not($biggestDiv).css("height", maximum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed
</div>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed</div>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>
<div class="lgi-grouping-responsive">Continue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closedContinue running background apps when Google Chrome is closed Continue running background apps when Google Chrome is closed
</div>

Upvotes: 3

Related Questions