• Stars
    star
    220
  • Rank 180,422 (Top 4 %)
  • Language
    JavaScript
  • Created over 13 years ago
  • Updated over 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Truncate HTML code to limit its length by number of words without losing markup.

Cutter.js

Cutter.js is a library used for truncating HTML code to limit its length, by word number, without losing the markup.

Description

Cutter solves the problem when its needed to cut some content by a number of words but its mandatory no lose any markup. Cutter cuts the content to the number of requested words and if needed puts a link to open the full content again.

Some benefits:

  • No markup is lost.
  • Framework agnostic.
  • The content can be written without take care about the full content.
  • Not needed to have two different contents.
  • Crossbrowsing
    • Tested on:
      • IE >= 6
      • Firefox >= 3
      • Safari >= 4
      • Google Chrome >= 4
      • Opera >= 9.5
  • Only 1.5kb when Gzipped.

(Links will only work if you clone the repo.)

API documentation

Examples to see for yourself!

Usage

Before using it:

Insert in your code:

<script type="text/javascript" src="/path/to/your/js/libs/Cutter.js"></script>

Simple execution:

Cutter.run(oApplyTo, oTarget, nWords, [configuration]);

####Mandatory

oAplyTo: The element that will have its text truncated

oTarget: The element where the truncated content will be placed.

nWords: Maximum word count. Any additional word will be truncated.

####Optional

configuration: This object contains both the text that will be displayed in the "view more" link and its style.

configuration.viewMoreText: The text that will be displayed in the "view more" link. The default is "View more"

configuration.class: The class that will be applied to the "View more" link. The default is "more"

Tip: oTarget Could be the same oApplyTo element if we want to replace the full content with the cut content

Example

cutElement = document.getElementById("test"); Cutter.run(cutElement, cutElement, 30, {viewMoreText:"Expand", class:"expandLink"});

*On the example above, the element with id "test" will display a maximum of 30 words and a link entitled "Expand". The "expandLink" class will be applied to this link. The remaining words that were previously truncated will show up in the element when the link is clicked.

License

Cutter.js is licensed under the MIT license.

More Repositories

1

Design-Patterns-in-Javascript

Design Patterns applied to Javascript code.
JavaScript
2,618
star
2

javascript-challenges-book

Challenge yourself learning and understanding the most obscure and tricky parts of Javascript. http://tcorral.github.io/javascript-challenges-book/
JavaScript
803
star
3

JSONC

JSON compressor and decompressor
JavaScript
639
star
4

Refactoring_Patterns

A list of 31 Javascript refactoring patterns, based on the '31 Days of Refactoring' book by Sean Chambers and Simone Chiaretta, with the applied solutions.
JavaScript
227
star
5

Hydra.js

Create a scalable, maintainable and module oriented system using Hydra.js
JavaScript
102
star
6

IM.js

Image Match - Project to allow compare different images pixel by pixel with good performance
JavaScript
81
star
7

Hermes.js

Message and Error logger implementation
JavaScript
30
star
8

Javascript-Best-Practices

Javascript Best Practices
JavaScript
15
star
9

html-to-wireframe

Tool to generate wireframes from an url or html file with different sizes.
JavaScript
15
star
10

Interface.js

Javascript Interface implementation
8
star
11

eslint-audio-formatter

Audio formatter/reporter for EsLint to get the reports in mp3 files with all the errors and warnings.
JavaScript
7
star
12

CORSET

A new way to break the x-origin policy in scripts allocated in different domains.
HTML
6
star
13

DesignPatterns_code

Code to use in talks about design patterns
JavaScript
6
star
14

Hydra_Extensions

Extensions for use with Hydra.js
JavaScript
6
star
15

TDD_Workshop

Code and slides from the TDD Workshop
JavaScript
5
star
16

swagger2-to-raml

Convert from Swagger 2.0 YAML to RAML 0.8 RAML
JavaScript
5
star
17

St.George-Legend

Transcription of St.George Legend to Javascript
JavaScript
4
star
18

observable-it

Implementation of Observable pattern for browser
JavaScript
4
star
19

CoffeeScript-Syntax-Definition

Syntax Highlight Definition for CoffeeScript to be used in Fisheye or Crucible by Atlassian
4
star
20

Focus.js

Library to set the focus of any element in DOM
JavaScript
4
star
21

HTML5-Storage-Practice

JavaScript
3
star
22

redux-time-machine

Convert your redux in a time machine. Basic to implement do-undo system in your application.
TypeScript
3
star
23

GIT_IRONHACK

2
star
24

ASR-Server-WF3

OpenText frontend framework
JavaScript
2
star
25

Refactoring-Exercise

2
star
26

EventHandler.js

Event handler
JavaScript
2
star
27

ukko-cli

Command line tool to manages the download all the needed repos and build them to have your development environment ready to start working in minutes
JavaScript
2
star
28

ukko

Module that manages the download all the needed repos and build them to have your development environment ready to start working in minutes
Perl
2
star
29

CSSplus

Compile CSS using variables to speed your development
2
star
30

Calendar

Calendar widget class to use on any Javascript code
JavaScript
2
star
31

methodology-angular-development

HTML
1
star
32

FBB

FBB, a.k.a. Frontend Building Blocks is a set of logic components that can be reused in your code to create your own widgets
JavaScript
1
star
33

Marvin.js

Javascript framework
1
star
34

Template

1
star
35

_test_busterjs

Zip file to test in buster.js
1
star
36

junit-reporter

jUnit reporter to use in any tool
JavaScript
1
star
37

ng-extend-test

A repository to test how to extend the different elements of AngularJS
JavaScript
1
star
38

spotiapp-web

HTML
1
star
39

mystiquex

Tool to manage and download different source endpoints
JavaScript
1
star
40

moonwalker

Tool to launch Selenese tests.
JavaScript
1
star
41

sensitive-data-cleaner

NPM package that will remove all sensitive data in package.json or package-lock.json
TypeScript
1
star
42

Koyote.js

Powerful and minimal mixin framework that allows you to be creative.
JavaScript
1
star
43

code2mp3

An experiment to convert any code to mp3 music.
JavaScript
1
star
44

Plant.js

Template System
1
star
45

Enumerable.js

Add Enumerable behaviour to Array
1
star
46

Backbone_Workshop_code

Backbone.js practice and solution code
1
star