Make Any Elements Clickable With A Data Attribute - jQuery anything-clickable

Make Any Elements Clickable With A Data Attribute - jQuery anything-clickable
File Size: 4.86 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

anything-clickable is a small and cross-browser jQuery plugin which makes any elements (e.g. images, videos, table cells, etc) clickable with just an HTML data attribute.

Ideal for expanding the clickable area of your element to improve the user experience.

See also:

How to use it:

1. Download and put the minified version of the jQuery anything-clickable plugin after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="./dist/jquery-anything-clickable.min.js"></script>

2. Add the data-href attribute to your elements and specify the URL as follows:

<button data-href="https://www.google.com">Click me</button>

<img data-href="https://www.google.com" src="1.jpg">

<video width="400" controls data-href="https://www.google.com">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<table class="table" data-href="https://www.google.com">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td data-href="https://www.google.com">Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td data-href="https://www.google.com">@twitter</td>
    </tr>
  </tbody>
</table>

...

This awesome jQuery plugin is developed by Anduin2017. For more Advanced Usages, please check the demo page or visit the official website.