Clickbox

Usability Boost in 787 Bytes

• Turn every HTML element on your site into a big clickable area
• No more small anchor elements
• Works even with custom Events
• Links inside the clickbox are still clickable
• Passes JSLint

Its so easy to include

• Include jQuery and the clickbox script jquery.clickbox.min-noconfig.js
• Add the class "clickbox" to every element that should be turned into the box.

Example:

 <div class="clickbox">Hello <a href="#">World</a></div>
 <script src="jquery.clickbox.min-noconfig.js"></script>

• Thats it! Now the whole <div> Element is clickable.

Custom Settings

• You can also include the minified version and call the clickbox method with a custom target and settings.
• Turn every <li> element on your page into a clickbox: $('li').clickbox();
• Use another hover class than hover $('li').clickbox({hoverclass: 'mouseover'});
• Apply a custom style to every element, only if javascript is activated (Default: {cursor: 'pointer'})

Example:

$('li').clickbox({style: {cursor: 'move', background: 'yellow', fontWeight: 'bold'}});

Dependencies, browser support

Requires jQuery

Tested in FF >= 3.5, Safari, Chrome, Opera and IE >= 7.

It works well, easy to implement and the code is commented and easy to extend. See the demo!