adding overlay and loading bar to the ajax on load actions for the front page event...

diff --git a/views/front/events/sidebarEvents.html b/views/front/events/sidebarEvents.html
index da0c026..bea0848 100644 (file)
--- a/views/front/events/sidebarEvents.html
+++ b/views/front/events/sidebarEvents.html
@@ -1,9 +1,11 @@
 
     <h1>Upcoming Events </h1>
     <div id="sidebar-date-select" class="sidebar-datepicker"></div>
-    <div class="sidebar-events"></div>
-    
-
+    <div class="sidebar-events">
+        <div class="sidebar-events-overlay">
+            <div class="loading"></div>
+        </div>
+    </div>
 <script>
     jQuery(document).ready(function($) {
         
@@ -14,9 +16,12 @@
                 url: '{$ajaxUrl}',
                 data: data_array,
                 beforeSend: function(){
-//                   $('.sidebar-event').hide();
+                   $('.sidebar-events-overlay').show();
+                   $(".loading").show();
                 },
                 complete: function(){
+                    $('.sidebar-events-overlay').hide();
+                    $(".loading").hide();
                     $('.sidebar-event').fadeIn("slow");
                 },
                 success: function(data){