adding an overlay to the date selection header of the front page events widget section

diff --git a/views/front/events/sidebarEvents.html b/views/front/events/sidebarEvents.html
index 70f7ba8..8d0b2d8 100644 (file)
--- a/views/front/events/sidebarEvents.html
+++ b/views/front/events/sidebarEvents.html
@@ -1,6 +1,6 @@
 
     <h1>Upcoming Events </h1>
-    <div id="sidebar-date-select" class="sidebar-datepicker"></div>
+    <div id="sidebar-date-select" class="sidebar-datepicker"><div class="date-overlay"></div></div>
     <div class="sidebar-events">
         <div class="sidebar-events-overlay">
             <div class="sidebar-loading"></div>
@@ -23,6 +23,7 @@
                     $('.sidebar-events-overlay').hide();
                     $(".sidebar-loading").hide();
                     $('.sidebar-event').fadeIn("slow");
+                    $('.date-overlay').hide();
                 },
                 success: function(data){
                 
@@ -97,7 +98,7 @@
          // get events on year or month dropdown change
         $('#sidebar-date-select').datepicker()
             .on("input change", function (e) {
-              
+                $('.date-overlay').show();
                 $(".sidebar-events").find('*').not('.sidebar-events-overlay, .sidebar-loading').remove();
                 var date = e.target.value;
                 if(date.length < 4){
@@ -123,6 +124,8 @@
         // get events on next or prev button click
         $('#sidebar-date-select').datepicker()
             .on(".ui-datepicker-next click", function (e) {
+                $('.date-overlay').show();
+        
                 var year = $('.ui-datepicker-year option:selected').val();
                 var month = parseInt($('.ui-datepicker-month option:selected').val() ) + 1;