Shorten summary using javascript

The following steps highlight how to use the javscript plugin, dotdotdot, to shorten content for other areas of your website when the widget formatting is not possible.

The short summary  article described how to shorten summaries displayed using an app to add a new widget formatting option “short_summary”.  In this example, we are going to demonstrate how to shorten a summary for our event details page using javascript.

 

1. Download the dotdotdot plugin from http://dotdotdot.frebsite.nl and place it into your ./livewhale/theme/global/scripts directory.

 

2. Open your event details page, or any page you want to shorten the content and add the following javascript code at the bottom of the page. 

 

3. Apply css styling on the class or id using the height attribute to determine when to cut the content short.

 

Before summary shortenedBefore summary shortened

 

After summary shortenedAfter summary shortened