Please be aware that this page and it's functions will only work correctly if JavaScript is enabled.
We have detected that you do not have JavaScript enabled... Ergo no demo for you! :-p

seekAttention v.1 jQuery plugin

By James Padolsey

Last updated: 17th September 2008, See related blog post

Introduction

PLEASE NOTE THIS IS AN EXPERIMENTAL PLUGIN.
Known issues listed below.

The "seekAttention" plugin gracefully get's your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

The definable area (to be called "container" from this point forward) can be the entire page or any element which surrounds the target element and the colour which overlays the container can also be defined by you.

It's hard to describe so see the demos now by scrolling down.

Not only will it focus the element but it will automatically scroll the page if the element is out of the users view. To see the scrolling in action visit the bottom of the page and click the "apply to box at top of page".

Installation instructions and downloads are at the bottom of the page.

Main features:

Available options:

When initiating the plugin, you can define an entire host of options to fit your needs: (click on each to expand)

Known issues:

Unfortunately there are various issues which I am trying to resolve. For now this plugin is experimental. You can use it freely but please note the following:

Demos

Installation:

To use this plugin you need to download jQuery. You then need to download the seekAttention script:

That's it! Remember to link to both on your page:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="seekAttention.jquery.js"></script>

If you have any questions or concerns please visit my related blog entry and post a comment. :-)