Jun
1
2011

Introducing mooTypewriter a Mootools Typewriter Class

One of the really cool things about Mootools, jQuery or almost any other javascript library or framework of your choice is the really cool effects you can create within your projects.

Whether your trying to create a cool effect over an image, think flash banner javascript replacement, or if your simply trying to update the very stale non compliant html marquee, this solution may work well for you. Download, documentation and demo links will be coming soon but for now below you will find the source code

/**
 * mooTypewriter
 * A Mootools class to simulate a typewriter like effect within any dom element.
 *
 * @copyright Copyright (c) 2011, Tim Wickstrom
 * @link http://www.timwickstrom.com Tim Wickstrom Blog
 * @version 0.1
 *
 */

var mooTypewriter = new Class({
	Implements: [Options],
	options: {
		container: $(document.body),
		message: '',
		delay: 350,
		doRepeat: true,
		repeatDelay: 8000,
		cursor: 0
	},
	initialize: function(options) {
		this.setOptions(options);
		this.sizeMes = this.options.message.length;
	},
	start: function() {
		this.options.cursor = 0;
		for(x = 1; x <= this.sizeMes; x++){
			var id = this.setLetter.delay(this.options.delay * x,this);
		}
		this.blinkCursor.delay((this.options.delay * this.sizeMes)+250,this);
		if(this.options.doRepeat){
			this.repeat.delay((this.options.delay * this.sizeMes)+this.options.repeatDelay,this);
		}
	},
	blinkIt: function(){
		if(this.span.getStyle('visibility')=='visible'){
			this.span.setStyle('visibility','hidden');
		}else{
			this.span.setStyle('visibility','visible');	
		}
	},
	blinkCursor: function(){
		if($defined(this.startBlinking)){
			$clear(this.startBlinking);	
		}
		this.span = new Element('span', {
			text: '_',
			styles: {
				'visibility':'hidden'
			}
		});
		this.options.container.set('html',this.options.container.get('html').slice(0, -1));
		this.span.inject(this.options.container);
		this.startBlinking = this.blinkIt.periodical(500,this);
	},
	repeat: function(){
		this.options.container.set('text','_');
		this.start();
	},
	setLetter: function() {
		this.options.container.set('html',this.options.container.get('html').slice(0, -1) + '' + this.options.message.charAt(this.options.cursor) + '_');
		this.options.cursor++;
	}
});

Leave a comment

Show/Hide Footer Actions

Status: Available for your project.