HUG Countdown Module doesn't work on mobile.

[therobert]

URL: http://northdallas.hubspotusergroups.com/ndhug

ISSUE: The coundown module does not work on iphone in safari or chrome.

Is there something I am missing?

[tjoyce · Accepted solution]

@therobert - Your date is in an invalid format for IOS to handle. currently it looks like this:

2018-08-23 11:30:00

but, it needs to look like this: 

2018/08/23 11:30:00

So, you have to change a tiny part of your javascript, i'll highlight in bold.

var module_3107773 = (function() {
    var e = {};
    i18n_getmessage = function() {
        return hs_i18n_getMessage(e, hsVars.language, arguments)
    };
    i18n_getlanguage = function() {
        return hsVars.language
    };
    var c = document.getElementById("event_timestamp"),
        h = c.getElementsByClassName("countdown__days")[0].getElementsByClassName("countdown__digit")[0],
        g = c.getElementsByClassName("countdown__hours")[0].getElementsByClassName("countdown__digit")[0],
        f = c.getElementsByClassName("countdown__minutes")[0].getElementsByClassName("countdown__digit")[0],
        b = c.getElementsByClassName("countdown__seconds")[0].getElementsByClassName("countdown__digit")[0];
    var d = new Date(c.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();
    var a = setInterval(function() {
        var j = new Date().getTime();
        var n = d - j;
        var m = Math.floor(n / (1000 * 60 * 60 * 24));
        var i = Math.floor((n % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var k = Math.floor((n % (1000 * 60 * 60)) / (1000 * 60));
        var l = Math.floor((n % (1000 * 60)) / 1000);
        h.innerHTML = m;
        g.innerHTML = i;
        f.innerHTML = k;
        b.innerHTML = l;
        if (n < 0) {
            clearInterval(a);
            c.innerHTML = "EXPIRED"
        }
    }, 1000)
})();

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[therobert]

@tjoyce

I was unable to find how to edit the js file which you posted above, but I found in the module in design tools how to edit some js associated with the next event module...

I found the line:

var countDownDate = new Date(eventEl.getAttribute('data-timestamp')).getTime();

I tried editing this line to:

var countDownDate = new Date(eventEl.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();

But it broke the time altogether. I think there is some js happening before the page loads that is generating the timestamp and putting it on the div:

<div id="event_timestamp" class="hug-countdown" data-timestamp="2018-09-20 10:30:00">

Here is the js that I am able to edit:

var eventEl = document.getElementById('event_timestamp'),
    dayEl = eventEl.getElementsByClassName('countdown__days')[0].getElementsByClassName('countdown__digit')[0],
    hourEl = eventEl.getElementsByClassName('countdown__hours')[0].getElementsByClassName('countdown__digit')[0],
    minuteEl = eventEl.getElementsByClassName('countdown__minutes')[0].getElementsByClassName('countdown__digit')[0],
    secondEl = eventEl.getElementsByClassName('countdown__seconds')[0].getElementsByClassName('countdown__digit')[0];

var countDownDate = new Date(eventEl.getAttribute('data-timestamp')).getTime();
// var countDownDate = countDownDate.replace(/-/g, '/');
// var countDownDate = new Date(eventEl.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  dayEl.innerHTML = days;
  hourEl.innerHTML = hours;
  minuteEl.innerHTML = minutes;
  secondEl.innerHTML = seconds;


  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    eventEl.innerHTML = "EXPIRED";
  }
}, 1000);

Any suggestions would be appreciated!

[tjoyce]

@therobert - That looks like you did it right, can you link me to the page after you adjusted that code? I would like to see the new error.

[therobert]

@tjoyce Hey, I think it is fixed now. I believe the page update time varies greatly with hubspot. Most of the time, updates happen almost instantly after publishing changes. Sometimes, though, it is very slow- even after being fast all day. I think this was the issue after making the changes. I added an alert() just to see if anything was happening when i published changes. That alert() showed up for quite some time. Even after clearing cache/cookies/etc it was still showing. In a nutshell, i have discovered updates aren't always updates haha. Thanks for the help.

[tjoyce]

@therobert - wow, good catch on testing the cache... glad you got it working

[therobert]

Just curious, why would I need to edit javascript? This is the prebuilt hubspot module. It should work.

[tjoyce]

Might be a question for the Devs...

[therobert]

@tjoyce

I understand the code you suggested and think that was the correct approach, but I edited the js like you mentioned and the timer stopped working. I believe the timestamp is set by other js as the  page loads and not by the js that runs the module. The js that runs the module only grabs the timestamp and breaks it out into days, hours, minutes and seconds.

Here is the full js code I can edit:

var eventEl = document.getElementById('event_timestamp'),
    dayEl = eventEl.getElementsByClassName('countdown__days')[0].getElementsByClassName('countdown__digit')[0],
    hourEl = eventEl.getElementsByClassName('countdown__hours')[0].getElementsByClassName('countdown__digit')[0],
    minuteEl = eventEl.getElementsByClassName('countdown__minutes')[0].getElementsByClassName('countdown__digit')[0],
    secondEl = eventEl.getElementsByClassName('countdown__seconds')[0].getElementsByClassName('countdown__digit')[0];

var countDownDate = new Date(eventEl.getAttribute('data-timestamp')).getTime();
// var countDownDate = countDownDate.replace(/-/g, '/');
// var countDownDate = new Date(eventEl.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  dayEl.innerHTML = days;
  hourEl.innerHTML = hours;
  minuteEl.innerHTML = minutes;
  secondEl.innerHTML = seconds;


  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    eventEl.innerHTML = "EXPIRED";
  }
}, 1000);

Any further ideas would be much appreciated. Thanks.

[therobert]

@tjoyce

I was unable to find how to edit the js file which you posted above, but I found in the module in design tools how to edit some js associated with the next event module...

I found the line:

var countDownDate = new Date(eventEl.getAttribute('data-timestamp')).getTime();

I tried editing this line to:

var countDownDate = new Date(eventEl.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();

But it broke the time altogether. I think there is some js happening before the page loads that is generating the timestamp and putting it on the div:

<div id="event_timestamp" class="hug-countdown" data-timestamp="2018-09-20 10:30:00">

Here is the js that I am able to edit:

var eventEl = document.getElementById('event_timestamp'),
    dayEl = eventEl.getElementsByClassName('countdown__days')[0].getElementsByClassName('countdown__digit')[0],
    hourEl = eventEl.getElementsByClassName('countdown__hours')[0].getElementsByClassName('countdown__digit')[0],
    minuteEl = eventEl.getElementsByClassName('countdown__minutes')[0].getElementsByClassName('countdown__digit')[0],
    secondEl = eventEl.getElementsByClassName('countdown__seconds')[0].getElementsByClassName('countdown__digit')[0];

var countDownDate = new Date(eventEl.getAttribute('data-timestamp')).getTime();
// var countDownDate = countDownDate.replace(/-/g, '/');
// var countDownDate = new Date(eventEl.getAttribute("data-timestamp").replace(/-/g, "/")).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  dayEl.innerHTML = days;
  hourEl.innerHTML = hours;
  minuteEl.innerHTML = minutes;
  secondEl.innerHTML = seconds;


  // If the count down is finished, write some text 
  if (distance < 0) {
    clearInterval(x);
    eventEl.innerHTML = "EXPIRED";
  }
}, 1000);

Any suggestions would be appreciated!