CODEWITHSUNDEEP
htmlzurb-foundationzurb-foundation-6
Bartosz Walicki
Bartosz Walicki

Reputation: 177

Multiple equalizers in one container

Is it possible to initialize multiple Equalizers in one container?

<div class="row props-set" >
  <div class="small-12 columns text-center" data-equalizer="header"  data-equalizer="paragraph" data-equalizer="image" data-equalize-on="medium">
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props1.png" alt=""></div>
        <h3 data-equalizer-watch="header">Lorem ipsum dolor sit.</h3>
        <p data-equalizer-watch="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, iste!</p>
    </div>
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props2.png" alt=""></div>
        <h3 data-equalizer-watch="header">Dolores, dolorum omnis ex.</h3>
        <p data-equalizer-watch="paragraph">Sint natus nam blanditiis temporibus labore, tempore consectetur beatae dolores.</p>
    </div>
    <div class="props-box">
        <div class="image" data-equalizer-watch="image"><img src="assets/img/props3.png" alt=""></div>
        <h3 data-equalizer-watch="header">Odit quasi ipsa, mollitia.</h3>
        <p data-equalizer-watch="paragraph">Libero quis omnis, beatae unde expedita nostrum quidem non necessitatibus!</p>
    </div>
  </div>
</div>

When I divide data-equalizer's initialization to separeted div's everything works just right.

<div class="row props-set"  data-equalizer="image" data-equalize-on="medium">
   <div class="dummy-div" data-equalizer="paragraph" data-equalize-on="medium"> 
      <div class="small-12 columns text-center" data-equalizer="header" data-equalize-on="medium">

Upvotes: 2

Views: 799

Answers (1)

Andrea
Andrea

Reputation: 86

Is not possible initialize multiple Equalizers in one container. The fastest solution is add another row container before your .row.props-set and put data-equalizer="header" on this. (Foundation)

Personally I prefer resolve this problem with a custom script:

HTML:

<div class="row" data-equal="ONE,TWO">
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
    <div class="medium-4">
        <div class="top" data-equal-watch="ONE"></div>
        <div class="bottom" data-equal-watch="TWO"></div>
    </div>
</div>

Script:

function Equal(){
    $("[data-equal]").each(function(){
        var parent = $(this);
        var type = parent.attr('data-equal');
        var array = type.split(",");

        $.each(array,function(i,e){
            var H = 0;
            parent.find( "[data-equal-watch="+e+"]" ).each(function(){
                var h = $(this).height();
                if( h > H ){ H = h; }
            });
            console.log(H);
            $("[data-equal-watch="+e+"]").height(H);
        });
    });
}

Upvotes: 2

Related Questions