notebook

FAQs are tedious, but we can make their usage much more enjoyable (although I use this word lightly) by imroving the User Experience slightly.

Normal FAQs jump from the list of questions to the answer; with a simple bit of Javascript the page will smoothly scroll to the answer, and then–as a bonus–the answer will flash slightly.

Event.observe(window, 'load', function()
{
   $$('a[href^=#]:not([href=#])').each(function(element)
   {
      element.observe('click', function(event)
      {
         new Effect.ScrollTo(this.hash.substr(1),
         {
            offset: -12
         });
 
         if ( this.hash.substr(1) !== 'top' )
         {
            if ( Prototype.Browser.IE )
            {
               $(this.hash.substr(1)).setStyle({
                  backgroundColor: '#fff'
               });
            }
 
            Effect.Pulsate(this.hash.substr(1),
            {
               from: 0.5,
               pulses: 5
            });
         }
 
         Event.stop(event);
      }.bindAsEventListener(element));
   });
});

This script requires script.aculo.us

The prototype javascript library is one of the most brilliant, time-saving tools a web developer can use. It’s so easy to use this in conjunction with script.aculo.us to create some user-friendly “drag-and-drog reordering elements with auto-save” to a page.

I’ve used it in a giant database-driven application we’re developing, and it has helped to trim hours of work down to mere minutes.

UPDATE: My new favourite thing!