Tutorials from 2008

Make a Javascript Clock

Although there are many ways to make a clock using Javascript, most use Javascript’s date() object and the setInterval() method. In this tutorial we’ll start by building a clock using these simple functions. Then we’ll explore some interesting ways of optimizing our clock, and hopefully learn a whole bunch of Javascript along the way.

Getting the current time

Let’s kick things off by getting the current time with Javascript. To do so, we will need the Javascript date() object. Remember that this gets the client-side time, e.g. the time in the user’s browser, not the actual time on the server. Client-side time is great for situations like ours, since it takes away any time-zone localization problems.

The date() object is simple enough to use, just instantiate it:

var d = new Date();

Then you can call any properties of this object, getMinutes(), getDay(), getDate(), etc. … (more…)

A Javascript Event Handler Script

Do you remember the dark days of HTML? A million inline properties that were a nightmare to handle even on the smallest websites. Thankfully CSS came along, and good developers now control most of their styling through a centralized stylesheet.

So why shouldn’t we do the same thing with Javascript? A bunch of inline events all over the document with onclick=”" or onmouseover=”" is just as bad as inline styles or font-tags.

However, attaching these event listeners from a central Javascript poses a challenge, since the listener implementation differs from browser to browser. While there are a lot of scripts to attach event listeners, in 2001 Scott Andrew came up with an excellent cross-browser event handler script.

For our Javascript code-library, we’ll use a modification of it:

function addEvent(obj, evType, fn){
if (obj.addEventListener){
(more…)

A Leading Zeros Function

Although Javascript has an excellent method for attaching trailing zeros to decimals, there is no native function to attach leading zeros. For example, if you are dealing in currency, and want ten cents to appear as .10, instead of .1, you would just write:

var theNumber = .1;
theNumber = theNumber.toFixed(2);

Javascript’s toFixed() is great for trailing zeros, but what if you wanted a fixed number of leading zeros? If you wanted 10 to display as 0010?

A leading zeros function is handy tool in any Javascript library, so let’s write one now. We’ll need two variables: a number to format and the number of digits. We’ll change the number into a string, then attach leading zeros (more…)

Hacking sIFR 2′s Font Replacement

sIFR 2

With sIFR 3 still in beta, let’s explore hacking sIFR 2 to behave with more of today’s Flash functionality.

To get started, download sIFR 2. A common complaint about sIFR font replacement is that the fonts look too pixelated or light. A quick trick to fixing this is to up the Flash version from 6 to 8. Edit “sifr.js” on line 7 change “var a=6″ to “var a=8″ so that we’re detecting for version 8. The fonts won’t look perfect, but they will be noticeably better.

Next, we can add letter-spacing functionality to sIFR. Open up “dont_customize_me.as” (don’t worry) and place this at line 92:

if (letterSpacing != null) fmt.letterSpacing = Number(letterSpacing);

With this technique we control the letter spacing using flash vars:

sFlashVars:”otherflashvar=true&letterSpacing=2″

Finally, when you publish, make sure to export it for Flash version 8 with ActionScript 2.0. … (more…)

Privatize a Group of JavaScript Functions

It’s a common problem in JavaScript: to use private functions you define them as an object. Later, when interfacing this object with some JavaScript library, you discover that several of the namespaces overlap.

While there is certainly some debate as to how to write an unobtrusive set of JavaScript functions, the most elegant solution is as always very simple. Basically, you wrap the set of functions in a nameless function, and then call this function immediately. The syntax we are going to use works like this:

(function(argument) {
alert(argument);
}) (‘What you want to alert’);

If you’re unfamiliar with the notation, we are declaring a nameless function, then calling this function immediately with the final set of parentheses.

This is an excellent way to isolate any functions since everything is protected within the scope of the function. Now let’s strip it down a bit, … (more…)

Folding Side Nav with jQuery

With jQuery, coding side navigation with drawers that expand and collapse is a piece of cake.

Let’s start with some best-practices HTML/CSS navigation:

<ul id=”side-nav”>
<li class=”current”>
<a href=”/”>Products</a>
<ul>
<li>
<a href=”/apples”>Apples</a>
</li>

<li>
<a href=”/bananas”>Bananas</a>
</li>
</ul>
</li>

(more…)