jQuery Plugin To Show / Hide Content Based On Specific Datetime - easyTimer

File Size: 12.5 KB
Views Total: 3578
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Show / Hide Content Based On Specific Datetime - easyTimer

easyTimer is a dead simple yet useful jQuery plugin that allows to show / hide web content based on the date & time you specify.

How to use it:

1. Load both jQuery library and the jQuery easyTimer plugin in the html document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/easytimer.js"></script>

2. Wrap the content into a container and use the data attributes to specify at which date or time that content should appear or disappear.

<div data-hide-until="2016-01-01">
  <p>
    Hidden content until January 1st, 2016
  </p>
</div>
<div data-remove-until="2016-01-01">
  <p>
    This content will completely self destruct on page load until January 1st, 2016, which it will then show.
  </p>
</div>
<div data-show-until="2016-01-01">
  <p>
    This content will display any time before January 1st, 2016. When that date comes it will hide.
  </p>
</div>
<div data-hide-after="2016-01-01">
  <p>
    This content will appear any time before January 1st, 2016. It will hide on and after January 1st, 2016.
  </p>
</div>
<div data-remove-after="2016-01-01">
  <p>
    This content will appear any time before January 1st, 2016. It will remove from DOM on and after January 1st, 2016.
  </p>
</div>
<div data-show-after="2016-01-01">
  <p>
    This content will be hidden any time before January 1st, 2016. It will show on and after January 1st, 2016.
  </p>
</div>

This awesome jQuery plugin is developed by emiliog07. For more Advanced Usages, please check the demo page or visit the official website.