PixelTango

jQuery Clickable – Making Your HTML Containers Go “Click Click Boom”!

This is a simple (351 bytes gzipped) jQuery plugin that transforms regular HTML-containers, such as divs, into clickable elements that acts almost as an anchor; with support for status bar information, focus/blur, target (_blank etc.) and more.

This plug-in allow you to create more usable websites, where users will be able to click entire containers instead of just small links.

The setup is easy and users without JavaScript will still be able to use your site.

Installation

Include jQuery and jQuery Clickable in the <head>-element.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="JavaScripts/jquery.clickable.min.js"></script>

Demos & Sample Usage

jQuery Clickable Demos

Just call clickable() for default behaviour.

// Short-hand notation for DOM-loaded
$(function () {
    // Default behavior (first child anchor element will be used as target)
    $('div').clickable();

    // You can also specify target anchor
    $('.make-clickable').clickable('a.clickable-target');

    // Settings & configuration, use last child anchor as target
    $('.red').clickable('a:last', {
        hoverClass: 'red',
        changeCursor: false
    });
});