Script isn't working on mobile

Design help Custom code
1

Hey guys I need your help!

I included a countdown to a specific date on my website. It all works fine on desktop versions but on mobile it won’t work. Why? Can you help me out?

Here’s the code I included in the body tag of my page:

(function() {
var deadline = ‘2021/06/12 00:00’;

function pad(num, size) {
    var s = "0" + num;
    return s.substr(s.length-size);
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date()),
      seconds = Math.floor((t / 1000) % 60),
      minutes = Math.floor((t / 1000 / 60) % 60),
      hours = Math.floor((t / (1000 * 60 * 60)) % 24),
      days = Math.floor(t / (1000 * 60 * 60 * 24));

  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function clock(id, endtime) {
  var days = document.getElementById(id + '-days')
      hours = document.getElementById(id + '-hours'),
      minutes = document.getElementById(id + '-minutes'),
      seconds = document.getElementById(id + '-seconds');

  var timeinterval = setInterval(function() {
    var t = getTimeRemaining(endtime);

    if (t.total <= 0){
      clearInterval(timeinterval);
    } else {
days.innerHTML = pad(t.days, 2);
hours.innerHTML = pad(t.hours, 2);
minutes.innerHTML = pad(t.minutes, 2);
seconds.innerHTML = pad(t.seconds, 2);
}
  }, 1000);
}

clock('js-clock', deadline);

})();

Thanks!

2

@justSchmitti - can you share your published site?

3

@sam-g https://preview.webflow.com/preview/astrayed-a-music-festival-experience?utm_medium=preview_link&utm_source=designer&utm_content=astrayed-a-music-festival-experience&preview=262fa742d17fda442eb47a23fbbd34f2&mode=preview

4

Take a look at this thread on SO: Javascript date parsing on Iphone - Stack Overflow

It looks like date parsing across devices is not uniform - this method may solve your issue.

1 Like
5

Thanks Sam!

I tried to implement it into my code but it’s still not working. Did I implement it the right way?

(function() {

var arr = "2021-06-12 00:00:00".split(/[- :]/),
date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);

function pad(num, size) {
    var s = "0" + num;
    return s.substr(s.length-size);
}
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date()),
      seconds = Math.floor((t / 1000) % 60),
      minutes = Math.floor((t / 1000 / 60) % 60),
      hours = Math.floor((t / (1000 * 60 * 60)) % 24),
      days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
function clock(id, endtime) {
  var days = document.getElementById(id + '-days')
      hours = document.getElementById(id + '-hours'),
      minutes = document.getElementById(id + '-minutes'),
      seconds = document.getElementById(id + '-seconds');
  var timeinterval = setInterval(function() {
    var t = getTimeRemaining(endtime);
    if (t.total <= 0){
      clearInterval(timeinterval);
    } else {
days.innerHTML = pad(t.days, 2);
hours.innerHTML = pad(t.hours, 2);
minutes.innerHTML = pad(t.minutes, 2);
seconds.innerHTML = pad(t.seconds, 2);
}
  }, 1000);
}
clock('js-clock', date);

})();

6

@justSchmitti - have you republished the site? I’m still seeing the old script

7

Oh yes sorry HERE

8

@justSchmitti I think what is happening is that you have two versions of the clock, correct? One for desktop one for mobile? When I unhide the desktop version on mobile, it functions correctly, but is not formatted in the same way. What you may need to do is write in a condition to check the browser size and then target the mobile version when the user is on mobile, or you could just have the script update both regardless of device:

image
image632×1230 89.3 KB

1 Like
9

Don’t know why but the site you’re looking at looks wrong.
Have a look at this one:
https://astrayed-a-music-festival-experience.webflow.io/

10

@justSchmitti - this has the old code again, one thing I noticed is that this line:

    var deadline = "2021-06-12 00:00:00",

Should end with a “;” instead of “,” - it is producing a console error now.

Try republishing with that change.

12

This is where I got the idea from:
https://webflow.com/website/Project-Countdown
somehow this works on mobile

I also tried different date formats like the people suggested in the comments but nothin works…

13

@justSchmitti - did you see my note about using the two different js-clock divs for mobile versus desktop? I think that is what the issue is, you can see in this screenshot the desktop countdown revealed on mobile functioning, with the mobile one displaying 00s.

image
image838×1552 195 KB

1 Like
14

Thanks for your help! I managed to fix it with your hint! Thank you!