Bigger link: easier clicking with jQuery

Posted: 23 October 2007

Bigger links are easier to click for everyone. I have written a jQuery plugin which makes implementing easier to click links easier.

For details you can jump straight to the documentation/demo. The following ramble is a little about why I think the plugin is useful.

Big A

There are a variety of strategies I have used at work to enlarge the ‘hot’ or ‘clickable’ area of a links to something more substantial than the regular familiar text link.

Resize the <a> with CSS
Wrap it around an image
Link more text
Duplicate the link on multiple elements

With HTML alone there is a significant limitation common to the above. While producing valid code, only inline elements may be included inside the <a> element. As an inline element an <a> can never contain a <p>, <h3>, <li> or any other block element.

Using your ninja-like CSS knowledge you can trick a <span>, <em> or <strong> into looking just like their more important blocky friends and wrap this markup in one big link to make it all clickable. Although the result will be valid code the browser bugs you will uncover can be tricky. Long passages of text in links is an accessibility no-no and can look damn nasty without the supporting CSS.

Time to turn to JavaScript for help.

In the bad old DHTML days you may have seen something like:

<div onclick="window.location='http://tablelayout.com'">Some stuff...</div>

While providing the ‘big link’ I am looking for; This is many flavours of bad. The ideal solution is one that does not influence my HTML markup at all.

Instead we can use the JavaScript to add the desired ‘clickability’ on top of nice semantic HTML. For example should I wish to make clicking anything contained by the <div> be equivalent to clicking the link it contains:

<div>
    <h4>Title of some stuff<h4>
    <p>Introductory description of stuff... </p>
    <p><a href="more-stuff.htm">More</a></p>
</div>

Using JavaScript to add the additional behaviour unobtrusively ensures you site is not broken without it and avoids the error prone redundancy created of duplicating the URL in HTML and JavaScript.

In essence this is what jquery.biggerlink does. Additionally it adds some classes to help you add some CSS to provide some link-like feedback to your newly fattened links, such as hover or focus.

Have a look at the documentation - it incorporates a simple demo at the bottom of the page.

I wrote this plugin for use at work. It is the product of a few Friday afternoons. During this time my employer, Fusion, allows me and my fellow Fusionites to work on the internal projects that interest us most.

What next

Suggestions that might improve the usefulness or efficiency of this code are very welcome. It would be a great way for me to directly demonstrate to my employer one of the benefits of sharing work our work in this way.