Create Read More Links For Large Text Blocks – Read.js

Category: Javascript , Text | March 9, 2021
Author:williamtroup
Views Total:1,068 views
Official Page:Go to website
Last Update:March 9, 2021
License:MIT

Preview:

Create Read More Links For Large Text Blocks – Read.js

Description:

Read.js is a tiny and easy JavaScript library to create Read More and Read Less links in your large text blocks.

The library limits the maximum amount of characters in your text and replaces the overflowing characters with a Read More link.

Click the Read More link will expand the text block to its full size and shows a Read Less link at the end of the text.

How to use it:

1. Import the stylesheet readjs.css and JavaScript readjs.js into the document.

<link rel="stylesheet" href="src/readjs.css" />
<script src="src/readjs.js"></script>

2. Initialize the Read.js library and override the default options as per your needs.

var readJsInstance = readJs_Initialize({ 
    // text for the "Read More" link
    "readMoreText": "Read More",
    // text for the "Read Less" link
    "readLessText": "Read Less",
    // maximum number of characters
    "maximumLengthOfText": 200,
    // A boolean flag that states if 
    // the text detected in the elements 
    // should be placed inside a styled container
    "useStyledContainers": true,
    
});

3. Apply the Read.js to your large text blocks and override the default properties as follows:

  • visible: A boolean flag that indicates if the element should be visible (in read more view).
  • ignore: A boolean flag that indicates if the element should be ignored (false by default).
  • useStyledContainer: A boolean flag that indicates if the text detected should be placed inside a styled container (defaults to useStyledContainers option).
<div data-read-more="{ visible: false, useStyledContainer: true }">If you're visiting this page, you're likely here because you're searching for a random sentence. Sometimes a random word just isn't enough, and that is where the random sentence generator comes into play. By inputting the desired number, you can make a list of as many random sentences as you want or need. Producing random sentences can be helpful in a number of different ways.</div>

4. Event handlers.

var readJsInstance = readJs_Initialize({ 
    "onReadMore": onReadMore,
    "onReadLess": onReadLess,
});
function onReadMore() {
  document.title = "Read.js - Reading More";
}
function onReadLess() {
  document.title = "Read.js - Reading Less";
}

5. API methods.

// Expand all
readJsInstance.openAll();
// Collapse all
readJsInstance.closeAll();

You Might Be Interested In:


Leave a Reply