jQuery and CSS: What time is it for you?

Most websites today are built with a community mindset, where the target audience is you.

Belonging to several community sites as a member I have dozens of logins to remember but I've also made building community websites my career. So it’s important for me to not only participate but to observe: what makes a successful community?

One of the most popular answers (and perhaps the best): Individualization. Meaning, we make everyone feel like their home page was built for them and them alone. Perhaps we add a nice message saying “Hello John!” or “Welcome back Mary!” And once in a while, we try to push the limits a little.

In this instance, I prototyped a concept: let’s change the theme of a website based on the users current time. Albeit, it’s not as if this hasn’t been done before, but it’s even more of a challenge with just jQuery and CSS. The majority of sites I develop have large backends that are constantly performing queries and processing information server-side... I prefer, however, to keep things client-side if I can.

As always, include our jQuery library:

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">script>

Next, with Javascript, collect the time of day for the current user:

script type="text/javascript">
    datetoday = new Date(); // create new Date()
    timenow = datetoday.getTime(); // grabbing the time, it is now
    datetoday.setTime(timenow); // setting the time now to datetoday variable
    hournow = datetoday.getHours();  //the hour it is
script>

Now we can use the “hournow” variable as a placeholder for the time of day for any user that visits the website!
The fun begins! Let’s change the

color of our page to reflect the time of day:
script type="text/javascript">
$(document).ready(function () {
    datetoday = new Date(); // create new Date()
    timenow = datetoday.getTime(); // grabbing the time it is now
    datetoday.setTime(timenow); // setting the time now to datetoday variable
    hournow = datetoday.getHours();  //the hour it is
 
 
    if (hournow >= 18)  // if it is after 6pm
        $('body').addClass('evening');
    else if (hournow >= 12) // if it is after 12pm
        $('body').addClass('afternoon');
    else if (hournow >= 6)  // if it is after 6am
        $('body').addClass('morning');
    else if (hournow >= 0)  // if it is after midnight
        $('body').addClass('midnight');
});
script>

Now the users current time dictates the class applied to the body element. Let’s add our styling! (Of course you can add all these styles in an external style sheet)

style media="screen" type="text/css">
    .evening { background-color: #301860; // dusk color }
    .afternoon { background-color: #FFD700; // bright yellow }
    .morning { background-color: #FF7E00;  // deep orange, for sunset }
    .midnight { background-color: #000000; //black midnight }
style>

To get a bit fancy, perhaps we add a DIV in our page and set the background image depending on the time of day:

style media="screen" type="text/css">
    .evening { background-color: #301860;  background-image: url(‘settingSun.jpg); }
    .afternoon { background-color: #FFD700; background-image: url(‘noonSun.jpg); }
    .morning { background-color: #FF7E00;  background-image: url(‘risingSun.jpg); }
    .midnight { background-color: #000000; background-image: url(‘theMoon.jpg); }
style>

I hope you find a use for this tip and keep an eye out for more to come...I have tons.

-Cassandra