Requirements
- jQuery >= v1.9.x
Usage
To get started you can either:
- Clone the repo:
git clone https://github.com/lawlesscreation/jquery.clickable.git - Or install with Bower:
bower install jquery.clickable
Then it's just a case of adding required scripts in your page, best at the bottom:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.clickable.min.js"></script>
Options & defaults
| Option | Default | Description |
|---|---|---|
| clickableChild | null | Used to make a child element clickable of which the script was executed |
| selectLink | null | Used to specify which link to use within the clickable box should more than one link be found |
| clickableClass | clickable | The class that gets added to elements which have been successfully initialized |
| hoverClass | clickable-hover | The class that gets added to the onHover state of clickable elements |
| focusClass | clickable-focus | The class that gets added to the onFocus state of clickable elements |
| urlPrefixes | ['http://', 'https://', 'www.'] | An array of different prefixes that can appear before each link |
| callbackAfter | null | A callback that is triggered after the element has been made clickable |
Example: Link target
$(function(){
$('#clickable-box').find('.box').jqueryClickable();
});
Result
Single link in target
A single link within the target. Google. That will link the whole box!
Multiple same links in target
Multiple links within the target. Google. But to the same place, so thats ok. Google.
Link opens in new window
Best to avoid links opening in a new window, but just incase this should work. Google.
Example: Link image
$(function() {
$('#clickable-image').find('.box').jqueryClickable({
clickableChild : 'img'
});
});
Result
Multiple same links in target
Multiple links within the target. Google. But to the same place, so thats ok. Google.
Link opens in new window
Best to avoid links opening in a new window, but just incase this should work. Google.
Example: Link image from heading
$(function() {
$('#clickable-image-from-heading').find('.box').jqueryClickable({
clickableChild : 'img',
selectLink : 'h4'
});
});
Result
Multiple same links in target
Multiple links but we only use the one in the header. Facebook. But to the same place, so thats ok. Facebook.
Link opens in new window
Best to avoid links opening in a new window, but just incase this should work.