Bigger Clickable Areas With BigTarget.js
2
Oct
BigTarget.js is a jQuery plugin that increases the size of click targets and get more call-to-action conversions.
It has 2 options that can be customized:
clickZone: By default the first<li>element is turned into a link but this can be changed with this option.targetClass: For mentioning the class for hover effect.
How to use it?
Adding BigTarget.js functionality to your site is straight forward. First include the plugin code in the head of your document, and then when the page is ready, attach the bigTarget function to the target anchor — bigTarget.js will do the rest.
$(document).ready(function(){
$("ol.bigTarget h4 a").bigTarget();
});
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://newism.com.au/blog/post/58/bigtarget-js-incre...
Compatibility: All Major Browsers
Website: http://newism.com.au/blog/post/58/bigtarget-js-incre...
- Tags:
Javascript jQuery
- Filed under: Browsing, Goodies, Other License
Related Posts
Popular Posts
- Free Vector World Maps Collection
- Photoshop Heart Brushes Collection
- 64 Beautiful And Free Nature Brush Sets And Vectors - Giant Design Pack
- Photoshop Flower Brushes - 28 Flowers
- Free Admin Template For Web Applications
- Oriental Photoshop Brushes And Vector Images For Mysterious Designs
- 27 Adobe AIR Applications - Handy For Web Designers
- 55 Free Human Brush Sets And Vector Images - Giant Design Pack
- Sliding Top Menu With jQuery
- Test (Sample) Data Generators
















2 Responses for "Bigger Clickable Areas With BigTarget.js"
This is a bad idea, since it narrows the usability and can be easily replaced by only HTML/CSS (wrap ““-element around non-block elements and use CSS to style the things)
@Jonas: Can you explain how this reduces usability? The text can still be selected and a tooltip is added to the whole clickable area. I would argue that this only can increase usability.
The extension is also unobtrusive so it will not affect screen reader accessibility.
Your suggestion on the other hand may reduce Search Engine Optimisation as you can only use inline elements. This is unacceptable if you want to use heading tags or block quotes inside the content. Your page hierarchy would basically become flat and therefore Google, Yahoo etc would not put any extra value on those heading elements.
Valid XHTML | Valid CSS