I like big…… targets

Written by on September 30th, 2008 in Uncategorized.

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:

JAVASCRIPT:

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

Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/407244065/i-like-big-targets

Comments are closed.



Site Navigation