jQuery.SimplyReadMore – A JQuery Read more Plugin with responsive Support

Problem

Traditionally the read more plugins are based on the number of characters and which will not always work well with all designs. Most of the issues like height variation and ugly expansion animation are common problems with similar plugins

For example

The position of read more will always change based on width of each chars in the word, which will make the list ugly for multiple read more in the page. This is very common requirement in mobile device. Also expansion will also looks bad as it starts with middle of a line.

Solution

So, I decide to write a plugin to override the same. I have used the same with overflow concept.

Figure 1: Resolution1

 

Figure 2: Resolution2

In both scenarios the number of line are fixed to two lines. This is done by fixing the maximum height and hiding the overflow.

Note: Above css will not work with Plugin. So please don’t use it.

Now, how we can achieve the read more support based on the content height.

So I will explain how this plugin works.

  1. Actual page without plugin

  1. Page with plugin

See, we are not breaking middle of any line. It will be always break after line. Also show more position will be always same.

This will work fine with responsive page too

  1. Expanded view

 

This will work well with different layouts too. Check the below screens

 

How to use the Plugin

 

  1. Include the JQuery.js
  2. Include jquery.simplyReadMore.js
  3. Add below lines to in your document ready

 

 

This will do the necessary read more. Please make sure that you have styled for read more links to achieve the design

Also you can customize the plugin as below,

Code source is below, you can save them as jquery.simplyReadMore.js

Summary

This solves by problem. This is just quick write and this plugin required lots of tweaks, I will update this ASAP

 

  • http://subin.me/ Subin George

    This is will be quite usefull for Hybrid mobile application as mobile application development.