Menu icon Foundation
equalizer & dynamic content not working

can't get the equalizer to work on my gig guide website here's a staging url the events are being populated by separate HTML files - not via a database the header footer and HTML pages are populated via a index.php page that removes the individual HTML pages after 12 midnight. if anyone has any help it would be amazing to here how others have fixed this issue. 

http://bendigohotel.com.au/bendigohotel.com.au_v2/index.php

the browsers rendered HTML is equalizing the height to the overall highest tile on the index.php page

For example: <div class="medium-6 columns" data-equalizer-watch="" style="height: 801px;">  - all my divs are set to 801px - i need them to equalize to their seperate staked rows. 

EqualizerPHPdynamic content

can't get the equalizer to work on my gig guide website here's a staging url the events are being populated by separate HTML files - not via a database the header footer and HTML pages are populated via a index.php page that removes the individual HTML pages after 12 midnight. if anyone has any help it would be amazing to here how others have fixed this issue. 

http://bendigohotel.com.au/bendigohotel.com.au_v2/index.php

the browsers rendered HTML is equalizing the height to the overall highest tile on the index.php page

For example: <div class="medium-6 columns" data-equalizer-watch="" style="height: 801px;">  - all my divs are set to 801px - i need them to equalize to their seperate staked rows. 

Ryan McCready about 3 years ago

Since content is being added after equalizer already calculated height, I think equalizer will need to be reinitialized. You can find more information on reinitializing here.

Tiffany Palermo about 3 years ago

hi there Ryan, thank you very much for your response. i have trawled through all the foundation documentation but it has only confused me - including the page you have referenced - right now in my footer page where all the script tags are i have the below code - however it does not appear to work. fortunately in the wee hours, late last night i managed to find the bootstrap equalizer and so far my website on my localhost is working... but, it would be nice to have my site as a pure foundation site so if you have the code i should be using i would be forever in your debt. thank you in advance, Tiff

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>

<script>

$(document).foundation();

    new Foundation.Equalizer(jQuery("#equalizer")).applyHeight();

</script>

Tiffany Palermo about 3 years ago

Hey there Ryan, great news - i have finally figured it out - i am so grateful for your help this is what i have done for anyone else who may come across this issue of data driven content being required to equalize after the DOM is done doing its thing 

 

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"></script>

<script src="js/foundation/foundation.equalizer.js"></script>

<script>

$(document).foundation();

    Foundation.reInit('data-equalizer');

</script>

Ryan McCready about 3 years ago

Hey thanks for posting back your answer! It's really gonna help a lot of people. So glad you got it :) 

 

What's the timeline for your project, are you the only one working on it?

Tiffany Palermo about 3 years ago

Hey there Ryan,

Here is the website url http://bendigohotel.com.au/ it is working up to a point and then it breaks - I am not sure if it because there are too many tiles on the one page... i am still chipping away at a fix - if you feel like taking a looksee and see if you can think of where it is going wrong that would be awesome - i can see that on inspection mode in chrome the element style is being returned but one some of the tiles it is returning a height of auto - which is proving to be the issue - very weird that it works down to about 15 tiles then breaks on the remaining... 

element.style {
  1. height565px;

Tiffany Palermo about 3 years ago

Heya Ryan, you won't believe this but i just fixed it so i am going to leave this here for anyone else who needs to load html after the DOM loads

I stupidly had this 

INCORRECT: <div class="row" data-equalizer data-equalize-by-row="true">

When i should have just had the below so no need for the ="true"> 

CORRECT: <div class="row" data-equalizer data-equalize-by-row>

 

I hope that this helps others as it is a brain tormentor well it was for me... 

the moral of the story is when life gives you lemons get the tequila out.