Word Counthttp://www.virtuosimedia.com/dev/javascript/mootools-plugins/word-count//feed/rssWord Count is a JavaScript word and character counter based on MooTools 1.3. It can count static text or text being entered into a form element, as it's being typed. It's simple to use and has been tested in IE6+, Firefox, Chrome, Opera, and Safari.Thu, 17 May 2012 00:53:12 +0000Thu, 17 May 2012 00:53:12 +0000asfhttp://www.virtuosimedia.com/includes/Files/Uploaded/Images/Feeds/avatar80.pngWord Count144100Word Count TutorialWord Count is a JavaScript word and character counter based on MooTools 1.3. It can count static text or text being entered into a form element, as it's being typed. It's simple to use and has been tested in IE6+, Firefox, Chrome, Opera, and Safari.

Let's build a small form and count the text as it is being typed. Word Count requires the MooTools library, so we'll need to download the entire MooTools 1.2 Core file. Go download it quickly if you don't already have it. Don't forget to download a copy of Word Count as well.

If you're new to JavaScript (or MooTools), you'll find the implementation of Word Count fairly easy. Word Count requires no changes to your form whatsoever; it works with what you already have. We'll start with constructing our HTML form. Since we don't need a complicated form for this tutorial, we're just going to include a textarea and a target for the word count to be displayed.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Word Count Tutorial</title>
</head>

<body>
	<form id="wordCount" method="post" action="">
		<textarea name="countMe" type="text" />
		<div id="target">Tell me more about yourself...</div>
	</form>
</body>
</html>

That was pretty easy, right? Let's go ahead and add just a little CSS styling to make our form look a little more appetizing. Just for fun, let's use a little CSS3 styling. For this tutorial, we're just going to put it in the head of our XHTML document, but in practice we recommend putting in your stylesheet in a separate file.

<style type="text/css">
	body {margin:0px; padding:0px; background:#333;}
	textarea {width:300px; height:60px; outline:none; margin-left:10px; border:1px solid; border-color:#000 #999 #999 #000; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:5px;}
	#target {width:300px; height:30px; display:block; border:1px solid; border-color:#FFF #000 #000 #FFF; line-height:30px; margin:10px 10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:5px; color:#555; text-shadow:#FFF 1px 1px 1px; text-indent:5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe));}
</style>

Next we need to add our JavaScript files, MooTools1.3-core.js and word-count.js. We'll put those in the document head as well.

<script type="text/javascript" src="mootools-1.3-core.js"></script>
<script src="word-count.js" type="text/javascript"></script>

Now we need to add a little bit of MooTools specific JavaScript. MooTools has a special event called 'domready' that executes whenever the HTML has finished loading. Most MooTools scripts are at least partially executed from within the 'domready' event. Again, we're just going to put this code in the document head, but it could also be in its own file.

<script type="text/javascript">
	window.addEvent('domready', function(){
		//Our Word Count code will go here
	});
</script>

All of our code is going to be inserted into the 'domready' event, right where the comment currently is. The first thing we'll need to do is initialize the Word Count class. In this case, we'll use the variable password, but you can use pass, or bob, or whatever you like. We'll setpasswordequal to a new instance of PassMeter. Because the constructor for the PassMeter class has one required argument, the name of the password form element, we're going to enter in the name 'password', surrounded in quotes to make it a string.

<script type="text/javascript">
	window.addEvent('domready', function(){
		var counter = new WordCount('target', {inputName:'countMe'});
	});
</script>

The constructor for Word Count also has an optional argument for options. Beyond what you can do with CSS, Word Count has 8 different configurable options, but don't let that intimidate you. It's designed to work well out of the box, so that you just have to provide the CSS styling for it. If you want to change an option, you only have to change that option and you can leave the rest of them alone. Let's pretend we need to change our text count to Spanish and that we only want to get a word count. To do that, we'll have to use the option variables of wordText and countChars and assign our new values to them. The options are inserted after the target id argument. Because the options accept more than one option, we need to enclose it in an object. That simply means we'll put curly braces {} around our entire set of options. Each option has two parts: the option name and its value, which are separated by a colon. If you have more than one option, each option should be separated by a comma, except the last one. Sound complicated? It's actually easier than it sounds.

<script type="text/javascript">
	window.addEvent('domready', function(){
		var counter = new WordCount('target', {
			inputName:'countMe',
			wordText: 'palabras',
			countChars: false
		});
	});
</script>

That's all there is to it! Reload your page and you'll see that you'll only get a word count and it will be in Spanish.

This concludes our quick tutorial. If you encounter a bug, have a question or comment, feel free to contact us. We'd also love to know if you're using it on your site. If you liked Word Count, tell someone else about it. Thanks, and enjoy!

]]>http://www.virtuosimedia.com/dev/javascript/mootools-plugins/word-count/tutorialWord CountWed, 23 Mar 2011 21:24:00 +0000Word Count API DocumentationWord Count is a JavaScript word and character counter based on MooTools 1.3. It can count static text or text being entered into a form element, as it's being typed. It's simple to use and has been tested in IE6+, Firefox, Chrome, Opera, and Safari.

Documentation

Class: WordCount

This class is for getting word and character counts from text or form inputs.

Implements:

WordCount Method: constructor

Word Count is completely unobtrusive and requires no changes to existing markup.

Syntax:

var counter = new WordCount(target[, options]);

Arguments:

  1. target - (string) The id of the element to contain the word and character count. Any text in the target element will be replaced.
  2. options - (object, optional) Any of the options below.

Options:

  • inputName - (string, defaults to null) The name of the form element from which text should be retrieved.
  • countWords - (boolean, defaults to true) Whether or not to count words.
  • countChars - (boolean, defaults to true) Whether or not to count characters.
  • charText - (string, defaults to 'characters') The text that follows the number of characters.
  • wordText - (string, defaults to 'words') The text that follows the number of words.
  • separator - (string, defaults to ', ') Whether or not to use the event trigger, set false if you'd like to call the getCount function separately.
  • liveCount - (boolean, defaults to true) Whether or not to count characters.
  • eventTrigger - (string, defaults to 'keyup') The event that triggers the count update.

Example:

window.addEvent('domready', function(){
	var counter = new WordCount('target', {
		inputName:'countMe',
		wordText: 'palabras',
		countChars: false
	});
});

WordCount Method: getCount

Gets text count and updates the target element.

Syntax:

counter.getCount(text);

Arguments:

  1. text - (string) The text from which a count should be retrieved.

Example:

window.addEvent('domready', function(){
	var counter = new WordCount('target');
	$('target').addEvent('click', function(){
		counter.getCount($('text').get('text')); //Assumes an element with the id of 'text' that contains the countable text
	});
});
]]>http://www.virtuosimedia.com/dev/javascript/mootools-plugins/word-count/api-documentationWord CountWed, 23 Mar 2011 21:29:00 +0000Word Count DemosWord Count is a JavaScript word and character counter based on MooTools 1.3. It can count static text or text being entered into a form element, as it's being typed. It's simple to use and has been tested in IE6+, Firefox, Chrome, Opera, and Safari.

Demos

Static Text Demo

This demo shows how Word Count can be used to count static text on a click event. Note: You must press the 'Run' button to start the demo.

Text Input Demo

This demo shows how Word Count can be used with a text input to count live typing. Note: You must press the 'Run' button to start the demo.

Textarea Demo

This demo shows how Word Count can be used with a textarea to count live typing. Note: You must press the 'Run' button to start the demo.

Hi Mom!]]>http://www.virtuosimedia.com/dev/javascript/mootools-plugins/word-count/demosWord CountWed, 23 Mar 2011 21:36:00 +0000