John Dyer

I wrote a little prototype class for limiting the number of characters in a <textarea>. It also includes a counter if you want. You set the ID of the <textarea>, the ID of the <input> where the number of characters will be reported, and the number of characters. There is also an internal flag for whether or not to include carriage returns (\n or \r) in the count. Here's how to instantiate it:

<textarea id="textarea1" rows="5" cols="57"></textarea>
<br />
<input type="text" id="remaining" size="9" /> characters remaining
<script type="text/javascript">
var t1 = new TextCounter('textarea1', 'remaining', 150);
</script>

And here's the full script:

var TextCounter = Class.create();
TextCounter.prototype = {
    initialize: function(textareaid, inputid, maxLength) {
        this.maxLength = maxLength;
        this.textarea = $(textareaid);
        this.input = $(inputid);
        this.input.value = maxLength;
        this.input.readonly = true;
        this.input.disabled = true;
        Event.observe(this.textarea, 'keyup', this.checkChars.bindAsEventListener(this));
        Event.observe(this.textarea, 'keydown', this.checkChars.bindAsEventListener(this));
        this.checkChars();
    }, 
    checkChars: function(e) {
        var includeBreaksInCount = false; // false = don't count a return (\r or \n) in the count.
        var charCount = this.textarea.value.length;
        var breaks = 0;
        if (!includeBreaksInCount) {
            var lines = this.textarea.value.split('\n');
            breaks = lines.length;
            // check for /r at the end of the lines (IE)
            for (var i=0; i<lines.length; i++) {
                var line = lines[ i ];                
                if (line.charCodeAt(line.length-1) == 13)
                    breaks++;
            }
            
        }
        
        // check if over limit
        if ((charCount-breaks) > this.maxLength) {            
            this.textarea.value = this.textarea.value.substring(0, (this.maxLength + breaks) );
        }
        
        // update counter
        if (this.input) {
            if ((charCount-breaks) > this.maxLength) {
                this.input.value = 0;
            } else {
                this.input.value = (this.maxLength + breaks) - charCount;
            }        
        }
    }
}

function getRadioValue(idOrName) {
	var value = null;
	var element = document.getElementById(idOrName);
	var radioGroupName = null;  
	
	// if null, then the id must be the radio group name
	if (element == null) {
		radioGroupName = idOrName;
	} else {
		radioGroupName = element.name;     
	}
	if (radioGroupName == null) {
		return null;
	}
	var radios = document.getElementsByTagName('input');
	for (var i=0; i<radios.length; i++) {
		var input = radios[ i ];    
		if (input.type == 'radio' && input.name == radioGroupName && input.checked) {                          
			value = input.value;
			break;
		}
	}
	return value;
}

• MapSurface.com - Based on his orginal AJAX Link Tracker, Glenn Jones' service overlays graphical click data on top of your site. You simply press "Alt-X" and up pops your data. MapSurface.com is the hosted service, but there is also a free download [no commercial plans yet announced]
  
• CrazyEgg.com - does essentially the same thing as MapSurface, but the overlays look a little more polished. [currently accepting beta inquiries]
  

• OpenCube.com - OpenCube has been known for it's nice DHTML/JavaScript/CSS widgets and menus, but it has also developed a product that goes a heatmap and actually tracks the mouse movements of users. My worry here is that it seems to require IE to view the data. [$119 per site. Requires ASP on server]
  
• ClickTale.com - Right now, this looks to be the most powerful tool for mouse tracking. This services is also in Beta, so it will take some time to see how good they really are, but their demo videos look solid. [accepting beta applications]
  

• MIT Labs - MIT's Media Lab has released a PHP-based tool that does some pretty powerful mouse tracking. It creates an overlay with arrows of differnt sizes and colors indicating the speed and direction of the mouse. They have a sort of hosted service as well as a download package. (usability study PDF)