Emulate human typing with the jQuery Teletype Plugin

In a recent web project, we came across the need to use an effect to replicate human interaction and emulate this on the website. The requirement was to type out text, optionally delete portions or all of the output and allow simple options to be used to determine the speed, delays amongst other possibilities.

As often is the case, there were a few options to use from exiting jQuery plugins, however none that I came across worked close enough to the requirement – without drastically modifying them to suit. Having previous experience creating plugins using the jQuery library, piecing something together to produce the desired effect was something to look forward to.

On a quiet Sunday afternoon, the first draft of the Teletype jQuery Plugin was complete within a few hours, and soon after released into the public domain. It’s been a while since a small personal project like this has been packaged up and shared with the community, which was one of the main reasons for proceeding with the idea.

Continue reading “Emulate human typing with the jQuery Teletype Plugin”

jQuery document ready bug in Safari / WebKit

There is an issue with the jQuery 1.3.2 document ready function in WebKit based browsers that which can cause numerous problems if you are manipulating the DOM, in my situation getting the width / height of an element.

Using the .width() and .height() methods were working fine in every other browser but Safari, which I thought was a little bit odd. After trying to come up with an alternative method of coding calculating the heights and comparing them in FireBug and Web Inspector, I set about Googling the problem. Continue reading “jQuery document ready bug in Safari / WebKit”

Today I wrote my first JavaScript tutorial

Today saw the launch of SixCrayons.com, a new design blog focussing on six main categories of front end web development, from design to additional enhancements using scripting languages such as Flash and JavaScript.

Although I have a hand in the majority of categories, JavaScript is something I have a keen interest in and was asked to write a short tutorial on a JS related subject. Continue reading “Today I wrote my first JavaScript tutorial”

Simple jQuery string padding function

I’ve written a very simple jQuery function to return a string padded to a specified length, similar to the php equivalent str_pad.

$.strPad = function(i,l,s) {
	var o = i.toString();
	if (!s) { s = '0'; }
	while (o.length < l) {
		o = s + o;
	return o;

Example Usage:

$.strPad(12, 5); // returns 00012
$.strPad('abc', 6, '#'); // returns ###abc

This version only supports left padding, which is why it is labelled as only a simple version :).