JavaScript library that adds a 'read more' functionality on the text blocks that is applied to.

George Raptis

Last update: Oct 14, 2022

Related tags

WebSocket ReadMore.js

Overview

ReadMore.js

JavaScript library that adds a 'Read more/less' functionality on the text blocks that is applied to.

API & Usage

// Initialise
var destroy = $readMoreJS({
   target: '.container p',
   wordsCount: 50, // Alternatively use `charactersCount` if you wish to truncate by characters' length.
   toggle: true,
   moreLink: 'Read more',
   lessLink: 'Read less',
   linkClass: 'rm-link-classname'
});

// Bring back to initial state if no longer needed.
destroy();

Options

Param	Type	Default	Description
target	`String`	""	CSS selector of the HTMLElement that contains the text content to be truncated (any CSS selector, eg: "#", ".").
wordsCount¹	`Number`	`undefined`	The number of words to display before the "Read more" link. Has no effect if the number provided is greater than the actual words length.
charactersCount¹	`Number`	`undefined`	The number of characters to display before the "Read more" link. Has no effect if the number provided is greater than the actual characters length.
toggle	`Boolean`	true	If `true`, the user can toggle between "Read more" and "Read less", otherwise when they click once on "Read more" link, they will not be able to display less content again.
moreLink	`String`	"Read more"	The text of "Read more" link. HTML strings are supported, eg `<div>Read more</div>`.
lessLink	`String`	"Read less"	The text of "Read less" link. HTML strings are supported, eg `<div>Read less</div>`.
linkClass	`String`	""	A class name that is applied on the "Read more/less" link, mostly for styling purposes.

¹ If both options wordsCount and charactersCount are used at the same time, the wordsCount option takes precedence and the charactersCount is just ignored. Use only one of the options for more predictable behaviour.

Changelog

For API updates and breaking changes, check the CHANGELOG.

License

The MIT License (MIT)

Comments

Feature request: Able to use character count as well as word count.

Hello,

Would it be possible to add a function so we could use both wordsCount and a count based on characters? If we could use them both at the same time that would even be better.

This would prevent the edge-case of people on purpose not using spaces to not trigger the read more script.

opened by Beagon 6
Click event sometimes reloads page

This nice, compact plugin does exactly what I needed. However, I recently had an issue where when the "read more" link was clicked, the whole page reloaded.

I have not tracked down the exact cause of this and why it only happens in certain circumstances.

What I did manage to do is stop it from happening by adding preventDefault to the click handler so the browser doesn't "follow the link" and reload.

If you are interested in adding this fix, let me know and I will make a PR.

opened by owlvark 2

Customisable container and link class names

The changes allow for the read more link's class name and its div container to be customised:

$readMoreJS.init({
	target: '.dummy p',
	numOfWords: 50,
	toggle: true,
	moreLink: 'read more ...',
	lessLink: 'read less',
	linkClass: 'rm-link',
	containerClass: 'rm-container'
});

opened by husseinalhammad 2

Add read more inline just after last word

Hi,

Thanks for this great and very usefull plugin, this will be breat if it will be possible to add the read more link just after the last word, like this :

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptatem obcaecati at praesentium sunt voluptatum dolorum. Consequatur, fugiat optio itaque nihil quibusdam repellendus mollitia assumenda placeat debitis reiciendis vel perspiciatis! Lorem ipsum dolor sit amet, consectetur adipisicing elit... READ MORE...

Thanks.

opened by WebAtelier47 1
Update to version 2
Rename numOfWords option to wordsCount.

Remove the container element of the "Read more/less" link along with containerClass option and place the link inline by default. You can still use a CSS class to make the link element block using the linkClass option.

Update the way to initialise the library.
Prior to v2.x: $readMoreJS.init(options);.
From v2.x onwards: $readMoreJS(options);
opened by georapbox 0
Bump minimatch from 3.0.4 to 3.1.2
Bumps minimatch from 3.0.4 to 3.1.2.

Commits

699c459 3.1.2

2f2b5ff fix: trim pattern

25d7c0d 3.1.1

