Countable.js - A JavaScript Library For Live Paragraph, Word & Character Counting

Countable.js is a small JavaScript library which allows you to present the number of paragraphs, words and characters from a text area to any HTML element of your choice.

The library updates the counts in real-time and is very easy to use.  Countable.js might find application in areas where text length limiting is necessary, such as comment length, description length, etc.

Requirements: None
Demo: http://radlikewhoa.github.com/Countable/
License: MIT License

SPOILER ALERT! - A jQuery Plugin Which Uses Blurs For Hiding Spoilers

SPOILER ALERT! is a jQuery plugin which uses blurs to hide spoilers from readers online. However, SPOILER ALERT!  adds some more bells and whistles to the concept by enabling you to specify maximum blurs and partial blurs.

Maximum blur is used to hide the spoilers completely from the readers. However, upon hover, the partial blurs are applied which makes the content a bit more distinguishable. Finally, clicking upon the blurred content fully reveals the hidden material.

SPOILER ALERT! can not only be used for blurring out spoiler texts, but can also be used for images. This technique for hiding spoilers is a nice change from the usual blacked out or completely hidden text we usually find on website as it keeps the flow of the content essentially the same.

Requirements: jQuery
Demo: http://joshbuddy.github.com/spoiler-alert/
License: MIT License

Textillate.js - A jQuery Plugin For CSS3 Text Animations

Textillate.js is a simple jQuery plugin which allows you to perform some neat CSS3 animations. It combines two powerful JavaScript libraries animate.css and lettering.js and provides a simple API for CSS3 animations.

Textillate.js allows you to animate text with effects such as flash, bounce, shake and more. In all, Textillate.js contains more than 25 effects for you to apply to your text.

Requirements: jQuery, animate.css and lettering.js
Demo: http://jschr.github.com/textillate/
License: MIT License

Behave.js - A JavaScript Library To Add IDE-Style Behavior To HTML Text Areas

Behave.js is a lightweight JavaScript library which allows you to augment plain HTML text areas to have IDE-like behavior.

Behave.js includes several features as listed below:

