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

This entry was posted on Saturday, June 23rd, 2007 at 11:17 pm and is filed under javascript, prototype, scriptaculous. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.