New jQuery plugin: linkNotify() – An inline link click notification

Reading time: About 1 minute

What does linkNotify do?

When a user clicks a link, the link text changes to “Loading…” so the user doesn’t keep clicking.

Download linkNotify() jQuery plugin

Why do I need linkNotify?

Have you ever seen someone click a link over and over waiting for the next page to load? It’s a bad habit that’s actually counter-productive because it causes the next page’s loading to start over. This user behavior phenomenon occurs because browsers do a bad job giving feedback to the user that their click was successful and the next page is loading.

So what’s the problem? Feedback proximity.

Users aren’t looking for feedback where browsers have a progress bar. Users are staring at the page where they clicked and wondering why a new page hasn’t loaded. The loading feedback needs to be closer to the action (the click). That’s why I’ve developed linkNotify—to enhance the feedback of link clicks to improve the user’s experience of control.

The sourcecode of linkNotify
1
2
3
4
5
6
7
8
9
10
11
(function($) {
	$.fn.linkNotify = function (notification) {
		notification = notification || 'Loading&hellip;';
		this.not('[href^="#"]').each(function () {
			$(this).click(function () {
				$(this).html(notification);
			});
		});
		return this;
	};
})(jQuery);
How to use it
1
2
3
4
5
6
$(function () { // on jQuery's DOM load event
 
$('a').linkNotify(); // display "Loading..." when any link is clicked
$('#content a').linkNotify('Loading your next page'); // display 'Loading your next page' on all links in the #content div
 
});
Download

Download linkNotify() jQuery plugin

13 comments skip to comment form

Gopal Raju said— 2 hours later

Cool plugin….gonna use it!

Gopal Raju

#1
Firman Wandayandi said— 6 hours later

Nice one, with this stuff we won’t hurt the user experience.

#2
Paul Davis said— 20 hours later

Interesting little plugin, but unfortunately it interferes with internal links if you just leave the selector as ‘a’.

I’m not a jQuery expert at all, but if there was a way to only apply this to external links without needing to ass classes everywhere, that would make it much more useful.

Good work though! =]

#3
Brian Cray said— 22 hours later

Updated so it doesn’t affect internal page anchors (such as )

#4
Web design tutorials said— 2 weeks later

Nice plugin – thanks for sharing.

#5
KP said— 2 months later

I’m a novice… How do you impliment it? Do you just link the file like i normally do with Javascript files and it does the job or do i add anything extra into the actual html document.

CAn’t wait to use this in one of my projects!

#6
Brian Cray said— 2 months later

KP: Download the plugin and add this right before your </body>:
<script type=”text/javascript” src=”path_to_plugin.js”></script>

Then, somewhere you keep your javascript, add the javascript under the heading “How to use it” above. No need to modify your HTML, it works automagically.

#7
Matteo said— 3 months later

I started using this plugin, it’s ok for chrome, but I got problems with IE8 and Opera. The link changes but is not redirected.

Thanks!

#8
Pavel said— 3 months later

Cool plugin

#9
Gopal Raju said— 4 months later

Great plugin! I’ve a question though…how do I remove the “Loading…” text for image links?

#10
Evanion said— 5 months later

I’m looking for something like this .. but I want it to ask for confirmation that the user wants to leave to a seperate domain.

#11
hell said— 7 months later

PUT UP A DAMN DEMO

#12
tina said— on June 9, 2009 later

useless without a demo

#13
Respond to this post—

Your name

E-mail address will not be published