Topic

I see that you provide an event for when the counter finishes but I don’t see any examples on this. Can you explain this a bit more or perhaps show an example of code to hide the counter when it ends.

Thanks!

Replies

You can do that using something like this:

var stceClockSimple = jQuery("#stac-dev-simple").smartTimerCounter({
    mode: "Counter",
    callbacks: {
        finished: function() {
            this.core.$obj.hide();
        }
    },
    model: {
        method: "seconds",
        value: 5
    }
});

This is full example, change what you need. As you can see ‘callbacks’ have finished callback set to hide the main HTML tag counter is applied on when the counter finishes, in this case counter is set to countdown for 5 seconds.

The problem here is if you use countdown to a specified date, let’s say 2014 January 21. When counter reaches target on screen, it will run finished. But if you visit page on the next day, it will show counter with all 0 value, but in that case finished is not reached. This will be changed in 2.2 version (in a day or two) that will check target completion before starting the clock and it will execute finished as it should be.

Milan

Perfect this worked great. Looking forward to the update. We are using this countdown often for every event so having that check will be great as these pages are running dynamic.

Thanks for the great plugin.

I will be releasing updated 2.2 version over the weekend, and this one checks for finished state after initialization, before starts counting.

Hey Milan, I just finally got around to checking on this and noticed you are up to version 2.5 now in the countdown. I’m still using an older version where after the countdown hits 00:00, it appears 00:00 as you come back to the page. You mentioned that you were going to fix that. Is there any extra code that I need to include to make this work. Any help will be greatly appreciated. Here’s the call I’m using:

jQuery(document).ready(function() {
			    var myClock = jQuery("#my-counter-example").smartTimerCounter({
			    	skin: "LED7Segment",
			    	mode: "Counter",
			    	display: {
				    	segmentWeight: 3,
			            labels: "hide",
			            space: "24px",
			            effectSkew: -1,
			            ui_color: "rgb(255,255,255)",
			            ui_color_transparent: "rgba(255,255,255, 0)",
			            extraClass: "stc-led-background-dark-box"
			    	},
			    	model: {
				    	layout: "Short",
				    	method: "date",
				    	value: new Date(<?=$tip_y?>, <?=$tip_m?>, <?=$tip_d?>, <?=$tip_hr?>, <?=$tip_min?>)	
			    	},
			    	callbacks: {
				    	finished: function() {
				            //this.core.$obj.hide();
				            $('#counter').hide('slow');
				        } 
			    	}
			    });
			  });

Hi,

Version 2.5 has many changes, and now the finished callback is executed when counter starts and reached 0 (started with 0, expired). Your code should be OK with new version.

Milan