6 September 2010
This page includes the analog clock from coolclock and a header that changes appearance at different times of day using four different gradients. Both behaviors run on a javascript timer - the setTimeout() function. The page uses HTML5 semantics, a canvas element and CSS3 gradients. This page is particularly cool because the header appearance changes automatically with the time - the page doesn't even need to be refreshed.
Adding the CoolClock to the header
- Download the jquery and coolclock scripts
- Add the jquery and the coolclock scripts
- Add the canvas tag with the CoolClock to the header element
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="coolclock.js"></script>
<script type="text/javascript" src="moreskins.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript" src="coolclock.js"></script>
<script type="text/javascript" src="moreskins.js"></script>
<canvas id="clockid2" class="CoolClock:classic2"> </canvas>
The header styles
- Create four classes with background set to gradients. You may want to use this CSS3 Gradient Generator.
- Add an id attribute to the header element called sky and a default class of morning.
.morning {
background: -webkit-gradient( linear, right bottom, left top, color-stop(0.12, rgb(247,255,10)), color-stop(1, rgb(245,142,135)) );
background: -moz-linear-gradient( right bottom, rgb(247,255,10) 12%, rgb(245,142,135) 100% );
}
background: -webkit-gradient( linear, right bottom, left top, color-stop(0.12, rgb(247,255,10)), color-stop(1, rgb(245,142,135)) );
background: -moz-linear-gradient( right bottom, rgb(247,255,10) 12%, rgb(245,142,135) 100% );
}
<header id="sky" class="morning">
<canvas id="clockid" class="CoolClock:classic2"></canvas>
</header>
<canvas id="clockid" class="CoolClock:classic2"></canvas>
</header>
Add the time of day functionality to coolclock.js
- Locate the render() function in the code, starting at line 214 through 254.
- At the bottom of the render() function - before the ending right brace, add this code:
// Update the Header Background for the time of day
var sky = document.getElementById('sky');
if (hour > 3) { sky.className = "morning"; }
if (hour > 10) { sky.className = "afternoon"; }
if (hour > 17) { sky.className = "evening"; }
if (hour > 21 || hour < 4) { sky.className = "night"; }
var sky = document.getElementById('sky');
if (hour > 3) { sky.className = "morning"; }
if (hour > 10) { sky.className = "afternoon"; }
if (hour > 17) { sky.className = "evening"; }
if (hour > 21 || hour < 4) { sky.className = "night"; }