A jQuery plugin that creates a countdown timer in years, months, days, hours and seconds in the form a bunch of rotating 3d cubes

Overview

countdownCube

CountdownCube is a jQuery plugin that is in the form of a bunch of rotating 3D cubes. It uses CSS transitions to create the 3D rotating cube effects.

You can see several examples in this demo.

Basics

Make sure you have jQuery loaded - link the following files:

">
<link rel="stylesheet" href="countdownCube.css"/>
<script type="text/javascript" src="countdowncube.js">script>

Add a new empty div to your page:

">
<div id="counter">div>

And then kick off a new counter, with a target time (using the ISO 8601 format), and if you like cubeSize (in pixels), background color, and font color:

$('#counter').countdownCube( {
  target: '2018-03-01T10:00:00Z',
  cubeSize: 50,
  background: 'rgba( 255, 150, 150, 0.8 )',
  color: 'white',
} );

You can have more than one countdownCube per page.

Timezone support

Timezone can be specified in the string in serveral formats:

  • adding a letter Z at the end on the timestring '2018-03-01T01:00:00Z', this is UTC.
  • adding an offset with respect to UTC in the format ±hh:mm: '2018-03-01T01:00:00-05:00' (this is the timezone of New York (US))

Support for timezones expressed as 'Continent/City' can be added with the moment.js and moment-timezone.js libraries.

For example, you can add them using the following CDNs:

">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js" type="text/javascript">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.14/moment-timezone-with-data-2012-2022.min.js" type="text/javascript">script>

You can specify the timezone with the option targetTimezone:

$('#counter').countdownCube( {
  target: '2018-03-01T10:00:00',
  targetTimezone: 'America/New_York',
  cubeSize: 50,
  background: 'rgba( 255, 150, 150, 0.8 )',
  color: 'white',
} );

see the documentation of moment-timezone.js.

Legacy Date objects

The legacy syntax (using the built-in Date object) is still supported but may be incosistent across browsers. Note that if you use the legacy format and don't specify any timezone the browser will infer from the browser's local time:

$('#counter').countdownCube( {
  /* target time in the local timezone of the browser */
  target: new Date('2018-03-01T10:00:00'),
  cubeSize: 50,
  background: 'rgba( 255, 150, 150, 0.8 )',
  color: 'white',
 } );

You can force UTC in the adding a Z at the end of the time string, as specified in the ISO 8601:

$('#counter').countdownCube( {
  /* target time in UTC */
  target: new Date( '2018-03-01T10:00:00Z' ),
  cubeSize: 50,
  background: 'rgba( 255, 150, 150, 0.8 )',
  color: 'white',
 } );

Options

  • cubeSize: the size in pixels of each cube

  • background: color of the counter cubes¸ anything that can be used in a CSS will work

  • color: the font color for the numbers in the cube, anything that can be used in a CSS will work

  • showDaysOnly: if set to true shows the differences only up to days (default: false)

  • labelsTranslations: you can specify a dictionary that can be used to translate the labels (year, month, day. hour, minute, second)

$('#counter-days-only').countdownCube( {
  target: '2018-12-03T11:00:00Z',
  cubeSize: 150,
  background:  '#ffffff',
  color: 'blue',
  labelsTranslations: {'year': 'anni',
                       'month': 'mesi',
                       'day': 'giorni',
                       'hour': 'ore',
                       'minute': 'minuti',
                       'second': 'secondi'
                       },
  showDaysOnly: true,
} );
  • onEnd: expects a function that is triggered when the counter reaches the end. The default does nothing. A typical use is hiding the counter and showing a different - previously invisible - element of the page. This gives the effect of something appearing when the countdown ends. Here's an example:
$('#counter').countdownCube( {
  target: '2018-12-03T11:00:00Z',
  onEnd: function(e) {
           $('#counter').hide();
           $('#after').show();
         },
  } );
  • triggerEnd: the default is false, if set to true triggers the onEnd function even after the countdown has expired. Otherwise the counter stops at zero.