55dda29 fix: treat nocase:true as always having magic

5e1fb8d 3.1.0

f8145c5 Add 'allowWindowsEscape' option

570e8b1 add publishConfig for v3 publishes

5b7cd33 3.0.6

20b4b56 [fix] revert all breaking syntax changes

2ff0388 document, expose, and test 'partial:true' option

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

@dependabot use these labels will set the current labels as the default for future PRs for this repo and language

@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language

@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language

@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies
opened by dependabot[bot] 0

Releases(v3.0.0)

v3.0.0(Sep 15, 2021)
Breaking changes

wordsCount does not longer hold a default value of 50. You now need to explicitely provide a number greater than 0.

Other changes

Add charactersCount option to give the flexibility to truncate the initial text content by characters count as well.

Source code(tar.gz)
Source code(zip)
v2.0.0(Aug 20, 2021)
Breaking changes

Rename numOfWords option to wordsCount.

Remove the container element of the "Read more/less" link along with containerClass option and place the link inline by default. You can still use a CSS class to make the link element block using the linkClass option.

Do not provide a default value for linkClass option.

Remove data-readmore and id attributes from the "Read more/less" link element.

Update the way to initialise the library.
Prior to v2.x: $readMoreJS.init(options);.
From v2.x onwards: $readMoreJS(options);

Source code(tar.gz)
Source code(zip)
v1.2.0(Aug 18, 2021)
Export library in UMD format.

Provide a way to destroy if no longer needed.

Source code(tar.gz)
Source code(zip)
v1.1.1(Aug 18, 2021)

Source code(tar.gz)
Source code(zip)

JavaScript library that adds a 'read more' functionality on the text blocks that is applied to.

Related tags

Overview

ReadMore.js

API & Usage

Options

Changelog

License

Comments

Feature request: Able to use character count as well as word count.

Click event sometimes reloads page

Customisable container and link class names

Add read more inline just after last word

Update to version 2

Bump minimatch from 3.0.4 to 3.1.2

Releases(v3.0.0)

v3.0.0(Sep 15, 2021)

Breaking changes

Other changes

v2.0.0(Aug 20, 2021)

Breaking changes

v1.2.0(Aug 18, 2021)

v1.1.1(Aug 18, 2021)

Owner

George Raptis

Website to display chats and gifts in realtime from your TikTok LIVE stream. Demo project for TikTok-Live-Connector library.

Node.js library to receive live stream chat events like comments and gifts in realtime from TikTok LIVE.

This Repository implements an Authenticated Websocket Server built in Node Js along ws library.

JSON-RPC 2.0 implementation over WebSockets for Node.js and JavaScript/TypeScript

Simple realtime chat application made by NodeJS, Express, Socket.io and Vanilla Javascript. This project is made to discover socket.io and understand its basic features.

A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.

Simple-load-more - This jQuery function will add a functionality to load 5 (or custom) more items. No AJAX functionality.

⚡️The Fullstack React Framework — built on Next.js

This extensions adds blocks to help you create your own carnival games in MakeCode Arcade using throwable balls, extra timer functions, and extra game-over options.

A modern, clean design can be customized and applied for a wide range of purposes

The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on

This project is a web application that allows the user to select a location on a map, display the selected region, and capture an image of that region. The captured image is then applied as a texture to a 3D cuboid using BabylonJS.

A tampermonkey script that adds functionality to the midjourney.com website to make it easier to do things.

coc-pyright-tools is a coc-extension that adds its own functionality to coc-pyright for coc.nvim. Currently the "Inlay Hints", "CodeLens" and "Test Framework commands" feature is available.

A lightweight vanilla JavaScript app for expanding and collapsing blocks of text.

An online library for adding and removing a different number of books from a user collection, keeping track of the books you've read and the one's you are yet to read

The epic event-driven, front-end only, reactive JavaScript framework with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?

An application that has a frontend (user interface) that allows you to create, read, update or delete (CRUD) products using an API in which you can also create, read, update or delete products.

Interactive web app where you can Store ,Add and Remove books to organize the books that you've read or the ones willing to read