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

Posted June 9, 2009 by Brian Cray

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.

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

(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

$(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

About the author

Brian Cray is a Columbus, Ohio-based web entrepreneur & consultant. View some of Brian’s work in his portfolio and learn how to make kick ass websites by reading his blog.

Brian Cray: Measurement-driven, user-focused web entrepreneur & consultant