Tutorial: Directing User’s Attention Using jQuery and seekAttention
I had recently been playing with javascript and some of the great open source frameworks which are available to web developers and designers today (MooTools, jQuery, etc) when I stumbled upon a great jQuery plugin by James Padolsey called seekAttention, which not surprisingly, draws your user’s attention towards whichever element on your page you desire using a clean and unobtrusive method. The plugin creates a semi-transparent overlay over the entire page (or div) and leaves a “window” around the intended target. One example of this can be seen on our company homepage, by clicking on the link in the portfolio update on the left hand side.
Getting Started
So how can this effect be achieved on your website you ask? It’s actually quite simple.
I will be starting with the following in the body of my document (source files are available at the end of this post):
<div id="target">
<p>Lorem ipsum ei nec facer urbanitas, per in mutat simul. Iisque fabulas eu mei, noster eruditi qui id. Verterem delicatissimi eu sed, id semper iuvaret salutatus his, et aliquid invidunt vis. Mea consul disputationi comprehensam ad, sit id nonumy integre mediocritatem. Ut kasd minimum incorrupte pri, id cum sanctus albucius interpretaris, postea verterem delicatissimi in eam. Ad novum postulant vel, oporteat vituperata cotidieque cum ad, nostro petentium similique pro ei. Eos putent takimata efficiendi ut, quaeque alterum eum ne.</p>
</div>
<a href="#" id="trigger">Attention!</a>
As you can see, this example uses only a div with an id of “target” and an anchor link with an id of “trigger”. Clicking on the “trigger” will call attention to the “target”.
You will need two script files for this effect, both of which are free and can be found either on the seekAttention webpage or here: seekAttention and jQuery.
Next, upload the two files to a directory on your web server (usually in a folder called “scripts”) and link to them by inserting the following codewithin the <head> tags of your document:
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="scripts/seekAttention.min.jquery.js"></script>
Almost there! Next, insert the following code into the head section of your document:
<script type="text/javascript">
$(document).ready(function(){
$('#trigger').click(function(){
$('#target').seekAttention({
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 0,
paddingRight: 0,
opacity: 0.7
});
return false;
});
});
</script>
To explain the above code: the $(document).ready(function(){…} script surrounds the entire jQuery block of code. When the element with an id of “trigger” dispatches a click event, an element with an id of “target” will call the seekAttention method, which activates the plugin. The parameters below those lines (padding, opacity, etc) are passed to the plugin and can be tweaked to suit your needs (see the seekAttention webpage for more details on the various parameters available).
All you have to do now is upload your files (including the scripts) to your web directory and everything should work perfectly! Clicking the link we made should cause your attention to be elegantly directed towards the above div!
If you have any questions or comments, please don’t hesitate to leave them in the comments below, and I will do my best to get back to you!
Tagged as javascript, jQuery, plugin, tutorial+ Categorized as Design & Development/Web Development