Make Block Clickable JOLD - Free Download Make Whole Block Content Clickable With JOLD Js-block Plugin

Free Download Make Whole Block Content Clickable With JOLD Js-block Plugin

By Posted on

This time I will share jQuery Plugin and tutorial about Make Whole Block Content Clickable With JOLD Js-block Plugin, hope it will help you in programming stack.

Make Block Clickable JOLD - Free Download Make Whole Block Content Clickable With JOLD Js-block Plugin
File Size: 32.1 KB
Views Total: 285
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

JOLD Js-block is a small yet useful jQuery plugin that looks for the first link inside your block content and applies the link to the whole block to maximizes the click area.

How to use it:

1. Insert the minified version of the JOLD Js-block plugin after jQuery library.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="jquery.jold.js-block.min.js"></script>

2. Insert a link into your block content.

view source
1 <div class="block-example">
2   <img src="https://placeimg.com/640/480/any" alt="">
3   <p>Cum sociis natoque penatibus et magnis dis parturient. Nihil hic munitissimus habendi senatus locus, nihil horum? Magna pars studiorum</p>
4   More Content Here...
5   <a href="https://www.jqueryscript.net">Example</a>
6 </div>

3. Call the plugin on the top container. That’s it.

view source
1 (function($){
2   $('.block-example').joldJsBlock();
3 })(jQuery);

4. Indicate the block content is clickable.

view source
1 .js-block {
2   cursor: pointer;
3 }

Changelog:

2019-12-05

  • v1.0.5

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

source : jquery.net

Related posts: