time

Triggering a CSS Event Based On Time

At work one day, I had a client request a website change at 6PM and I wouldn’t be near a computer to make the simple text change. Since we don’t have a content management system, it was up to me to devise a solution.

So to trigger the change, I used a little bit of jQuery. This basic script just says, if the month is 11 (December) and the date is less than or equal to the 22nd, then any element with the class “remove” will show and any element with the class “show” will be hidden. When the date becomes December 13, then any element with the class”remove” will be hidden and any element with the class “show” will be visible.

With this quick script I can specify the minute, hour, day, month and/or year that I’d like certain elements to show by assigning them a CSS class of remove or show. The time is based on your server’s time.

More Info

• More about JavaScript Operators
• More about JavaScript Date Referencing
Stack Overflow Question That Inspired The Post

2 Comments

  1. Thank you. You helped me so much. I’ve been looking for this for months, and no one in any forum was willing or able to assist. You’re awesome.

  2. Just FYI, this is not a CSS solution, it’s a JS one.

    Yes, it *uses* CSS (barely), but the operational logic is handled with JS. This fiddle is pure HTML and JS. There are no class identifiers, no id identifiers. The only CSS that even makes an appearance is that added by jQuery’s hide() and show() methods.

    https://jsfiddle.net/kjgyo4ms/0/

    But even that can be removed simply by deleting the elements from the DOM instead of just hiding them.

    https://jsfiddle.net/kjgyo4ms/1/

Leave a Reply to Jon Sanders Cancel reply