TimeIT.js
jQuery plugin to Show/Hide Content at Set Date/Time

When to use


Use TimeIT.js when you...

  • need to show/hide content on a simple static web page before/after a certain date
  • don't have access to back-end to make a conditional statement or time your content
  • using CMS that does not have functionality that shows content based on date and time
  • are not familiar with programming
  • want a simple solution to time your events and content

Dependencies and prerequisites

  • You need access to source code of a page to link a plugin to your site/page.
  • Plugin is using jQuery, so you need to have it on your website. Otherwise you can link jQuery from CDN.

Troubleshooting

Implement


  1. Upload timeit.js plugin to your site or link from CDN
    <script src="http://res.cloudinary.com/vsevolodts/raw/upload/v1503371762/timeit.min.js"></script>
  2. Make sure jQuery.js library is loaded on your page:
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  3. Add the class .timeit to an element you want to manipulate
  4. Specify date(s) and time when you want to display data-start="2016-01-31" or hide data-end="2019-06-06 14:30 content. Acceptable format of time / date:
    YYYY-MM-DD HH:MM Exact day and time
    YYYY-MM-DD - day only (starts on midnight local user time)
    HH:MM - Hours and minutes (for repetetive events)
    See examples.
  5. Final example of the code:
    <div class="timeit" data-start="2017-12-31" data-end="2018-01-31 23:59">
    	This content will be shown only in January 2018
    </div>
    ...
    <script src="/js/timeit.js"></script>
    
    
  6. Optional: define what you want to do with the dates (hide by default) by altering .hiddencss class that are added to expired event.

Examples


Basic examples

Hide content after a date

May 5th, 2016 no start, past end = hidden
<div data-end="2016-05-05" class="timeit">May 5th, 2016</div>
End on future date of September 21st, 2019, no start date = shown
<div data-end="2019-09-21" class="timeit">September 21st, 2019</div>
January 10th, 2017 start in the past, no end = shown
<div data-start="2017-01-10" class="timeit">January 10th, 2017</div>

Show content between dates

  • whithing a range = shown
  • <div data-start="September 14th, 2018" data-end="September 28th, 2018" class="timeit">between last and next week</div>
    * note that the end date is set to the next day after the last day when the content need to be shown
    June - July 2013 past range = hidden
    <div data-start="2016-06-30" data-end="2016-07-01" class="timeit">June - July 2016</div>
    Jan-Feb 2019 future range = hidden
    <div data-start="2019-01-01" data-end="2019-03-01" class="timeit">Jan-Feb 2019</div>

    Show content after a date (no expiration)

  • June 31, 2016 shown - current event
  • Jan 1st, 2019 hidden - future event

  • Complex solutions

    Repetetive daily event

  • 5:10 PM - 6 PM daily

  • Repetetive event with a start/end date

  • Show content from 12AM to 12PM daily starting Sept 1, 2016


  • Builder


    I want to
    content
    Start date:
    End date:
    <div class="timeit" data-start="2013-12-31" data-end="2020-01-01 00:00">
    	This content will be shown between 2013-12-31 and 2020-01-01 00:00
    </div>
    ...
    <script src="/js/timeit.js"></script>