adding custom javascript to replace equalizer

equalizer isn't working on dev55 so using javascript to set equal heights based on
the tallest intro text for the featured events slider. also added fade in effect to
prevent seeing the elements height correct during page load

diff --git a/css/app.css b/css/app.css
index 199bbbb..a2ec205 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6578,6 +6578,7 @@ header.main {
         margin-right: 0; }
 
 #event-feed-row {
+  opacity: 0;
   padding: 43px 15px 39.5px; }
   #event-feed-row .view-events-btn {
     background: #5e9aa5; }
@@ -6755,9 +6756,6 @@ h4.front-event-title {
   min-height: 45px;
   color: #3b76c4; }
 
-body .feed-block {
-  min-height: 377px; }
-
 body .front-event-button {
   position: absolute;
   bottom: 3px;

diff --git a/glm-member-db-events/views/front/events/eventsFeed.html b/glm-member-db-events/views/front/events/eventsFeed.html
index 4294918..fbdc62e 100644 (file)
--- a/glm-member-db-events/views/front/events/eventsFeed.html
+++ b/glm-member-db-events/views/front/events/eventsFeed.html
@@ -12,7 +12,7 @@
             <a href="{$siteBaseUrl}event-detail/{$event.name_slug}/"> <a href="{$siteBaseUrl}event-detail/{$event.name_slug}/"><div style='background: url("{$mainImgUrl}{$event.image}") no-repeat center center;background-size: contain;' class='image-container'></div></a></a>
             <a class="front-event-link" href="{$siteBaseUrl}event-detail/{$event.name_slug}/"><h4 class="front-event-title">{$event.name}</h4></a>
     
-            <p data-equalizer-watch>{$event.intro}</p>
+            <p class="event-intro-text">{$event.intro}</p>
              {foreach from=$event.times key=myId item=i name=time}
                 {if $smarty.foreach.time.first}
                   

diff --git a/js/app.js b/js/app.js
index 189c5db..b4243ad 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -127,9 +127,45 @@ $(document).ready(function () {
             });
         }
     }
+    $(window).on("load", function(){
+        equalheight = function(container){
+
+        var currentTallest = 0,
+             currentRowStart = 0,
+             rowDivs = new Array(),
+             $el,
+             currentDiv,
+             topPosition = 0;
+             $(container).each(function() {
+               $el = $(this);
+               $($el).height('auto'); 
+               topPosition = $el.position().top;
+               if (currentRowStart != topPosition) {
+                 for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
+                   rowDivs[currentDiv].height(currentTallest);
+                 }
+                 rowDivs.length = 0; // empty the array
+                 currentRowStart = topPosition;
+                 currentTallest = $el.height();
+
+                 rowDivs.push($el);
+               } else {
+                 rowDivs.push($el);
+                 currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
+              }
+
+               for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
+                 rowDivs[currentDiv].height(currentTallest);
+               }
+            });
+        }
+        equalheight('.event-intro-text');
+        $('#event-feed-row').fadeTo('slow', 1);
+    });
 
     check_window_width();
     $(window).resize(function () {
         check_window_width();
+        equalheight('.event-intro-text');
     });
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index e64fe54..a1f9f20 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -91,9 +91,45 @@ $(document).ready(function () {
             });
         }
     }
+    $(window).on("load", function(){
+        equalheight = function(container){
+
+        var currentTallest = 0,
+             currentRowStart = 0,
+             rowDivs = new Array(),
+             $el,
+             currentDiv,
+             topPosition = 0;
+             $(container).each(function() {
+               $el = $(this);
+               $($el).height('auto'); 
+               topPosition = $el.position().top;
+               if (currentRowStart != topPosition) {
+                 for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
+                   rowDivs[currentDiv].height(currentTallest);
+                 }
+                 rowDivs.length = 0; // empty the array
+                 currentRowStart = topPosition;
+                 currentTallest = $el.height();
+
+                 rowDivs.push($el);
+               } else {
+                 rowDivs.push($el);
+                 currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
+              }
+
+               for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
+                 rowDivs[currentDiv].height(currentTallest);
+               }
+            });
+        }
+        equalheight('.event-intro-text');
+        $('#event-feed-row').fadeTo('slow', 1);
+    });
 
     check_window_width();
     $(window).resize(function () {
         check_window_width();
+        equalheight('.event-intro-text');
     });
 });

diff --git a/scss/_main.scss b/scss/_main.scss
index 37dfb99..6ec66e0 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -62,6 +62,7 @@ main {
     }
 }
 #event-feed-row {
+    opacity: 0;
     padding: 43px 15px 39.5px;
     .view-events-btn {
         background: $teal;

diff --git a/scss/plugins/_events.scss b/scss/plugins/_events.scss
index 961f7a3..fb3f5e1 100644 (file)
--- a/scss/plugins/_events.scss
+++ b/scss/plugins/_events.scss
@@ -10,7 +10,7 @@ h4.front-event-title{
 }
 
 body .feed-block{
-    min-height: 377px;
+//    min-height: 377px;
 }
 body .front-event-button{
     position:absolute;