I like big…… targets
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:
- Attach the plugin to any link in the content block.
- Pass through the click zone selector as a plugin option.
- The plugin then attaches
onclickand hover events to the click zone.- User clicks anywhere on the click zone.
- The original link
hrefis retrieved.- If the link has a
relattribute 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:
-
-
// simple
-
$(document).ready(function(){
-
$(“ol.bigTarget h4 a”).bigTarget();
-
});
-
-
// and you can customize it
-
$(document).ready(function(){
-
$(“ol.bigTarget h4 a”).bigTarget({
-
hoverClass: ‘over’, // CSS class applied to the click zone onHover
-
clickZone : ‘div:eq(0)’ // jQuery parent selector
-
});
-
});
-
