SOW : Core Plugins

SOW = Step Of Web (Smarty author).
SOW plugins are part of Smarty Core, written from scratch!

SOW : Timer Countdown

Plugin written from scratch to be as lightweight as possible!
Callback function supported!

Able to count down in two ways:
1. from given milliseconds
2. from a given date/full date 


/* 
	:: Plugin File
	src/js/sow.core/sow.timer_countdown.js

	:: Plugin Init
*/	$.SOW.core.timer_countdown.init('.timer-countdown');

Examples

By Seconds/Milliseconds

<!--
if data-timer-countdown-from > 1000, calculated in seconds (time / 1000)
if data-timer-countdown-from < 1000, considered seconds

Other Options
	data-timer-countdown-end-hide-self="true"
	data-timer-countdown-end-hide-target="#somecontainer"
	data-timer-countdown-callback-function=""

	myCallbackFunction = funtion(el) {
		// el = countdown element ID. if no #id provided, is added by the plugin
	}
-->
<span class="hide timer-countdown" data-timer-countdown-from="100000"></span>
By Date (the output is always in hours)!

<!--
Any standard date format is supported. Examples:
2020-11-21T13:19:11+0000
11/21/2021 16:00:00 
Fri Jul 14 2020 23:21:03 GMT+0300
If date is in the past, callback function is not called!

Other Options
	data-timer-countdown-end-hide-self="true"
	data-timer-countdown-end-hide-target="#somecontainer"
	data-timer-countdown-callback-function=""

	myCallbackFunction = funtion(el) {
		// el = countdown element ID. if no #id provided, is added by the plugin
	}
-->
<span class="hide timer-countdown" data-timer-countdown-from="11/21/2021 16:00:00"></span>
Full Output
years days hours minutes seconds 

<div class="hide timer-countdown timer-countdown-inline" data-timer-countdown-from="11/21/2023 16:00:00">
	
	<span class="w--100 py-4 my-1 text-center shadow-xs d-inline-block">
		<span class="y d-block"></span>
		years
	</span>

	<span class="w--100 py-4 my-1 text-center shadow-xs d-inline-block">
		<span class="d d-block"></span>
		days
	</span>

	<span class="w--100 py-4 my-1 text-center shadow-xs d-inline-block">
		<span class="h d-block"></span>
		hours
	</span>

	<span class="w--100 py-4 my-1 text-center shadow-xs d-inline-block">
		<span class="m d-block"></span>
		minutes
	</span>

	<span class="w--100 py-4 my-1 text-center shadow-xs d-inline-block">
		<span class="s d-block"></span>
		seconds
	</span>

</div>
Same as above, just another markup example
YEARS DAYS HRS MIN SEC 

<div class="hide timer-countdown timer-countdown-inline py-5 d-inline-block" data-timer-countdown-from="11/21/2022 16:00:00">

	<span class="w--60 text-center d-inline-block">
		<span class="y d-block text-primary py-2"></span>
		<span class="fs--12">YEARS</span>
	</span>

	<span class="w--60 text-center d-inline-block">
		<span class="d d-block text-primary py-2"></span>
		<span class="fs--12">DAYS</span>
	</span>

	<span class="w--60 text-center d-inline-block">
		<span class="h d-block text-primary py-2"></span>
		<span class="fs--12">HRS</span>
	</span>

	<span class="w--60 text-center d-inline-block">
		<span class="m d-block text-primary py-2"></span>
		<span class="fs--12">MIN</span>
	</span>

	<span class="w--60 text-center d-inline-block">
		<span class="s d-block text-primary py-2"></span>
		<span class="fs--12">SEC</span>
	</span>

</div>
Jump To