seekAttention v.1 jQuery plugin

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
});

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
});

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();