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
    });
});

Source & Download

This plugin is licensed under GPL Version 2.

Download jquery-clickable-1-0b.zip (1,82 KB)

Did you enjoy this?

Support us by sharing this article with your friends. This way we will be able to produce more content like this, and in the end we are all winners!

Comments and Feedback

PixelTango Original © 2010-08-20 | Usage

About the Author

Mickel is a web creative that is constantly looking for new challenges and ventures.

He is the founder of PixelTango, as well as a interactive web design agency. He also likes to DJ and produce music under the name Allic.

Sorry to interrupt, but...

It seems you are using AdBlock to block our advertisement (yes, 1 tiny ad). Displaying ads is essential for us to keep good quality of our posts here at PixelTango.

Please unblock, so that we can keep this site alive!