CODEWITHSUNDEEP
javascriptjquerytimetimezone
Rogier Arends
Rogier Arends

Reputation: 1

Display html content between defined hours mon to friday

i was wondering if there is a quite simple solution to display content between certain hours and only during working days in a Europe timezone?

The hours will be everyday (except weekends) between 9AM and 5PM, between those times a html content should be shown. If possible a different html content from 5PM till 9AM.

Upvotes: 0

Views: 3035

Answers (2)

machineghost
machineghost

Reputation: 35790

The short version is that you use new Date() to get the current date/time, and then you use DOM manipulation to add/remove that content as appropriate. If you want content to change in-between page loads, you'll probably also want a window.setInterval running to update things constantly.

You might want to check out the Moment.js library (http://momentjs.com/), as it has a number of functions which make working with dates/times easier.

Here's a quickie example (without using Moment) that just checks "are we past 5 or not?":

window.setInterval(function() {
    if (new Date().getHours() > 17) { // if it's after 5pm (17:00 military time)
        $('#someContent').hide();
    } else {
        $('#someContent').show();
    }
}, 1000 * 60) // this will run every minute

With that hopefully you can figure out how to add the other needed if checks.

Upvotes: 3

user1888370
user1888370

Reputation:

Here you go! :)

<html>
<head>
<script type="text/javascript">
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth();
var day=date.getDate(); // fixed
function SetDivContent() {
    var div=document.getElementById('date_dependent');
    if (year==2010 && month==11) { // fixed (the JavaScript months order is 0-11, not 1-12)
        if (day>=3 && day<11) { // the following content will be displayed 12/03/2010, 12/04/2010, [...], 12/09/2010, 12/10/2010
            div.innerHTML='content 1';
        }
        else if (day==11 || day==12) { // this one will be displayed 12/11/2010 and 12/12/2010
            div.innerHTML='content 2';
        }
        else if (day>12) { // this one - 12/13/2010 and later, until the end of December
            div.innerHTML='content 3';
        }
    }
    else if (year==2011 && month>=0) div.innerHTML='content 3'; // OPTIONAL - just to ensure that content 3 is displayed even after December.
}
</script>
</head>
<body onload="SetDivContent()">
<div id="date_dependent"></div>
</body>
</html>

answered Nov 30 '10 at 22:16

rhino

Upvotes: 0

Related Questions