Category: JavaScript

Posted on

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”

Posted on

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”

Posted on

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”

Posted on

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

Posted on

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.

http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/107818028448432089104/sockandawe.xml&synd=open&w=160&h=60&title=&border=%23ffffff%7C3px%2C1px+solid+%23ffffff&output=js

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

http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/107818028448432089104/sockandawe.xml&synd=open&w=160&h=60&title=&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js

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.

Posted on

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”

Posted on

Professional JavaScript for Web Developers

When starting for Fubra back in 2006 I would have probably described my knowledge of JavaScript as basic to say the least. Knowing how to alert a bit of text and pop up a confirmation box was sadly pretty much the upper range of my ability at that point in time.

Since then I have found myself purchasing and reading a number of web development related books, whether they be JavaScript, PHP, MySQL or CSS. Each one highlighted something that I either didn’t know or simplified something I may have known already.

The majority of my collection is made up of books from the O’Reilly collection, but I also own a number of the Wrox publications. My current favourite – or should I say most referred to – is the Wrox edition of Professional JavaScript for Web Developers by Nicholas C. Zakas.

One of the most useful features it offers are the comparisons between IE and the DOM, highlighting what is and is not available to you across them both. The many examples provided throughout the book cover numerous situations across all the major browsers and provide a deeper understanding of the differences and how to work around them.

Recommending this book to anyone with an intermediate knowledge of JavaScript is something I would do without hesitation. Having recently lent it to a friend of mine, I have however discovered that it may not be so suitable to those just beginning JS or anyone having little development experience.

The synopsis does explain that the book:

Quickly covers JavaScript basics and then moves on to more advanced topics such as object-oriented programming, XML, Web services, and remote scripting

I am always on the lookout for books of similar nature to this on the subject of JavaScript in order to expand my collection and knowledge, therefore any suggestions or recommendations that you may have are welcomed.