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”

Google Maps API default control look-and-feel

Although I haven’t managed to do any work with the Google Maps API for a few months now, I do try and frequent the Google Geo Developers Blog every once in a while.

On my last visit I noticed a post mentioning new functionality that allows you to include the standard user interface elements you get on the main Google Maps site, plus the standard behaviour of keyboard and mouse handling.

Continue reading “Google Maps API default control look-and-feel”

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 :).

SockAndAwe Google Gadget

After working with the SockAndAwe.com site for a little while now, I have written and submitted my first Google Gadget which displays the number of shoes thrown at George Bush via the internationally popular flash game.

To embed this gadget into your site you can use the following code:

Alternatively you can add this to your iGoogle homepage or customise this gadget to fit your site design.

Why not join in shoe throwing fun and see how many times you can hit Bush by playing the game at www.sockandawe.com.

Google Static Maps API

Admittedly I have completely missed the boat on blogging about the Google Static Maps API which was launched back in February, but I was reminded of them the other day whilst working on a site admin panel.

As the maps I wanted to display were only a small addition to the panel providing a quick snapshot of a location, using the full JavaScript API would have been rather unnecessary.

This is where the static maps prove very useful and are an easy and quick addition to any web page, whether or not you use Google’s static map wizard. Continue reading “Google Static Maps API”