SLDN
|
Blog

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

Was this helpful?
Yes
No