Need help with responsive countdown timer block like the progress and count up block

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
User avatar
Rebel Studio
 
 
Posts: 73
Joined: Tue Nov 04, 2008 10:55 pm
Location: NL

Need help with responsive countdown timer block like the progress and count up block

Post by Rebel Studio »

I absolutely love the Progress bar and the count up block and looking at the code it seems pretty easy to make if you understand JS.

But atm I am clueless with it which I'll promise to improve this year because I love it but for now, could you (pablo) or anyone else help me with a countdown timer block?

I found a script at the W3C schools here which ofcourse works perfect in the HTML container but isn't responsive that way.

How to make it into a block like the other two?

This would also make a fine addition to a future update with the already countup and progress bar block it would be a perfect trio.

Cheers.
Top
User avatar
Pablo
 
Posts: 23237
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:
Contact Pablo

Re: Need help with responsive countdown timer block like the progress and count up block

Post by Pablo »

I'm sorry I cannot help you with programming related questions, for me this may also take a lot of time to figure out.
Top
User avatar
[RZ]
 
 
Posts: 1912
Joined: Tue Nov 04, 2008 12:08 pm

Re: Need help with responsive countdown timer block like the progress and count up block

Post by [RZ] »

hi
i dont know what you are trying to achieve and have many alternatives... anyhow have you seen this? http://wysiwygwebbuilder.com/forum/view ... 53&t=66298
Top
User avatar
crispy68
 
 
Posts: 3001
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:
Contact crispy68

Re: Need help with responsive countdown timer block like the progress and count up block

Post by crispy68 »

@rebel,

I've been working on a free countdown extension and, if you are interested, would like for you to test it. You can email me at ron at wizbangwebdesign dot com and I'll send it to you. I have it working on this site (2nd section) here: http://www.losreyesmarietta.com
Top
User avatar
Rebel Studio
 
 
Posts: 73
Joined: Tue Nov 04, 2008 10:55 pm
Location: NL

Re: Need help with responsive countdown timer block like the progress and count up block

Post by Rebel Studio »

Pablo wrote: ↑Sat Apr 15, 2017 5:10 pm I'm sorry I cannot help you with programming related questions, for me this may also take a lot of time to figure out.
I understand but it would be a welcome addition to the blocks :)
[RZ] wrote: ↑Sat Apr 15, 2017 5:21 pm hi
i dont know what you are trying to achieve and have many alternatives... anyhow have you seen this? http://wysiwygwebbuilder.com/forum/view ... 53&t=66298
Thanks but that is not what I'm looking for, I'm purely trying to get a CD script as I'm building landing pages with offers.
crispy68 wrote: ↑Sat Apr 15, 2017 5:22 pm @rebel,

I've been working on a free countdown extension and, if you are interested, would like for you to test it. You can email me at ron at wizbangwebdesign dot com and I'll send it to you. I have it working on this site (2nd section) here: http://www.losreyesmarietta.com
lol your count up keeps sticking at 99% but yeah that CD times looks nice although it looks like you made it responsive through breakpoints, I need it to be responsive in a layout grid like WB Progress bar and count up blocks but would love to check it out. Mailing you now.

W3C code:

Code: Select all

<!DOCTYPE HTML>
<html>
<head>
<style>
p {
  text-align: center;
  font-size: 80px;
}
</style>
</head>
<body>

<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2018 15:37:25").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);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>
Top
Post Reply

Return to “Off Topic Section”