Brian Cray ··· Home > Blog > Javascript > New jQuery plugin: linkNotify() - An inline link click notification

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

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

(function($) {
    $.fn.linkNotify = function (notification) {
        notification = notification || 'Loading…';
        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