Cutter: Truncate HTML code to limit its length

Recommend this page to a friend!
  Info   Example   Screenshots   View files Files   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 153 All time: 327 This week: 4Up
Version License JavaScript version Categories
cutter 1.0GNU General Publi...1.0HTML
Description 

Author

This object can be used to truncate HTML code to limit its length.

It can process a given HTML document element and truncate it at the end if it exceeds a given number of words while preserving the original markup.

The truncated version may appear within the given HTML document element or some other target document element.

Picture of Tomas Corral
Name: Tomas Corral <contact>
Classes: 2 packages by
Country: Spain Spain
Age: ???
All time rank: 763 in Spain Spain
Week rank: 6 Up2 in Spain Spain Up

Recommendations

What is the best JavaScript read more class?
Difficulties in using a readmore.js

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script> <script type="text/javascript" src="cutter.js"></script> <style type="text/css"> </style> </head> <body> <div class="description" id="desc_body"> <ul> <li> <p>While keeping the same minimalist design we all have grown to love, <strong>Google Chrome</strong> has evolved a lot in functionality with its latest version and definitely deserves its position as a <a href="http://en.softonic.com/windows/browsers" rel="nofollow" title="Web browsers on Softonic">web browser</a> to reckon with.</p> </li> <li> <p>Chrome 6 is the latest addition to Google Chrome’s stable, after some months of beta testing. Besides the features we already knew from previous versions, such as the <strong>download manager, support for extensions</strong> and <strong>incognito browsing mode</strong>, the browser has included great new functions based on user feedback.</p> </li> <li> <p>To begin with, the <strong>syncing feature</strong> in Google Chrome is more powerful than ever. Now you can synchronize not only bookmarks across different computers, but also browser preferences &ndash; including homepage, web content settings and themes.</p> </li> <li> <p>The download manager and extension manager in Google Chrome have also been improved. The first one features an interface overhaul powered by HTML5, while the last one now lets you enable each extension to work in incognito mode. Speaking of HTML5, Google Chrome also includes new functionality based on the technology, like support for <strong>geolocation APIs</strong> and <strong>file drag-and-drop</strong>. This means that you'll be able to find your location on Google Maps or drag-and-drop attached files onto Gmail messages, for example.</p> </li> <li> <p>Google Chrome maintains the same impressive usability and ease of use. With <strong>zero learning curve</strong>, you immediately feel in your element and there's no need to start testing new shortcuts or reading the documentation. So if you're considering making the switch from old favorites like <a href="http://firefox-3.en.softonic.com/" rel="nofollow" title="Download Firefox">Firefox</a> or <a href="http://internet-explorer-8.en.softonic.com/" rel="nofollow" title="Download Internet Explorer">Internet Explorer</a>, Google Chrome is definitely an excellent choice for a new web browser.</p> </li> </ul> </div> <input type="button" id="button_1" value="Execute Cutter - Cut by 100 words -"/> <br/><br/><br/> <div class="description" id="desc_body2"> <p>While keeping the same minimalist design we all have grown to love, <strong>Google Chrome</strong> has evolved a lot in functionality with its latest version and definitely deserves its position as a <a href="http://en.softonic.com/windows/browsers" rel="nofollow" title="Web browsers on Softonic">web browser</a> to reckon with.</p> <p>Chrome 6 is the latest addition to Google Chrome’s stable, after some months of beta testing. Besides the features we already knew from previous versions, such as the <strong>download manager, support for extensions</strong> and <strong>incognito browsing mode</strong>, the browser has included great new functions based on user feedback.</p> <p>To begin with, the <strong>syncing feature</strong> in Google Chrome is more powerful than ever. Now you can synchronize not only bookmarks across different computers, but also browser preferences &ndash; including homepage, web content settings and themes.</p> <p>The download manager and extension manager in Google Chrome have also been improved. The first one features an interface overhaul powered by HTML5, while the last one now lets you enable each extension to work in incognito mode. Speaking of HTML5, Google Chrome also includes new functionality based on the technology, like support for <strong>geolocation APIs</strong> and <strong>file drag-and-drop</strong>. This means that you'll be able to find your location on Google Maps or drag-and-drop attached files onto Gmail messages, for example.</p> <p>Google Chrome maintains the same impressive usability and ease of use. With <strong>zero learning curve</strong>, you immediately feel in your element and there's no need to start testing new shortcuts or reading the documentation. So if you're considering making the switch from old favorites like <a href="http://firefox-3.en.softonic.com/" rel="nofollow" title="Download Firefox">Firefox</a> or <a href="http://internet-explorer-8.en.softonic.com/" rel="nofollow" title="Download Internet Explorer">Internet Explorer</a>, Google Chrome is definitely an excellent choice for a new web browser.</p> <p><b>Google Chrome, Google's browser, mixes a clean, minimalist interface with a variety of powerful tools that make it a great browser.</b></p> </div> <input type="button" id="button_2" value="Execute Cutter - Cut by 36 words -"/> <br/><br/><br/> <script type="text/javascript"> $(document.getElementById("button_1")).click(function() { var oCutter = new Cutter(); oCutter .applyTo(document.getElementById("desc_body")) .setTarget(document.getElementById("desc_body")) .setWords(100) .init(); this.style.display="none"; }); $(document.getElementById("button_2")).click(function() { var oCutter = new Cutter(); oCutter .applyTo(document.getElementById("desc_body2")) .setTarget(document.getElementById("desc_body2")) .setWords(36) .init(); this.style.display="none"; }); </script> </body> </html>

Screenshots (2)  
  • afterApplyCutter.png
  • beforeApplyCutter.png
  Files folder image Files (4)  
File Role Description
Plain text file cutter.js Class Cutter source code
Plain text file index.html Example Test html

 Version Control Unique User Downloads Download Rankings  
 0%
Total:153
This week:0
All time:327
This week:4Up
User Comments (1)