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

Categorized as javascript, prototype