Hello Everyone,
I follow some guides to make a countdown timer with a pop-up FAQ window. It can work well on both PC and Android. However, it doesn’t work and display well on IOS. Can’t firgue it out how to fix it and worry if changing it will also affect the display on PC and Android.
Much appreciate any help.
Here is the code:
{% capture time_check %}
{% for tag in product.tags %}
{%if tag contains 'time_' %}
{% assign tag_time = tag | split : 'time_' | last %}
{{ tag_time }}
{% endif %}
{% endfor %}
{% endcapture %}
{% if tag_time %}
<div class="countdown_wrap popup-btn">
<div class="countdown_time" id="js_set_time" >
<svg class="ProductCoupon_faq__tRwtq" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5775" width="15" height="32">
<path d="M514 63.2c-242.6 0-439.3 200.6-439.3 448.1S271.4 959.4 514 959.4s439.3-200.6 439.3-448.1S756.6 63.2 514 63.2z m50.8 704.3H450V659.6h114.8v107.9zM611.7 512c-43.8 29.7-63.3 58.6-58.6 86.7v18.8h-93.8v-25.8c-1.6-48.4 18.8-87.5 60.9-117.2 39-31.2 57.8-59.4 56.3-84.4-3.1-32.8-21.1-50.8-53.9-53.9-43.8 0-71.1 28.9-82 86.7l-105.5-23.4c18.8-106.2 86.7-157.8 203.9-154.7 96.9 4.7 149.2 48.4 157 131.3 3.2 50-24.9 95.3-84.3 135.9z" p-id="5776"></path></svg>
<div class="End">Ends in:</div>
<div class="timer-block-day">
<span class="countdown_number js-days">00</span>
<span class="countdown_title">Days</span>
</div>
<div class="timer-block">
<span class="countdown_number js-hours">00</span>
<span class="countdown_title">:</span>
</div>
<div class="timer-block">
<span class="countdown_number js-minutes">00</span>
<span class="countdown_title">:</span>
</div>
<div class="timer-block">
<span class="countdown_number js-seconds">00</span>
</div>
</div>
</div>
<div class="popup-overlay" load="lazy">
<div class="popup">
<!-- Put your page handle between the 'page.' and '.content' -->
{{ pages.discount-faq.content }}
<span class="popup-close"></span>
</div>
<!-- Coded by jotting.com -->
{{ 'popup.js' | asset_url | script_tag }}
</div>
<style>
.countdown_time{
margin-top: 15px;
color: #ed844a;
padding: 10px 10px 10px 9px;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.countdown_time .timer-block-day{
width: 25%;
color: #ed844a;
}
.timer-block{
width: 9%;
color: #ed844a;
}
.countdown_time .timer-block span{
text-align: center;
}
.End{
text-align: center;
width:70px;
margin-right:10px;
}
.popup-overlay{
display: none;
}
.popup-btn {
cursor: pointer;
}
.popup-overlay {
display: none;
}
</style>
<script type="text/javascript">
var settime = "{{ tag_time }}";
(function (){
if(settime.length > 0 ){
var countDownDate = new Date(settime).getTime();
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));
if(days < 10 )
{
var days = '0' + days;
}else{
days = days;
}
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
if(hours < 10 )
{
var hours = '0' + hours;
}else{
hours = hours;
}
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
if(minutes < 10 )
{
var minutes = '0' + minutes;
}else{
minutes = minutes;
}
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (seconds < 10)
{
var seconds= '0' + seconds;
}else{
seconds = seconds;
}
document.querySelector('.js-days').innerText = days;
document.querySelector('.js-hours').innerText = hours;
document.querySelector('.js-minutes').innerText = minutes;
document.querySelector('.js-seconds').innerText = seconds;
if (distance < 0) {
clearInterval(x);
document.getElementById("js_set_time").innerHTML = "Hurry! Off Ends Soon!";
}
}, 1000);
}
})();
</script>
{% endif %}
And here is pop-up windown js:
document.querySelector(".popup-btn").addEventListener('click', function (e) {
e.stopPropagation();
document.querySelector(".popup").style.display = 'block';
}, false);
document.querySelector(".popup-btn").addEventListener('click', function () {
document.querySelector(".popup-overlay").style.display = 'block';
}, false);
document.querySelector(".popup-close").addEventListener('click', function () {
document.querySelector(".popup").style.display = 'none';
document.querySelector(".popup-overlay").style.display = 'none';
}, false);
document.querySelector(".ReactModal__Overlay").addEventListener('click', function () {
document.querySelector(".popup").style.display = 'none';
document.querySelector(".popup-overlay").style.display = 'none';
}, false);
document.querySelector(".popup").addEventListener('click', function (e) {
e.stopPropagation();
}, false);
