seekAttention v.1 jQuery plugin

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:

• Definable area is covered in semi-transparent (opacity can be changed) colour of choice leaving the target element uncovered.
• Clicking anywhere within the definable "container" overlay will remove it.
• Simply hovering over the target element will also result in the overlay being removed.
• Works very well in Firefox 2/3, Google Chrome and Safari (on Windows). It works quite well on IE7 and Opera.

Available options:

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

• container

  Possible value: CSS selector as string, e.g. ".elem #elem p a" OR an element reference, e.g. $(this).parent() or document.getElementById('elem');

  This can be changed to any element which surrounds the target element. If you want the overlay to stretch throughout the whole document like this then you don't need to define this option as that's what it is by default. If, however you want the container to be another element like this then just define it as a CSS selector (e.g. #content .aClass #myContainerBox). Remember, the container element does not necessarily have to be a parent of the target element - all that's required is that it surrounds the target element. So, if the container is a parent but is positioned in such a way that it does not surround the target element then the plugin will intentionally fail.

  Example:

  $('#elem').seekAttention({
      container: '#the-container'
  });
  

• color

  This option can either take a hexidecimal colour reference (e.g. #F0F0F0) or an actual colour (e.g. 'red'). You can tryout some different colours here.

  Example:

  $('#elem').seekAttention({
      color: '#F0F0F0'
  });
  

• opacity

  Any number between 0 and 1 is fine, I recomend between 0.3 and 0.6. Be aware that what you're defining here is the overlay's opacity. The default is 0.55.

  Example:

  $('#elem').seekAttention({
      opacity: 0.4
  });
  

• fade

  This can be either be set to true or false. It controls whether or not the overlay will fade in and out. If set to false be aware that the target element will still pulse. To stop everything fading or pulsing you'll have to set pulse and fade to false. By default fade is set to true

  Example:

  $('#elem').seekAttention({
      fade: false
  });
  

• fadeSpeed

  This defines the speed of fading. The lower the number the faster the overlay will fade in/out. The number defines the amount of milliseconds the fade will last. The default is 400. If you want it to fade faster than you might want to put it down to 200 and if you want it to be a slower fade then you could highten it to 600. This option will not accept anything other than an integer.

  Example:

  $('#elem').seekAttention({
      fadeSpeed: 800
  });
  

• hideOnClick

  This option can either be set to true or false. By default it's set to true which means that when the overlay has appeared the user can simply click anywhere on it to get rid of it. You can disable this by setting this option to false.

  Example:

  $('#elem').seekAttention({
      hideOnClick: false
  });
  

• hideOnHover

  This option can either be set to true or false. By default it's set to true which means that when the overlay has appeared the user can hover anywhere within the target element to get rid of the entire overlay. The idea behind this is as follows: If you want the user to pay attention to a specific form field or piece of text then nine times out of ten there is a need for the user to interact with that element. Hovering over it will immediately get rid of the overlay making that element usable without any delay (i.e. there is no fading out when the user hovers; everything dissappears immediately), thus making it possible for the user to interact with the target element straight away. If you don't want this feature then set this option to false.

  Example:

  $('#elem').seekAttention({
      hideOnHover: false
  });
  

• pulse

  This can be either be set to true or false. It controls whether or not the overlay of the target element will fade in and out continusly. I'm not talking about the surrounding overlay - I am talking about the overlay which is floated directly above the target element - in the demos below you can see what I mean...

  Example:

  $('#elem').seekAttention({
      pulse: false
  });
  

• blur

  This option can either be set to true or false. The "blur" refers to a smooth outline of the target element. In other words, instead of having a distinct line between the overall overlay and the target element you can have a much smoother line by leaving this option at it's default, which is true. If you don't know what I'm talking about then please have a look at the demos below (look closely). Please note that this blur feature is not enabled on IE6 since it screws up! :(

  Example:

  $('#elem').seekAttention({
     blur: false
  });
  

• pulseSpeed

  This defines the speed of pulsing. The lower the number the faster the target element overlay will fade in/out. The number defines the amount of milliseconds the pulse will last on each fade in/out. The default is 400. If you want it to pulse faster than you might want to put it down to 200 and if you want it to be a slower pulse then you could highten it to 600. This option will not accept anything other than an integer.

  Example:

  $('#elem').seekAttention({
     pulseSpeed: 800
  });
  

• paddingTop

  This option refers to padding you can apply to the top of the target element overlay. The default is 0. This option only accepts a number, which is a pixel value. It will fail if you pass a string/object/array.

  Example:

  $('#elem').seekAttention({
     paddingTop: 5
  });
  

• paddingRight

  This option refers to padding you can apply to the right of the target element overlay. The default is 0. This option only accepts a number, which is a pixel value. It will fail if you pass a string/object/array.

  Example:

  $('#elem').seekAttention({
     paddingTop: 5
  });
  

• paddingBottom

  This option refers to padding you can apply to the bottom of the target element overlay. The default is 0. This option only accepts a number, which is a pixel value. It will fail if you pass a string/object/array.

  Example:

  $('#elem').seekAttention({
     paddingTop: 5
  });
  

• paddingLeft

  This option refers to padding you can apply to the left of the target element overlay. The default is 0. This option only accepts a number, which is a pixel value. It will fail if you pass a string/object/array.

  Example:

  $('#elem').seekAttention({
     paddingTop: 5
  });
  

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:

• In IE6, if the container is set to "body" or "document" it strecthes beyond the actual document's width resulting in a horzintal scrollbar.
• In IE7/IE6 If the target element is an inline element such as an anchor or span it renders incorrectly. It works best with block level elements or those set to "block" in CSS.
• IE6 and IE7 have general positioning issues. (minor)
• Opera 9.5 has a scrolling issue - it scrolls to the top of the page and then down to the element instead of starting at current scroll position.»

Demos

• Code:

  $('#elementName').seekAttention();
  

• Notice the overlay does not stretch the entire page...

  Code:

  $('#elementName').seekAttention({
      container: '#content'
  });
  

• 
  

  Pellentesque sodales diam. Aenean vel dui non ligula vulputate tincidunt. Mauris auctor nisi. Nam condimentum sem quis lectus. Fusce convallis risus at massa. Sed nisi urna, vulputate quis, ultricies nec, pretium vel, leo. Maecenas cursus arcu in sem. Suspendisse potenti. Nulla malesuada erat id nisl. Proin pulvinar pharetra dui. Sed gravida mattis nulla. Nulla feugiat nulla. Integer molestie egestas nisi. Phasellus aliquet, lectus ac fringilla posuere, justo est laoreet sem, convallis interdum leo augue vel nulla. Suspendisse laoreet metus quis sem.

  Code:

  $('#my-important-link').seekAttention({
      paddingTop: 5,
      paddingBottom: 5,
      paddingLeft: 5,
      paddingRight: 5,
      opacity: 0.7
  });
  

• Pellentesque sodales diam. Aenean vel dui non ligula vulputate tincidunt. Mauris auctor nisi. Nam condimentum sem quis lectus. Fusce convallis risus at massa. Sed nisi urna, vulputate quis, ultricies nec, pretium vel, leo. Maecenas cursus arcu in sem. Nulla malesuada erat id nisl. Proin pulvinar pharetra dui. Sed gravida mattis nulla. Nulla feugiat nulla. Integer molestie egestas nisi. Phasellus aliquet, lectus ac fringilla posuere, justo est laoreet sem, convallis interdum leo augue vel nulla. Suspendisse laoreet metus quis sem.

  Code:

  $('#para').seekAttention({
      pulse: false
  });
  

• red blue green orange purple

  Pellentesque sodales diam. Aenean vel dui non ligula vulputate tincidunt. Mauris auctor nisi. Nam condimentum sem quis lectus. Fusce convallis risus at massa. Sed nisi urna, vulputate quis, ultricies nec, pretium vel, leo. Maecenas cursus arcu in sem. Nulla malesuada erat id nisl. Proin pulvinar pharetra dui. Sed gravida mattis nulla. Nulla feugiat nulla. Integer molestie egestas nisi. Phasellus aliquet, lectus ac fringilla posuere, justo est laoreet sem, convallis interdum leo augue vel nulla. Suspendisse laoreet metus quis sem.

  Code:

  $('#para').seekAttention({
      color: $('#select-menu').val()
  });
  

• Pellentesque sodales diam. Aenean vel dui non ligula vulputate tincidunt. Mauris auctor nisi. Nam condimentum sem quis lectus. Fusce convallis risus at massa. Sed nisi urna, vulputate quis, ultricies nec, pretium vel, leo. Maecenas cursus arcu in sem. Nulla malesuada erat id nisl. Proin pulvinar pharetra dui. Sed gravida mattis nulla. Nulla feugiat nulla. Integer molestie egestas nisi. Phasellus aliquet, lectus ac fringilla posuere, justo est laoreet sem, convallis interdum leo augue vel nulla. Suspendisse laoreet metus quis sem.

  Code:

  $('#para').seekAttention({
      paddingTop: 15,
      paddingBottom: 15,
      paddingLeft: 15,
      paddingRight: 15
  });
  

• Pellentesque sodales diam. Aenean vel dui non ligula vulputate tincidunt. Mauris auctor nisi. Nam condimentum sem quis lectus. Fusce convallis risus at massa. Sed nisi urna, vulputate quis, ultricies nec, pretium vel, leo. Maecenas cursus arcu in sem. Nulla malesuada erat id nisl. Proin pulvinar pharetra dui. Sed gravida mattis nulla. Nulla feugiat nulla. Integer molestie egestas nisi. Phasellus aliquet, lectus ac fringilla posuere, justo est laoreet sem, convallis interdum leo augue vel nulla. Suspendisse laoreet metus quis sem.

  Code:

  $('#para').seekAttention({
      pulseSpeed: 800
  });
  

• 

  Code:

  $('#my-img').seekAttention({
      container: $(this).parent()
  });
  

• Code:

  $('#box-at-top').seekAttention();
  

Installation:

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

• seekAttention [full] (10.3k)
• seekAttention [minified] (5.9k)

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. :-)