Press "Enter" to skip to content

A JavaScript Library To Create Read-More Links For Large-Text Articles | Read.js

Read.js is a small and easy JavaScript library for creating read-more and read-less links in your large text blocks. The library determines the maximum number of characters in your text and replaces the extra characters with a read more link.

Click on the “Read more” link to expand the text block to its full size and a “Read less” link is displayed at the end of the text.

How to make use of it:

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

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

2. Initialize the Read.js library and override the default choices as per your wants.

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 massive text blocks and override the default properties.

<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 strategies.

// Expand all
readJsInstance.openAll();

// Collapse all
readJsInstance.closeAll();

Create Read More Links For Large Text Blocks, Read.js Plugin/Github


See Demo And Download

Official Website(williamtroup): Click Here

This superior jQuery/javascript plugin is developed by williamtroup. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *