Menu icon Foundation
'Reflow' equaliser

Hi,

 

 

Is there a way to call a function to make equaliser run again to reset the height of elements? I've seen reflow talked about but haven't been able to get anything to work.

 

Using Foundations 6.

 

Thanks,

James

EqualiserReflowfoundation 6

Hi,

 

 

Is there a way to call a function to make equaliser run again to reset the height of elements? I've seen reflow talked about but haven't been able to get anything to work.

 

Using Foundations 6.

 

Thanks,

James

Rafi Benkual over 3 years ago

Hi James what have you tried before?

Jean-Luc Tallis over 3 years ago

I too had this problem but the documentation does explain that they replaced reflow with reInit:

Foundation.reInit('equalizer');

See: http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins

James Cobbett over 3 years ago

Thank you, that seems to have done the trick! I didn't see it in the documentation.

Joshua Wayne over 3 years ago

Hello Zurbsters,

I have an add-on question to this issue and am wondering if anyone has a solution. 

I have several sections on a page using equalizer in separate instances.  
In one of these sections I am using:

It fixes things nicely However It throws this error in the console:

// reInit equalizer when interchange has swapped out the content of div#servicesSection
	
        jQuery('#servicesSection').on("replaced.zf.interchange", function() {
    	console.log("zf interchange: replaced services masthead partial");
		Foundation.reInit('equalizer');
  	}); 

// reInit equalizer when interchange has swapped out the content of div#contactSection

	jQuery('#contactSection').on("replaced.zf.interchange", function() {
    	console.log("zf interchange: replaced contact masthead partial");
		if (Foundation.MediaQuery.atLeast('medium')) {
			Foundation.reInit('equalizer');
		};
  	}); 


foundation.js?ver=6.2:44 TypeError: Cannot read property '$element' of undefined(…)

 

Alternatively I am using:

// reInit equalizer when interchange has swapped out the content of #servicesSection

	jQuery('#servicesSection').on("replaced.zf.interchange", function() {
    	console.log("zf interchange: replaced services masthead partial");
		new Foundation.Equalizer(jQuery("#servicesSection")).applyHeight();
  	}); 
	
// reInit equalizer when interchange has swapped out the content of #contactSection

        jQuery('#contactSection').on("replaced.zf.interchange", function() {
    	console.log("zf interchange: replaced contact masthead partial");
		if (Foundation.MediaQuery.atLeast('medium')) {
			new Foundation.Equalizer(jQuery("#contactSection")).applyHeight();
		};
  	}); 

This also does the job!

 

Here is the Question:

 

How can I use the reInit approach and avoid the errors?  

It is cleaner looking and the method suggested in the foundation 6 Documents.  I would love to know the best practice for using reInit Please.

Jean-Luc Tallis over 3 years ago

My only guess is that Equalizer isn't initialized initially so you cannot reInit a plugin that hasn't been initialized in the first place. This explains why the second works but the first doesn't.

Do you have your HTML correct as per the documentation? Perhaps you can share with us some of the HTML?

Nicholas Bester over 2 years ago

I used the 'data-equalizer' attribute in a lot of HTML elements. I struggled to figure this out and I hated the warning message I received when using Interchange with Equalizer (since Equalizer wasn't reflowing after Interchange occurred.

I fixed this by using the following

Foundation.reflow(document, 'equalizer');

Hannah019 Quang 12 months ago

Yes content is added after page load. After using a search form, content is added to a results div.

I was then calling foundation again after adding the html.

Are you saying that foundation has to be called on each equalizer watch item? I was under the impression that just calling foundation on document would be sufficient?

Thanks!

Mobdro