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

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

JS preload image ‘bug’ in Opera

I have recently attempted to load an image in JavaScript (using jQuery) and once loaded get it’s dimensions.

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). Continue reading

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

CSS Opacity in Opera using jQuery

Whilst attempting to cross browser test a jQuery plug-in that I’m currently working on, I noticed that my opacity settings were being ignored in my current version of Opera (9.23).

$("#id").css({opacity: 0.8});

It turns out that the latest version of jQuery (1.3.1) doesn’t believe that Opera 9.2 supports CSS opacity, and therefore it is ignored completely. Continue reading