Menu icon Foundation

My Posts




My Comments

Mela S commented on Simon Olley's post about 4 years

Aww too bad, I was looking for this feature, too. I hope there will be something that does this in future releases.

Mela S commented on mario's post over 4 years

Is there a way to get around this? It also happens if you reload the page from anywhere other than the top of the page. Thanks.

Mela S commented on Mela S's post over 5 years

Hi Brandon,

they do close... but in the document I'm working with, the hotspots are very close together and this causes some of them to be open at the same time.

When the hotspots are far away from each other, it's not a problem.

Mela S commented on Mela S's post over 5 years

Hi Rafi,

thanks for the reply. As I mentioned, I use Equalizer in 3 instances in my code, and it's working in 2 of them -- so I'm positive that the JS paths are correct.

It is not, however, working in one instance -- and the link you posted illustrates that as well. I've tried viewing it on several browsers and on all of them, the outermost three columns do not have equal heights at all.

Since I can't add images here, I've added it to my initial post.

These three outermost columns are supposed to have the same height:
Column 1 (C1) - pink column - leftmost div with Text1 & Text2
C2 - green column - large middle div which contains Text3 - Text9. This one contains two instances of data equalizer, which are working.
C3 - blue column - rightmost div with Text10

But C1 and C3 do not have the same height as C2. C2 is 4 times taller, and C1 and C2 are not adjusting to this height.

If I strip out the nested DIVs inside C2, it shows up properly -- all 3 columns are the same height.
My problem is if I put nested DIVs in C2 ("Text 3-10"), like in my first example, the 3 outermost columns are no longer the same height. Is there an issue with nested use of Equalizer?

<div class="row" data-equalizer>

 <div class="large-2 medium-2 small-2 columns engagement-label" data-equalizer-watch>
 C1: <strong>Text 1</strong>
 <br>Text 2
 </div>

 <div class="large-9 medium-9 small-9 columns" data-equalizer-watch>
   <p>C2: Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>If I place my nested DIVs here, Equalizer stops working for these outermost columns, and they are no longer the same height.</p>
 </div>

 <div class="large-1 medium-1 small-1 columns" data-equalizer-watch>
  C3: Text 10
 </div>
</div>

Posts Followed


Following

    No Content

Followers

My Posts




My Comments

You commented on Simon Olley's post about 4 years

Aww too bad, I was looking for this feature, too. I hope there will be something that does this in future releases.

You commented on mario's post over 4 years

Is there a way to get around this? It also happens if you reload the page from anywhere other than the top of the page. Thanks.

You commented on Mela S's post over 5 years

Hi Brandon,

they do close... but in the document I'm working with, the hotspots are very close together and this causes some of them to be open at the same time.

When the hotspots are far away from each other, it's not a problem.

You commented on Mela S's post over 5 years

Hi Rafi,

thanks for the reply. As I mentioned, I use Equalizer in 3 instances in my code, and it's working in 2 of them -- so I'm positive that the JS paths are correct.

It is not, however, working in one instance -- and the link you posted illustrates that as well. I've tried viewing it on several browsers and on all of them, the outermost three columns do not have equal heights at all.

Since I can't add images here, I've added it to my initial post.

These three outermost columns are supposed to have the same height:
Column 1 (C1) - pink column - leftmost div with Text1 & Text2
C2 - green column - large middle div which contains Text3 - Text9. This one contains two instances of data equalizer, which are working.
C3 - blue column - rightmost div with Text10

But C1 and C3 do not have the same height as C2. C2 is 4 times taller, and C1 and C2 are not adjusting to this height.

If I strip out the nested DIVs inside C2, it shows up properly -- all 3 columns are the same height.
My problem is if I put nested DIVs in C2 ("Text 3-10"), like in my first example, the 3 outermost columns are no longer the same height. Is there an issue with nested use of Equalizer?

<div class="row" data-equalizer>

 <div class="large-2 medium-2 small-2 columns engagement-label" data-equalizer-watch>
 C1: <strong>Text 1</strong>
 <br>Text 2
 </div>

 <div class="large-9 medium-9 small-9 columns" data-equalizer-watch>
   <p>C2: Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>Text 3-10</p>
   <p>If I place my nested DIVs here, Equalizer stops working for these outermost columns, and they are no longer the same height.</p>
 </div>

 <div class="large-1 medium-1 small-1 columns" data-equalizer-watch>
  C3: Text 10
 </div>
</div>

Posts Followed

Following

  • No Content

Followers

  • No Content