topic Re: HUG Countdown Module doesn't work on mobile. in CMS Development

HUG Countdown Module doesn't work on mobile.

therobert — Tue, 21 Aug 2018 21:43:48 GMT

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?

Re: HUG Countdown Module doesn't work on mobile.

tjoyce — Wed, 22 Aug 2018 00:45:16 GMT

@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.

Re: HUG Countdown Module doesn't work on mobile.

therobert — Fri, 24 Aug 2018 22:11:54 GMT

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

Re: HUG Countdown Module doesn't work on mobile.

tjoyce — Sat, 25 Aug 2018 13:03:38 GMT

Might be a question for the Devs...

Re: HUG Countdown Module doesn't work on mobile.

therobert — Wed, 19 Sep 2018 19:42:28 GMT

@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!

Re: HUG Countdown Module doesn't work on mobile.

therobert — Wed, 19 Sep 2018 19:44:00 GMT

@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!

Re: HUG Countdown Module doesn't work on mobile.

therobert — Thu, 20 Sep 2018 13:43:35 GMT

@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.

Re: HUG Countdown Module doesn't work on mobile.

tjoyce — Thu, 20 Sep 2018 17:57:34 GMT

@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.

Re: HUG Countdown Module doesn't work on mobile.

therobert — Thu, 20 Sep 2018 19:51:40 GMT

@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.

Re: HUG Countdown Module doesn't work on mobile.

tjoyce — Thu, 20 Sep 2018 20:11:17 GMT

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