CODEWITHSUNDEEP
javascriptjqueryhtmlflipclock
xtu
xtu

Reputation: 417

Set the time of FlipClock to one from attribute

I would like to get an attribute from HTML element when initializing a FlipClock. Please not there are more than one FlipClock objects in the page. The HTML tag for the clock is:

 <span class="expire-clock" data-expire="2015-09-22">

How can I get '2015-09-22' in the 'init' callback function?

Upvotes: 0

Views: 859

Answers (1)

HeadCode
HeadCode

Reputation: 2828

It doesn't look like there's anyway to get that to work with the init function. The initialization options don't include setting the time (which seems odd) and the init callback doesn't pass back a reference to the clock that has just been created.

You can, however, write your own function to initialize the clocks. Note that if you want many different clocks on the page you'll have to use ids for them instead of just a class.

Also, it's up to you to write a function to convert your date string in the data area to seconds. :-)

<div id="your-clock" data-expire="70"></div>

<script src="FlipClock/compiled/flipclock.min.js"></script>
<script>        
    function initClock(id){
        var clock = $('#your-clock').FlipClock({countdown: true, autoStart: false});
        clock.setTime($("#" + id).data("expire"));
        clock.start();
    }

    initClock("your-clock");
</script>

Upvotes: 1

Related Questions