Stupid Web Tricks: Automatic content refresh

Take a break and keep your site fresh at the same time. Find out how to dynamically write parts of your Web pages.

By Holly Cunningham


You've fought a mighty battle to keep your site fresh with ever changing content and the latest bells and whistles. Now you're tired and afraid that your fatigue is starting to show. So why not avail yourself of the tricks used by the demimonde for centuries? There's nothing a little careful lighting, some flattering colors, and the element of surprise won't do to make even the most shop-worn goods look appealing. All you have to do is engage in a little trickery by having your page elements change with the tides using a little JavaScript code. Let your much-needed vacation begin!

Paste this code into the <HEAD> of your Web page:

<SCRIPT language="JavaScript"><!—<br> theDay = new Date().getDay();<br> theHour = new Date().getHours();<br> //—></SCRIPT>

Now you have two variables, theDay and theHour, that hold the reader's day of the week (as a number from 0 to 6, starting from Sunday) and hour of the day (from 0 to 23). You will use these variables in scripts (placed in the <BODY> of your page) that will dynamically write parts of your page. You can easily preview your own time- or date-based pages by temporarily resetting your computer's clock.

If it's ecru, it must be Tuesday
For example, for a custom color scheme based on the day of the week, replace your opening <BODY> tag with a script such as this:

<SCRIPT language="JavaScript"><!—<br> bgColors = new Array("thistle", "olivedrab", "aquamarine", "mediumvioletred", "darkred", "orangered", "cornflowerblue");<br> fgColors = new Array("black", "white", "black", "white", "white", "white", "white");<br> document.write('<BODY bgcolor="' + bgColors[theDay] + '" text="'+fgColors[theDay]+'">');<br> //—></SCRIPT>

Or perhaps you'd like a daily image with an optional message:

<SCRIPT language="JavaScript"><!—<br> dayImages = new Array("marat.jpg", "readya.gif", "clock.jpg", "hotel.jpg", "snake.gif", "hotel.jpg", "hotel.jpg");<br> dayMsgs = new Array("", "", "", "Drinks at Hotel Cunningham", "", "Drinks at Hotel Cunningham", "Tea at Hotel Cunningham")<br> document.write('<IMG src="' + dayImages[theDay] + '"><BR>'+dayMsgs[theDay]);<br> //—></SCRIPT>

Touch me in the morning, when I am blanchedalmond
Maybe your audience is unusually perceptive, or maybe you just want to up the tempo. Use a similar script based on theHour to make the appearance change as many times a day as you like—every hour if that's what it takes. Here's an example where we assume that people crave newness from you about four times a day; you could change it to smaller increments by adding new if clauses:

<SCRIPT language="JavaScript"><!—<br> var timeColor, timeMsg<br> if (theHour > 4 && theHour < 12) { // 5-11 morning<br> timeColor="salmon"; timeMsg="Still early...zzzzz"; }<br> if (theHour > 11 && theHour < 19) { // 12-18 afternoon<br> timeColor="chocolate"; timeMsg="MORE COFFEE"; }<br> if (theHour > 18) { // 19-23 evening<br> timeColor="maroon"; timeMsg="Cocktail hour!"; }<br> if (theHour < 5) { // 0-4 ungodly<br> timeColor="midnightblue"; timeMsg="GO TO BED!"; }<br> <br> document.write('<DIV style="background-color:'+timeColor+';color:white">');<br> document.write(timeMsg+'</DIV>');<br> //—></SCRIPT>

You can see how the endless variety afforded by two or more such scripts might relieve some of your viewer fatigue stress. Just be sure the possible combinations coordinate nicely. Then go directly to the airport and bring small bills for the nice stewardess.

Holly Cunningham, a frequent contributor to CNET, is a freelance Web designer who works primarily to keep her Chihuahua in furs.

Editor's Picks