Bigger link: easier clicking with jQuery

Posted
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.

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.

Further thoughts

Comments

  1. Commented
    10:48 PM 9 January 2009

    Hi Oliver :) Thanks for contributing to the jQuery community! I’m still pretty new to jQuery, but with a bit of studying have had my eyes open to the power and flexibility it gives us :)

    I stumbled across your plugin and thought it was exactly what i was looking for, though after implementing it into the signup form i’m working on, i’ve realized that its probably not exactly suited for what i’m trying to do.

    That said, i figured there cant be any harm in dropping you a line to see if its relatively easy to adapt..

    So, the concept i am trying to mimic (in function only) is based on this signup form: https://www.box.net/signup. After studying their code, i noticed that they are wrapping the contents of each option in a normal link. Obviously that wont do, as link you also stated, its an inline element wrapping around block level elements and thats a no-no.

    So, i was wondering whether your script could be adapted to instead of making the block a link, but rather just an activator for the radio input.

    I had a look at the plugins code and tried a few things to rather target the radio inputs, but so far i havent had much luck.

    Any suggestions or input would be greatly appreciated!

    Cheers, Chris

  2. Commented
    10:48 PM 11 January 2009

    Nice idea Chris! I liked it enough that I have made a start on a new plugin called biggerlabel :)

    To demonstrate the plugin I have rewritten that horrible box.net HTML to demonstrate that web standards need not be the victim of a friendly user interface for users.

    http://www.ollicle.com/projects/jquery/biggerlabel/

    My testing of it has been shallow at best – so please let me know how it works for you.

    To live up to it’s name the next step would be to enable it’s use with checkboxes. Not sure if there would be much point with other form elements?

    Keep in mind this plugin raises some interesting questions regarding screen reader accessibility.

    The biggest problem I see with the box.net form is the radio buttons do not have labels. Everything I have read on the subject says that information pertaining to a particular form element should appear within a label associated with that form element, implicitly or explicitly (with the for attribute). When in form mode information outside of form labels may be skipped.

    Looking closely at my example rewrite; Although my form adds some nice hierarchy to the information with the H3 sub-headings, this is the only text that appears within the label. As this is the primary information pertaining to this form option - perhaps this is okay?

    The label element shares a common problem with an anchor, they are both inline elements. So wrapping all the text in the label will do a large portion of the work otherwise done with JavaScript but this precludes the use of the Hn tags to illustrate the hierarchy; Does this hierarchy make sense within a form? At very least it holds up better visually should it’s CSS fail.

    Not being a regular screen reader user, and without one handy, I am ultimately unsure how the box.net form or my example rewrite behaves in one. If in doubt, test it!

  3. Commented
    10:48 PM 30 January 2009

    I am in the process of releasing version 2 of Bigger Link. It requires version 1.3 of jQuery and a lot more testing. Please check it out jquery.biggerlink 2

Oliver Boermans is a design geek in Adelaide, South Australia: ollicle.com is a place for Ollie to rant, reflect and share. Feed