Menu icon Foundation
several data-equalizer on one page?

Hi

I have a problem with the new feature "equlizer".

I have two different data-equalizer and it always works only one. If I delete the first then the second works and vice versa.

Is only one possible per page or am I doing something wrong?

Thank you for your reply.

Equalizer

Hi

I have a problem with the new feature "equlizer".

I have two different data-equalizer and it always works only one. If I delete the first then the second works and vice versa.

Is only one possible per page or am I doing something wrong?

Thank you for your reply.

Wing-Hou Chan over 5 years ago

Hey Lukas!

Could you post some code for us to look at? Or even a link the site?

Lukas Hausammann over 5 years ago

Here is the html code:

<main>
  <div class="row" data-equalizer>
    <article class="teaser columns medium-6 large-4">
      <a href="#">
        <div class="teaser-inner" data-equalizer-watch>
          <img src="img/ph_teaser.jpg" alt="teaser">
          <h1>
            Lorem Ipsum
          </h1>

          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et accusam et. <br> darf nicht zu sehen sein.
          </p>

          <button class="button">More Information</button>
        </div>
      </a>
    </article>

    <article class="teaser columns medium-6 large-4">
      <a href="#">
        <div class="teaser-inner" data-equalizer-watch>
          <img src="img/ph_teaser.jpg" alt="teaser">
          <h1>
            Lorem Ipsum
          </h1>

          <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam 
            voluptua. At vero eos et. 
          </p>

          <button class="button">More Information</button>
        </div>
      </a>
    </article>

    <div class="columns large-4 teaser-background-container">

      <div class="row" data-equalizer>
        <article class="teaser background column medium-6 large-12">
          <a href="#">
            <div class="teaser-inner" data-equalizer-watch>
              <h1>
                Lorem Ipsum
              </h1>

              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
                eirmod tempor invidunt ut labore et dolore. <br>asdf asdf sdaf sdafsdaf asdf 
              </p>

              <button class="button">More Information</button>
            </div>
          </a>
        </article>

        <article class="teaser background column medium-6 large-12">
          <a href="#">
            <div class="teaser-inner" data-equalizer-watch>
              <h1>
                Lorem Ipsum
              </h1>

              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
                eirmod tempor invidunt ut labore et dolore. 
              </p>

              <button class="button">Login</button>
            </div>
          </a>
        </article>
      </div>
    </div>

  </div>
</main>

Wing-Hou Chan over 5 years ago

Hey Lukas!

Thanks for the code! Could you post an image of what you are trying to achieve? Just simple boxes showing where you want to elements to be will do.

It is slightly difficult to tell from your code on what you were wanting to achieve.

Thank you!

Toby Stokes over 5 years ago

Just been looking at the source, and Lukas I'm afraid you can only have one equalizer per page currently.
It's looping through ALL the data-equalizer-watch items, not just ones in a particular row - so the only way it would work would be if both groups ended up the same height. But if you expected the same height always, then you wouldn't need to use equalizer!

I have a similar situation, I think it would be good if it could be applied more than once on a page, I might suggest that on github...