Tutorials from January, 2009

Controlling Animation Timing in jQuery

Timing animations in jQuery can appear confusing

Animation and function timing can often seem like an uphill battle in Javascript. Thankfully jQuery’s variety of timing control mechanisms provide excellent alternatives to Javascript’s standard order of function processing.

With both callback functions and chainable methods, jQuery allows much greater control over animation timing than Javascript alone. Callback functions provide the ability to execute a function once an animation has completed. Chainable methods allow us to stack a series of operations on a single object. Combining the two, jQuery provides near perfect control over the timing of animations.

Build a Simple Flash MP3 Player in AS2

Making a MP3 player is really simple using Flash and AS2. First open up an FLA in Actionscript 2.0 format. In the first frame, open the actions window and write:

var simple_mp3:Sound = new Sound();
simple_mp3.loadSound( ‘example.mp3’, true );

Here we’re loading the MP3 ‘example.mp3’. The second variable in loadSound() is whether to stream the media. If you would like to wait until the MP3 loads completely, just set this to false.

Supporting the Browser Back Button with Javascript

How to support the browser back button

When developing a Javascript-heavy, AJAX-riddled site, I often run into a 2.0 type of problem: supporting the browser back button. While it’s wonderful to build a site where users are brought to various content pages without the window refreshing, this excellent user experience will be completely ruined if you hit the back button and it returns you to the root of the site (or worse the last site you visited).

Thus, integrating the browser becomes an integral part of any Javascript developer’s toolkit.

Making the browser recognize Javascript changes

The first problem we have to solve is making the browser respect a Javascript change as a page change. However we have to be sure not to change the actual location of the page, or our AJAX or Javascript experience will be shot.

One thing to look at is the window location’s … (more…)