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/[email protected]/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 element
• data-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 displayed
• stagetime-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

1. The goal of stagetime is to make it easy to show or hide DOM elements for a certain time window.
2. It is a non-goal to allow multiple time windows.

License

Licensed under the MIT License.