“seekAttention” - jQuery plugin

Posted on Wednesday, September 17th, 2008

Recently I’ve been working on a brand new plugin for jQuery. It’s not quite finished and it’s in the "experimental" stages but I think it’s progressed enough for a release.

The new plugin is called "seekAttention" and allows any element on a page to seek the users attention… with added effects! I’ve been careful to take usability and customization into account with this plugin. It’s fully automated - it detects element size and builds an overlay to suit that element and you have a number of options so you get to decide how the plugin behaves.

It’s hard to explain exactly what it does so please have a look here: seekAttention jQuery plugin.

If you have any comments, questions or any bugs to raise please leave a comment on this blog post. As it’s an experimental plugin there are bound to be a few minor issues, especially with older browsers.

23 Responses to ““seekAttention” - jQuery plugin”

#1 :: Claude Says:
September 17th, 2008 at 11:29 pm

Very nice James. By the way, the sample at the very bottom of the demo page doesn’t scroll to the top as expected. I am using FF 3.0.1 on Mac OS/X 10.5.5. It works just fine on Safari.
#2 :: James Says:
September 17th, 2008 at 11:33 pm

@Claude, thanks :). As for the error, do you mind re-checking? I just made a tiny change by mistake but just fixed - you might of seen the error in FF before I made this fix. It’s a long shot but I would appreciate if you could give it one more try.
#3 :: apaella Says:
September 18th, 2008 at 8:20 am

Cool!
#4 :: D. Carreira Says:
September 18th, 2008 at 1:42 pm

Hey, nice plugin!

Thanks for sharing, this could be useful to seek attention of users to something

David Carreira
#5 :: James Says:
September 18th, 2008 at 2:09 pm

Thanks Apaella and David!
#6 :: Evan Says:
September 18th, 2008 at 4:39 pm

Very well done! This could be really useful for a tutorial on how to use a website or something like that!
#7 :: Matt Says:
September 20th, 2008 at 5:42 am

excellent work James, can’t wait to use this in a project
#8 :: Claude Says:
September 20th, 2008 at 7:37 pm

James, sorry for taking so long. It doesn work with FF 3. Thanks.
#9 :: Claude Says:
September 20th, 2008 at 7:38 pm

Sorry, I fat fingered that. It DOES work with FF.
#10 :: Mike Says:
September 21st, 2008 at 10:57 am

I think this idea is a great for usability. I think it will be greatly appreciated by many users.

Great Job-
#11 :: James Says:
September 21st, 2008 at 7:54 pm

@Evan, Matt and Mike - thanks, I am glad you all like it!

@Claude, not to worry … Thanks for re-checking!
#12 :: Connor Zwick Says:
September 22nd, 2008 at 12:56 pm

Hey James,

This is a terrific plug in. Nice concept!

#13 :: darrin Says:
September 22nd, 2008 at 9:52 pm

Having trouble getting this to work. linked to both jquery and seekattention scripts properly.

Assigned id’s of target (to element to be isolated) and trigger (to link which will trigger effect):

<a>Portfolio</a>

and

<a>Our new Portfolio!</a>

and included this script block in the head:

$('#trigger').click(function(){
        $('#target').seekAttention({
            paddingTop: 5,
            paddingBottom: 5,
            paddingLeft: 5,
            paddingRight: 5,
            opacity: 0.7
        });
        return false;
});

and its not working. any suggestions? do i need to initialize jquery or anything?

Thanks!

#14 :: darrin Says:
September 22nd, 2008 at 9:54 pm
sorry my link code showed up as the links themselves! they are (without opening/closing braces):
```
<a id="target" rel="nofollow">Portfolio</a>our new portfolio!</a>
```

#15 :: James Says:
September 22nd, 2008 at 10:02 pm

Her Darrin,
It looks like you’ve got your IDs mixed up..?
Try this:

HTML:

<a id="trigger" href="#" rel="nofollow">Our new Portfolio!</a>
<div id="target">
    Some text...
</div>

JS:

$('#trigger').click(function(){
        $('#target').seekAttention({
            paddingTop: 5,
            paddingBottom: 5,
            paddingLeft: 5,
            paddingRight: 5,
            opacity: 0.7
        });
        return false;
});

#16 :: bony Says:
September 23rd, 2008 at 1:39 am

Great plugin, thanks!
But I have a small issue: then a page fades, background-color of form tag remains unfaded in IE6 It means there are more than one attentioned element on the page caused.
#17 :: bony Says:
September 23rd, 2008 at 1:43 am

oops, it’s eaten the name of tag I meant “select”.
#18 :: TheUiGuy Says:
September 23rd, 2008 at 3:02 am

I like it. I think you are on to something nice here. My first reaction (bare with me) was that this was a little obtrusive, but then I realized that it might be a tool for reading. I immediately thought “what if this was a tool for anyone, especially those that are impaired” to more easily read stories or articles. There is not much difference from the way you are positioning it, but I guess its more like a magnifying glass sort of tool. Either way, its pretty cool.
#19 :: redsquare Says:
September 25th, 2008 at 10:17 am
Nice work, just a little performance improvement. Where you reuse the same selector over and over e.g $(elem) & $(this) try setting them into a local var
e.g.
```
$elem = $(elem);
```
Cheers
#20 :: tom Says:
September 25th, 2008 at 3:45 pm

very nice plugin
#21 :: sb Says:
October 4th, 2008 at 5:45 am

Nice plugin.. I can think of a few good uses!
#22 :: fm Says:
October 8th, 2008 at 5:28 am

this plugin is great but i wont follow the specific area when user resize the browser.
#23 :: James Says:
October 29th, 2008 at 7:13 pm

Thanks for the comments!

@fm - I can see why’d you want to do that - the problem is that the plugin would basically have to re-written to accommodate that functionality, something I simply don’t haven’t got enough time to do at the moment.

@redsquare, great tip! Thanks!