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.

It took me a while to think of something to base the blog post on, but it eventually coincided well with something I needed for another project I am currently working on.

We’ve all seen the use of pre-filled input areas, where a faded description or hint of what should be entered by the user is inserted into the input and disappears when it is clicked on.

I am a big jQuery fan, so writing a plug-in to solve the issue I had seemed like a good solution, so wrote the first draft of my plug-in whilst trying to describe what was happening along the way.

Hopefully what I’ve written is fairly simple to follow but it is my first attempt at writing a tutorial of this length and detail, so if you have any hints or comments (aka constructive criticism) then do let me know .

Head over to SixCrayons and have a scan through my tutorial on writing a simple jQuery input hint plug-in, or even just browse through the other categories.

Using the following code I managed to successfully read the width and height properties in FireFox 2/3, IE 6/7, Windows Safari 3/4 and Google Chrome, but the dimensions were not available in Opera (10).

$('<img alt="" />')
	.load(function() {
		$('body').append(this);
		var w = this.width;
		var h = this.height;
		//..
	})
	.error(function() {
		//..
	})
	.attr('src', '/path/to/image.jpg');

After a fair bit of time playing around trying to debug this small snippet of code, I eventually discovered that if the image was appended to the DOM after the width and height had been read then Opera would report the values correctly.

		var w = this.width;
		var h = this.height;
		$('body').append(this);
		//..

Simply moving line 3 down to below the reading of dimensions solved this issue.

1
2
3
4
5
6
7
8

$.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 .