• Replace Tab – Pressing the tab key will insert a tab character in the text area instead of cycling through control on the page.
• Soft Tabs – Instead of using the tab character to denote tabs, spaces are used instead, with the ability to set the soft tabs size.
• Auto Open - Behave.js automatically inserts closing counterpart characters for ( { [ “ and ‘.
• Overwrite Closing Characters – If you type a closing character immediately preceding the same character, one of the duplicate characters is deleted.
• Auto Strip – If the cursor is placed between two paired characters, pressing backspace to delete the first character results in both characters to be deleted.
• Auto Indent – Using this option allows Behave.js to auto indent your code.

Naturally, all of the above options are optional and can be activated and  deactivated as required.

Requirements: None
Demo: http://jakiestfu.github.com/Behave.js/
License: MIT License

Cutter.js - A Library For Truncating HTML Code By Word Number Without Losing Markup

Cutter.js is a library used for truncating HTML code to limit its length, by word number, without losing the markup.  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.

Features

• 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.

 

Browser Support

• IE >= 6
• Firefox >= 3
• Safari >= 4
• Google Chrome >= 4
• Opera >= 9.5

Requirements: None
Demo: http://tcorral.github.com/Cutter.js/#examples
License: MIT License

Tangle - A JavaScript Library For Creating Reactive Documents

Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn.

Some Background Information - What Does It Mean To Be An Active Reader?

An active reader asks questions, considers alternatives, questions assumptions, and even questions the trustworthiness of the author. An active reader tries to generalize specific examples, and devise specific examples for generalities. An active reader doesn't passively sponge up information, but uses the author's argument as a springboard for critical thought and deep understanding.

Do our reading environments encourage active reading? Or do they utterly oppose it? A typical reading tool, such as a book or website, displays the author's argument, and nothing else.

The reader's line of thought remains internal and invisible, vague and speculative. We form questions, but can't answer them. We consider alternatives, but can't explore them. We question assumptions, but can't verify them. And so, in the end, we blindly trust, or blindly don't, and we miss the deep understanding that comes from dialogue and exploration (source).

 

What Tangle Brings To The Table?

Tangle allows you to create a reactive document, which in turn, allows the reader to play with the author's assumptions and analyses, and see the consequences.  An explorable example makes the abstract concrete, and allows the reader to develop an intuition for how a system works. 

Contextual information allows the reader to learn related material just-in-time, and cross-check the author's claims.

Requirements: None
Demo: http://worrydream.com/Tangle/
License: MIT License

jQuery.smarttruncation - A Responsive Text Trucation Plugin

jQuery.smarttruncation truncates the text within the assigned element to fit and updates the string length while resizing the window.

The used technique is very responsive, since it calculates the width for each character in a pre-define set ahead of time. The generated sizes dictionary is cached and re-used if the plugin is called on an element with identical font properties.

Sometimes (in about 3-5% of all cases), due to characteristics of certain fonts, a string will still not fit. In this case the plugin will go the "common" way of chopping off on character at a time until the string fits.

Requirements: None
Demo: http://polarblau.github.com/smarttruncation/
License: MIT License or GPL

trunk8 - An Intelligent Text Truncation Plugin jQuery Plugin

trunk8 is an intelligent text truncation plugin to jQuery. When applied to a large block of text, trunk8 will cut off just enough text to prevent it from spilling over.

Unlike conventional truncation that just limits the character length of text, trunk8 measures the content area for spill-over and intelligently chooses the text that best fits in the given space.

Requirements: jQuery
Demo: http://jrvis.com/trunkk8/
License: MIT License

Typist - A jQuery Plugin To Add Animated Typing Text To Any Block Element

Typist is a jQuery plugin that allows you to animate text as if it were being typed onto the screen.  This creates a very cool effect of someone typing the message on which the plugin is being applied.


Requirements: jQuery
Demo: http://chartulo.us/
License: MIT License

jQuery.Spritely - Create Dynamic Character & Background Animation In HTML & JavaScript

jQuery.Spritely is a jQuery plugin for creating dynamic character and background animation in pure HTML and JavaScript.  It's a simple, light-weight plugin with a few simple methods for creating animated sprites  and dynamic scrolling backgrounds.  You can use it on any HTML web page, and any part of the page can interact with a sprite.

Features

• It works well on iPhone/iPod Touch/iPad - check out this page on an iPhone. (Please note that there is a problem with the current version of Mobile Safari on the iPad - see the documentation page for more information.)
• It has been tested successfully on all the major browsers - even Internet Explorer 6
• It's a great alternative to Flash if your desired platform does not support it.
• It's light-weight so you can do fill the whole window with movement without draining bandwidth.
• Animated objects can also fly above the text of a web page, or you could animate a background, without affecting other elements on the page.
• You should be able to make fully accessible web pages in pure html and JavaScript without any problem

Browser Support

• Internet Explorer 6 +
• Firefox
• Safari
• Chrome
• Opera

Mobile Support

• Android
• iPhone
• iPad
• iPod Touch

Requirements: jQuery
Demo: http://spritely.net/
License: MIT License or GPL

jQuery TypeButter - Allows You To Set Optical Kerning For Any Font On Your Website

TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you.

What Is Optical  Kerning (Source)?

Optical Kerning adjusts the spacing between adjacent characters based on their shapes and pays no mind to the kerning pairs.

Theoretically, Optical kerning will give you more consistent character spacing, because every character pair, even the most unlikely ones like zh or xw or gk, is kerned based on its character shapes. It's a matter of preference, but here are some things to consider:

• If your font includes few built-in kerning pairs, you're better off with Optical Kerning. Decorative and novelty fonts are likely to have few kerning pairs.
• When combining two typefaces in the same paragraph, the two fonts may use very different kerning metrics and may not look right side by side. This is another occasion when you'll be better served by Optical Kerning.
• You might want to view Metrics vs. Optical Kerning as a microcosm of the timeless drama of man vs. machine. Optical Kerning will be more consistent, more mathematically correctbut will it look better? Ultimately it depends on the quality of the metrics you are comparing it against.

So basically, that's what the jQuery Kerning does.

Requirements: jQuery
Demo: http://typebutter.com/demo/
License: CC Share-Alike 3.0 License

Approach - A jQuery Plugin That Allows You To Animate CSS Properties Based On Distance To An Object

Approach is a jQuery plugin that allows you to animate CSS properties based on distance to an object.  jQuery Approach works in a very similar manner to jQuery animate, however it animates over distance instead of time. The closer you get to the object, the more the style will be applied.  For example, you could use approach on an element's opacity, increasing the opacity as you get closer.


Requirements: jQuery
Demo: http://srobbin.com/jquery-plugins/approach/
License: MIT License or GPL

Write Maths, See Maths - A jQuery Plugin For Editable Areas Which Gives An Instant MathJax Preview Of Typed TeX

Editors's Note: You might also be interested in MathJax - An Open Source Cross-Browser JavaScript Display Engine For Mathematics.

Write Maths, See Maths is a jQuery plugin for editable areas which gives an instant MathJax preview of the TeX you're writing just above the cursor.  To use it, just call $(selector).writemaths() when the page loads.

You can optionally pass in an object with some options:

• cleanMaths: a function which does something to the LaTeX before displaying it.
• callback: a function which is called when the preview is displayed.
• iFrame: set this to true if you're applying writemaths to something like TinyMCE, which lives inside an iframe.

Requirements: jQuery
Demo: http://christianp.github.com/writemaths/
License: MIT License

Peity - A jQuery Plugin To Convert An Element's Content Into A Simple Pie/Line/Bar Chart

Peity is a simple jQuery plugin that converts an element's content into a simple <canvas> mini pie chart, line chart or bar chart  and is compatible with any browser that supports <canvas>.

Browser Support

• Chrome
• Firefox
• IE9+
• Opera
• Safari

Requirements: jQuery
Demo: http://benpickles.github.com/peity/
License: MIT License

jQuery Text Highlighter - A jQuery Plugin For Highlighting Text Fragments In HTML Documents

jQuery Text Highlighter is a jQuery plugin for highlighting text fragments in HTML documents. Highlighting is done by wrapping selected text in <span> tags.

Features

• Highlighting text that spanning multiple tags.
• Removing highlights.
• Setting highlight color and custom text wrapper.
• Callbacks for highlighting and removing highlights.

Compability

This plugin has been tested to work in following browsers:

• Mozilla Firefox 3, 3.6, 4, 5, 6, 7, 12
• Internet Explorer 7, 8, 9
• Google Chrome 14, 18
• Opera 11.62
• Safari 5.1

Requirements: jQuery, Rangy
Demo: http://mir3z.github.com/jquery...demo-page.html
License: MIT License

jQuery Annotator - A Web Annotation System Which Provides The User With Tools To Annotate Text

jQuery Annotator is a web annotation system. Loaded into a webpage, it provides the user with tools to annotate text (and other elements) in the page.  The Annotator project also has a simple but powerful plugin architecture. While the core annotator code does the bare minimum, it is easily extended with plugins that perform such tasks as:

• serialization: the Store plugin saves all your annotations to a REST API backend (see Storage wiki page for more and a link to a reference implementation)
• authentication and authorization: the Auth and Permissions plugins allow you to decouple the storage of your annotations from the website on which the annotation happens. In practice, this means that users could edit pages across the web, with all their annotations being saved to one server.
• prettification: the Markdown plugin renders all annotation text as Markdown
• tagging: the Tags plugin allows you to tag individual annotations

Requirements: jQuery
Demo: http://okfn.github.com/annotator/demo/
License: MIT License or GPL

PageGuide.js - An Interactive Guide For Web Page Elements Using jQuery And CSS3

PageGuide.js is an interactive visual guide to elements on web pages.  Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.  It's easy to implement and non-invasive.

PageGuide.js has built-in interaction tracking hooks.  This enables you to track usage of PageGuide.js via your preferred analytics tool.

Instructions To Setup PageGuide.js

Step 1 - Add pageguide.js

Add the following snippet of code to the bottom of your HTML document, right before your closing </body> tag.  PageGuide.js provides both the standard JS as well as a minified version.

Step 2 - Add pageguide.css

Add the following snippet of code to the header of your HTML document.  PageGuide.js provides an uncompressed CSS file as well as a minified version. Alternatively, PageGuide.js  provides a LESS CSS file as well.

Step 3 - Add setup code

Add the following block of JavaScript to your HTML document:

Step 4 - Choose the elements that you want included in the page guide.

PageGuide.js matches the first occurrence of the selector you specify in the <ul> you put on your pages in the next step.

Step 5 - Add the pageguide.js <ul> near the bottom of your pages.

That's it, you're now all set to view PageGuide.js in action on your page!

Requirements: jQuery
Demo: http://tracelytics.github.com/pageguide/
License: MIT License

Timing — A jQuery Plugin For Easy-To-Use Methods To Define Timeouts And Intervals

jQuery Timing provides easy-to-use methods to define timeouts and intervals just in line with all your jQuery stuff.

It supplements the existing functionality from the jQuery effects queue (fxq) by introducing a new timed invocation chain technique (tic).

The tic-method .join([queueName]) allows a timed invocation chain to wait until all the animations and effects currently being queued in an Effect Queue finishes.

The above code allows blinking by repeated toggling of CSS class every 300 milliseconds.  The repeat method is what the jQuery Timing plugin makes available to the programmer.  Among the various other methods are:

• .join()
• .repeat()
• $.repeat()
• .then()
• $.then()
• .unrepeat()
• $.unrepeat()
• .until()
• .unwait()
• $.unwait()
• .wait()
• $.wait() 

Nearly all the functions have a chained version and a static version for you to use.

Requirements: jQuery
Demo: http://creativecouple.github.com/j...ing/basics.html
License: MIT License

jQuery Dice A jQuery Plugin To Display A Dice, Click On It And Retrieve A Random Number (Between 1 & 6)

jQuery Dice is a very simple plugin which allows to display a dice, click on it and retrieve a random number (between 1 and 6, of course.) You can easily modify the plugin to change the dice glyph.

Requirements: jQuery
Demo: http://efrane.github.com/jquery-dice/
License: BSD Licensed

jQuery.textntags - A jQuery UI Plugin Component To "@tag" Someone In A Text Message

jQuery.textntags is a small UI component that allows you to "@tag" someone in a text message, just like you are used to on Facebook or Twitter.

When tags are being added to the input, a marked-up version of the value is generated, to allow the tags to be extracted, parsed and stored later. 

Requirements: jQuery
Demo: http://daniel-zahariev.github.com/jquery-textntags/#examples
License: MIT License