Count Up Timer

[RichB]

Afternoon All,

 

Im trying to get something like the below but in HTML not Javascript:

 

https://inorganik.github.io/countUp.js/

 

Same size even same colour will do... Can anyone point me to where I could find the code online? As im not really a coder and by the looks of my google searches I'm not doing well online either!

Edited December 11, 2017 by RichB

[NotSoFast]

I don't see how you could do it without JavaScript. Is there any reason you want to avoid it?

[RichB]

The site I'm using will only except HTML code

 

Thought I'd found it here: https://bootsnipp.com/snippets/5K6WW but it doesn't run!

[Steve21]

The site I'm using will only except HTML code

 

Thought I'd found it here: https://bootsnipp.com/snippets/5K6WW but it doesn't run!

 

Because it's using JS on the 3rd tab

 

Can you use anything else like PHP/CGI etc? Or pure HTML only?

 

Steve

[NotSoFast]

That one uses JavaScript as well. I have two suggestions. You could try putting the JavaScript inside script tags in the head of the HTML page, as opposed to linking to a separate file. Alternatively you could make an animated gif of what you want and insert it as an image.

[NotSoFast]

What site is it you're using?

[RichB]

@NotSoFast - Wix - I needed a site up in a day and did the job! until now...

[Steve21]

You can embed javascript in Wix unless they changed it, don't think they support it but they can

 

You just need to use inline javascript rather than a separate file etc

 

Doesn't something like this within the wix htmlapp work?

 

Test
<br />
document.getElementById('click_me').addEventListener("click", function(event) {<br />
    (function(event) {<br />
        alert("test");<br />
    }).call(document.getElementById('click_me'), event);<br />
});<br />

 

Steve

[RichB]

@Steve21 That code does work!

 

However this countdown one doesn't? any suggestions as to why? Knew I should have learnt code in the years as a NM...

 

ar options = {

  useEasing: true,

  useGrouping: true,

  separator: ',',

  decimal: '.',

};

var demo = new CountUp('myTargetElement', 0, 4165, 0, 2.5, options);

if (!demo.error) {

  demo.start();

} else {

  console.error(demo.error);

}

 

From - https://inorganik.github.io/countUp.js/

[Steve21]

Because that isn't the actual code Just the custom options you change on that page

 

You need the JS files and referenced etc if you're trying to just use that bit you posted https://github.com/inorganik/CountUp.js

 

https://github.com/inorganik/countUp.js/blob/master/countUp.js etc

 

Steve

[NotSoFast]

It can be done with CSS animations, but it's not exactly elegant: Edit fiddle - JSFiddle Edited December 11, 2017 by NotSoFast

[SimonHooker]

Certainly not elegant, and in Chrome seems to ignore the 0.5s between switches so it just goes straight to 10! Ultimately to achieve a countdown/up/most animation in the users browser without them refreshing the page you will have to use Javascript unless you want to do something from 10-15 years ago involving barely-supported Flash or cunningly timed animated gifs. Neither of which I would recommend even contemplating.