Tuesday, September 30th, 2008

I like big…… targets

Category: jQuery

BigTarget.js is a new little jQuery plugin that makes bigger targets for users:

Wrapping a single anchor around the whole content (title, thumbnail, summary) is a bad idea as it’s not standards compliant and renders the page invalid. So I turned to my good friend jQuery and threw together the following plugin using the ‘Learning jQuery’ plugin development pattern.

The concept is simple:

  1. Attach the plugin to any link in the content block.
  2. Pass through the click zone selector as a plugin option.
  3. The plugin then attaches onclick and hover events to the click zone.
  4. User clicks anywhere on the click zone.
  5. The original link href is retrieved.
  6. If the link has a rel attribute and it’s set to ‘external’, open the link target in a new window; otherwise open the link in the current browser window.

You can easily add this behaviour via the plugin:


  1. // simple
  2. $(document).ready(function(){
  3.     $("ol.bigTarget h4 a").bigTarget();
  4. });
  6. // and you can customize it
  7. $(document).ready(function(){
  8.     $("ol.bigTarget h4 a").bigTarget({
  9.         hoverClass: 'over', // CSS class applied to the click zone onHover
  10.         clickZone : 'div:eq(0)' // jQuery parent selector
  11.     });
  12. });

Posted by Dion Almaer at 7:59 am

2.1 rating from 37 votes


Comments feed TrackBack URI

Pretty sweet and it appears to be accessible so if a user doesn’t have JS turned on, they can still click the original anchor tag. Nice work.

Comment by JoeMcCann — September 30, 2008

Doesn’t work for me in either FF3 or IE7. Site could be in flux.

Regular Links work, however, and send you to a domain registration site, which isn’t the smartest way to make an impression, given the advertised functionality doesn’t work.

Comment by StevenBlack — September 30, 2008

Worked fine in Firefox 3.03

Seems like an odd plugin to me. Isn’t it just as easy to do code this functionality using plain old jQuery? I would think it would take the same number of lines and you wouldn’t have the added weight of the plugin.

Comment by jeremydgreat — September 30, 2008

If I could only find a woman with big targets.

Comment by Jordan1 — September 30, 2008

Gah! My first post here, and it looks like my code tags were eaten up.

Well my basic idea was to force an invisible link to appear above the target div by making it a block element and giving it width and height values of 100%;

Comment by JasonStockman — October 31, 2008

i am leraning a lot by reading these blogs

Comment by Remedies — November 19, 2008

Leave a comment

You must be logged in to post a comment.