stagetime v0.1.0
stagetime
Latest Release - Documentation - Issues
stagetime helps you show or hide DOM elements based on the browser's local time. This allows you to schedule some content to automatically appear or disappear at a certain time.
Why?
Sometimes you want to show some information on the client, but it's only relevant for a certain period of time. Outside that window of time (e.g., buying tickets to a concert), that information is not relevant and should be hidden.
Note that stagetime
doesn't remove any information from the source code; it merely adds classes to control which information is visible in the browser.
Getting Started
Download the latest release or include the following code on your page:
<style>.stagetime-off { display: none; }</style>
<script src="https://cdn.jsdelivr.net/npm/stagetime@0.1.0/dist/stagetime.js"></script>
Examples
<div data-stagetime-after="2018-01-01" data-stagetime-until="2018-12-31">
This message will appear during the year 2018.
</div>
<div data-stagetime-after="2018-01-01">
This message will appear after 01 Jan 2018.
</div>
<div data-stagetime-until="2018-12-31">
This message will appear until 31 Dec 2018.
</div>
Options
stagetime
will search for elements with the following attributes:
data-stagetime-after
- time to start displaying elementdata-stagetime-until
- time to stop displaying element
Note that you need to specify at least one of these attributes for stagetime
to work properly.
stagetime
will add the following classes:
stagetime-on
- the item is supposed to be displayedstagetime-off
- the item is supposed to be hidden
You may style these however you wish. A recommended style is:
<style>.stagetime-off { display: none; }</style>
Goals & Non-Goals
- The goal of stagetime is to make it easy to show or hide DOM elements for a certain time window.
- It is a non-goal to allow multiple time windows.
License
Licensed under the MIT License.
6 years ago