jQuery Plugin To Stylize Text Line By Line - PerWordAction.js

File Size: 5.33 KB
Views Total: 373
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Stylize Text Line By Line - PerWordAction.js

PerWordAction.js is a fancy jQuery plugin which has the ability to apply custom styles to words and text in different lines.

How it works:

The plugin wraps all text into an unique span tag and assigns each word a line-number data attribute.

Installation:

$ npm install per-word-action

How to use it:

1. Insert the main JavaScript file PerWordAction.js after jQuery library but before we close the body tag.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="PerWordAction.js"></script>

2. Reset the font size to prevent line-check breakage.

$('#content .pwa-word').attr('style','');

3. Call the plugin and do the magic as this:

$('#content').perWordAction(function($word, line_number){
  // do something per-word here on the $word jQuery object
  // or per-line-number here thanks to line_number <1-based integer>

  // NOTE you can also reference
  // Words via $('.pwa-word') class selector
  // Lines via $('[pwa-line=N]') data-attribute
});

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