gkEventCounter always 0%

Hi,
can't seem to get the gkEventCounter to display the correct bar width. It is always 0% and thus displaying a white bar (no progress).

Here is a test page where you can see the challenge ahead (btw same for the nsp module on the frontpage): https://office.onlinecommunityhub.nl/hr ... march-2016

These are the values, all seem to be just fine... at least to me

Code: Select all

<div class="gkEvent">
   <h3>Evenementgegevens:</h3>
   <ul>
      <li><strong>Bedrijfsnaam:</strong>Webinar | Waardecreatie Netwerk Archimedes</li>
      <li><strong>Datum:</strong>

         <span class="gkEventPeriod">
            <time class="gkEventDateStart" datetime="02-03-2016">02-03-2016</time>
            <time class="gkEventDateEnd" datetime="02-03-2016"></time>
         </span>
         <span class="gkEventHours">
            <time class="gkEventTimeStart" datetime="10:00">10:00</time> -
            <time class="gkEventTimeEnd" datetime="11:00">11:00</time>
         </span>
      </li>
      <li><strong>Locatie:</strong>webinar</li>
      <li><strong>Investering:</strong>gratis</li>
      <li class="gkEventRegister"><a href="http://archimedes.nu/bijeenkomsten-2/bijeenkomsten/Webinar-meer-waarde-in-tijd/">Aanmelden</a></li>
   </ul>
   <time class="gkEventCounter" datetime="02-03-2016">Tijd tot evenement</time>

</div>

anyone?

Hi

For me everything looks to be in place either. Please try replace Your code with the one from demo just to test if script is just not reacting or is it broken.

Code: Select all

<div class="gkEvent">
          <h3>Event Details:</h3>
          <ul>
                    <li><strong>Date:</strong> <span class="gkEventPeriod">
                              <time datetime="10-07-2016" class="gkEventDateStart">10 July 2014</time>
                              -
                              <time datetime="16-07-2016" class="gkEventDateEnd">16 July 2014</time>
                              </span> <span class="gkEventHours">
                              <time datetime="07:00" class="gkEventTimeStart">7:00 am</time>
                              -
                              <time datetime="18:00" class="gkEventTimeEnd">6:00 pm</time>
                              </span> </li>
                    <li> <strong>Venue:</strong> <span>Poland, Krynica-Zdroj 246a</span> </li>
                    <li class="gkEventRegister"><a href="#">Register</a></li>
          </ul>
          <time class="gkEventCounter" datetime="29-05-2013">Time left to event</time>
</div>


Hi,
Thanks for your reply. I think I found it.
I am using a content constructor that creates the Joomla articles. What is strange is that the created article lacks the <time> tags where when looking at the front-end these are present in the source.
Setting JCE editor to not change / validate html seems to have fixed the issue.

At least now I have the bars in the front-page (the news show pro module), not on the article page itself.
But as it turns out all bars have the same length but the dates are different...

Not sure how the bar length is calculated.
What value must the datetime have?:

Code: Select all

<time class="gkEventCounter" datetime="29-05-2013">Time left to event</time>

Is that date the current date? or the date the event starts?
What format: %d-%m-%Y, or %m-%d-%Y

Hi

If You are using text constructor You need to be aware that joomla editors strip some of the unknown construction and threat most of HTML5 content as unknown. It's better to disable using editor in user settings and use pure HTML in that case.

Format is day-month-year and the date should be a date of when even starts.

Hi, the logic behind the progress bar is completely mystic to me as to what the progress value means.
I have changed the code to have the progress display the number of days left to the event on a scale of 1 month (or quarter or year).

For anyone interested, below is the code for use in gk.stuff.js

Code: Select all

   // Event progress
   var gk_events = jQuery('.gkEvent');
   //
   if(gk_events.length) {
      gk_events.each(function(i, event) {
         event = jQuery(event);
         var timezone_value = event.find('.gkEventTimeStart').data('timezone') || 0;
         var date_timezone = -1 * parseInt(timezone_value, 10) * 60;
         
         var temp_date = new Date();
         var user_timezone = temp_date.getTimezoneOffset();
         var new_timezone_offset = 0;
         // if the timezones are equal - do nothing, in the other case we need calculations:
         if(date_timezone !== user_timezone) {
            new_timezone_offset = user_timezone - date_timezone;
            // calculate new timezone offset to miliseconds
            new_timezone_offset = new_timezone_offset * 60 * 1000;
         }
         
         var progress = event.find('.gkEventCounter');
         var progress_bar = jQuery('<div/>');
         progress_bar.appendTo(progress);
         
         var start = event.find('.gkEventCounter').attr('datetime').split('-');
         var start_date = Date.UTC(start[2], start[1]-1, start[0], 0, 0);
         start_date = start_date + new_timezone_offset;
         
         var current = new Date();
         var current_date = new Date(current.getFullYear(), current.getMonth(), current.getDate(), 0, 0);
         var diff = start_date - current;
         var period = 30.41; // 30.41 = 1 month, 91.25 = quarter, 365 = year
         progress = 100 - Math.floor((((start_date - current)/(60*60*24*1000)) / period) * 100);
         setTimeout(function() {
            progress_bar.css('width', progress + "%");
         }, 1000);
      });
   }


Hi

Ok. That's a very good idea. Thank You for shearing it with us. I'm closing this thread than.