Browser support

countdownCube has been only tested on the latest Chrome, Firefox and Safari.

License

countdownCube is released under the MIT license

Copyright (c) 2013 Ali Cigari @oofaish

Feel free to use it as it wish, but I would appreciate a plug to my website: http://www.cigari.co.uk

Comments
  • Add a link to the live demo and some minor polishing of the demo and README

    Add a link to the live demo and some minor polishing of the demo and README

    Hi,

    here's another pull request (the last, I think :wink:). I've added a link to rawgit.com that allows rendering the demo page live (and it's updated in a short time if a new commit is pushed).

    I have also added a new section in the README. I'm very happy with the results.

    C

    opened by CristianCantoro 4
  • Other language support

    Other language support

    Hello! Is there an option to translate the Year, Month, Day, Hours, Minute and Seconds.

    Because I'm using it on site that is in french and I would like to translate the countdown in french.

    So I was wondering there is a way to do it or you're planning to add the feature. Yes I know I can hardcode it myself but hacking the code plugin is still not a good practice.

    But anyways thanks a lot for your plugin. It works great!

    opened by jgb-solutions 4
  • Add showDaysOnly option and translations

    Add showDaysOnly option and translations

    As per the commit title, this pull request adds two new options:

    • showDaysOnly that, if set to true shows the differences only up to days
    • labelsTranslations, a dictionary that can be used to translate the labels (year, month, day. hour, minute, second)
    $('#counter-days-only').countdownCube( {
      target: new Date( 'March 1, 2018 10:00:00' ),
      cubeSize: 150,
      background:  '#ffffff',
      color: 'blue',
      labelsTranslations: {'year': 'anni',
                           'month': 'mesi',
                           'day': 'giorni',
                           'hour': 'ore',
                           'minute': 'minuti',
                           'second': 'secondi'
                           },
      showDaysOnly: true,
      } );
    
    opened by CristianCantoro 3
  • Conflict with Array extensions

    Conflict with Array extensions

    Hi,

    First of all: great little plugin!

    In one of my projects, I have extended the Javascript Array class with some added functionality, for example:

     Array.prototype.distinct = function ()
        {
            let distinctValues = []
    
            this.forEach(function (value)
            {
                if (distinctValues.includes(value))
                {
                    return
                }
    
                distinctValues.push(value)
            })
    
            return distinctValues
        }
    

    If I include these extensions whilst also using countdownCube, in the above example, I get the error that 'this.forEach is not a function', the reason being that somehow, 'distinct' is tagged on as an entry in 'this.topTags' (although logging 'this.topTags' to the console won't show it), which causes the 'this' context of 'distinct' to be:

    cube = element.append('<section></section>')
                                   .children(':last')
                                   .attr('id', tag )
                                   .addClass( "countdownCubeContainer" )
                                   .append('<div></div>')
                                   .children(':last')
                                   .addClass('countdownCubeCube')
                                   .data('side', 'show-front');
    

    I don't know why this happens, probably my own short comings, but it might as well be a bug in the core javascript for all I know.

    The fix I implemented is to explicitly define 'this.topTags' as an Array and cycle through it using the 'of' keyword (i.s.o cycling through it with the 'in' keyword) like so:

    if( options.showDaysOnly ) {
        this.topTags = new Array( 'day','hour', 'minute', 'second' );
        this.loadingTags = [ 'LOAD', 'ING.', '....', '....'];
    }
    else {
        this.topTags = new Array( 'year', 'month', 'day','hour', 'minute', 'second' );
        this.loadingTags = [ 'LO', 'AD', 'IN', 'G.', '..', '...'];
    }
    
    this.transformNames =  [ '-webkit-transform', '-moz-transform', '-o-transform', 'transform' ];
    
    //add the figures, etc to the div
    let tagIndex = 0;
    
    for( let tag of this.topTags ) {
    
        cube = element.append('<section></section>')
                   .children(':last')
                   .attr('id', tag )
                   .addClass( "countdownCubeContainer" )
                   .append('<div></div>')
                   .children(':last')
                   .addClass('countdownCubeCube')
                   .data('side', 'show-front');
    
        /*this is horrible, chaining would be much cooler*/
        this.addFigures( cube,
                         this.classes,
                         this.loadingTags[ tagIndex++ ] );
    
        element.children(':last')
            .append('<div></div>')
            .children(':last')
            .html(options.labelsTranslations[tag])
            .addClass('countdownCubeTitleDiv');
    }
    

    How to replicate? Simply add the 'Array.prototype.distinct' extension to countdowncube.js

    Regards,

    Edwin

    opened by ghdi 2
  • onEnd callback error

    onEnd callback error

    Hi. Thanks for sharing your job. I'm facing with error after using this plugin. The error content is: countdownCube.min.js:1 Uncaught TypeError: Cannot read property 'id' of undefined at Object.onEndCallback (countdownCube.min.js:1) at Object.setTimeLeft (countdownCube.min.js:1) at countdownCube.min.js:1

    onEndCallback | @ | countdownCube.min.js:1 -- | -- | --   | setTimeLeft | @ | countdownCube.min.js:1   | (anonymous) | @ | countdownCube.min.js:1   | setTimeout (async) |   |     | init | @ | countdownCube.min.js:1   | Plugin | @ | countdownCube.min.js:1   | (anonymous) | @ | countdownCube.min.js:1   | each | @ | jquery-3.3.1.min.js:2   | each | @ | jquery-3.3.1.min.js:2   | $.fn.countdownCube | @ | countdownCube.min.js:1   | (anonymous) | @ | (index):328

    Thanks a lot.

    opened by Hamidnch 1
  • Add onEnd and triggerEnd options to trigger an event when the counter ends

    Add onEnd and triggerEnd options to trigger an event when the counter ends

    As per the commit title, I have added two options:

    • onEnd: expects a function that is triggered when the counter reaches the end. The default does nothing. A typical use is hiding the counter and showing a different - previously invisible - element of the page. This gives the effect of something appearing when the countdown ends. Here's an example:
    $('#counter').countdownCube( {
      target: '2018-12-03T11:00:00Z',
      onEnd: function(e) {
               $('#counter').hide();
               $('#after').show();
             },
      } );
    
    • triggerEnd: the default is false, if set to true triggers the onEnd function even after the countdown has expired. Otherwise, the counter shows the word LOADING....
    opened by CristianCantoro 1
  • Fix calculation of days, update minified JS

    Fix calculation of days, update minified JS

    You were too fast with merging :smiley:, I realized there was this minor error (floor should be used instead of ceil) and I did not update the minified version of the library.

    opened by CristianCantoro 1
  • Add timezone support

    Add timezone support

    As per the commit title, this pull request adds timezone support.

    Timezone support can be added with the moment.js and moment-timezone.js libraries. I have updated the README.md and the demo with new instructions.

    This pull request is completely backward-compatible. As a note the target date and time can be specified as a string, I suggest to use using the ISO 8601 format: '2018-03-01T10:00:00Z'.

    opened by CristianCantoro 0
Owner
Wanna be hacker. Doing god's work at Wattson Blue. Sarcastic.
null
Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days hackathon.

Climatic Monorepo project that shows the current weather data and weather forecast for next 7 days. Created from scratch to participate in a 14-days h

Luis Marsiglia 6 Jun 23, 2022
100 Days of Code is a self improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days.

100 Days of Code is a self-improvement tool, where you make a commitment to solve 1 coding problem everyday for the next 100 days. This repository includes a range of tasks, lessons, resources, and challenges on various programming languages to help improve programming skills.

Tarleton Computer Society 7 Dec 14, 2022
Rotating CSS dice in 3D using jQuery. Based on my old snippet on CodePen.

Dice Rotating CSS dice in 3D using jQuery. Based on my old CodePen Roll the dice!. Demo: https://alexerlandsson.github.io/dice/ How to use Include /do

Alexander Erlandsson 6 Dec 14, 2022
jQuery plugin of countdown on html-page

jQuery SyoTimer Plugin jQuery plugin of countdown on html page Demo Examples of usage jQuery SyoTimer Plugin Features Periodic counting with the speci

John 18 Nov 25, 2022
Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Gino 4 Sep 26, 2021
Timetable app (webapp) for SLIIT students of all years

Build status: Timetable App (for SLIIT students) This web app is made for SLIIT students of all years and all specializations. The timetables of most

Pawan Senpura 20 Nov 26, 2022
Rotating slider for selecting numerical values.

Rotating slider for selecting numerical values. Allows mobile friendly precise selection for value from selected range with desired step. Component is especially useful for hybrid application using frameworks like Ionic, Cordova or PhoneGap.

null 0 Sep 27, 2022
Flexible plugin for Logseq that annotates deadline/schedule times with a countdown or time difference

Interval Hints Synopsis Configurable Logseq plugin to annotate deadline and scheduled times with a countdown or interval. Features Block renderer to a

Kerfuffle 8 Aug 29, 2022
With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy.

TimezZ With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy. Features Typescript support Support all en

Valery Strelets 37 Dec 5, 2022
EkoolExtended - Browser extension with bunch of tweaks for the ekool.eu

Ekool Extended Ekool Extended is a browser extension that has a bunch of tweaks for the ekool.eu Since it's a first Alpha version it has only one feat

null 1 Jan 4, 2022
A bunch of utilities for ProTanki.

ProTanki Utilities A bunch of utilities for ProTanki. packet-log.patch.txt Patch (manual applying via JPEXS Free Flash Decompiler) to log incoming and

Daniil Pryima 6 Nov 23, 2022
This project is a countdown system made with HTML, CSS and JavaScript, enjoy it! :)

This project is a countdown system that starts at 10 minutes made with HTML, CSS and JavaScript, enjoy it! ?? You can check the project working on thi

Daniel Burgoa 1 Dec 25, 2021
🍔 Access hours and menus from MC's caf

The Caf at MC The Caf is a webapp that acts as an easy way to access hours and the menu from the cafeteria. It's a Next.js project bootstrapped with c

Micah Lindley 4 Nov 5, 2022
🚀 A script to boost hours in Steam games.

Steam-HourBoost Where can I find the file to add my games? Follow the path below: /steam-hourboost/steam-boost/steam-games.json Where can I find app-i

twenty two 8 Jul 14, 2022
Course material for a ~10 hours introductionary course for Julia. Topics: Introduction, Parallel Programming, Data Science

Development We use Franklin.jl to generate the lecture material. To do so, simply activate the environment, use Franklin and run the local server: act

GregorE 3 Dec 15, 2022
A collection of opening hours-related utilities.

Opening-Hours-Utils A collection of opening hours-related utilities. tl;dr Install by executing npm install @wojtekmaj/opening-hours-utils or yarn add

Wojciech Maj 9 Jan 7, 2023
Apenas uma página que exibe um countdown com a data em que Bolsonaro sai da presidência e tem seu sigilo de 100 anos quebrado

Chá de revelação - Sigilo de 100 anos Descrição Apenas uma página que exibe um countdown com a data em que Bolsonaro sai da presidência e tem seu sigi

Mauricio Taffarel 9 Nov 6, 2022
This extensions adds blocks to help you create your own carnival games in MakeCode Arcade using throwable balls, extra timer functions, and extra game-over options.

Usage This extensions adds blocks to help you create your own carnival games in MakeCode Arcade using throwable balls, extra timer functions, and extr

Microsoft 6 Nov 16, 2022
Aergo Timer Service schedule smart contract function calls

Aergo Timer Service ⏰ Create timers to call functions on your smart contracts Schedule calls based on time interval or on specific date-times For a sm

aergo 3 Mar 10, 2022