Bigger link: easier clicking with jQuery
- 10:48 PM 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.
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
- 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
<li> or any other block element.
Using your ninja-like CSS knowledge you can trick a
<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.
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.
<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>
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.
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.