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.

The only problem was that I had no idea what to search for, so started with the term “jquery height in safari”. The first result looked promising but took a fair bit of reading, although it proved to be worth while in the end. One comment pointed out that you should try to:

use jQuery(window).load() instead of jQuery(document).ready()

I tried this and straight away saw the results that were expected. The problem was that I didn’t really want to stop using the preferred document ready method ($(function() { … });), so searched the jQuery Bug Tracker for any sign of a bug report.

I eventually found one highlighting the exact problem I was having, issue #5521. The solution came in the form of a patch the document ready function that targets Safari.

+ if (jQuery.browser.safari && document.readyState != "complete") {
+ setTimeout( arguments.callee, 100 );
+ return;
+ }

It doesn’t look like this fix (nor any other form of solution) have been included in the latest nightly build, so I’m opting for the window load solution for now.

EDIT: Another solution to this problem is  to simply include any CSS files before the inclusion of the jQuery file. I found this by browsing the bug tracker and coming across ticket #3690.

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 .

$("#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.

There are two possible fixes for this, the first is to simply upgrade Opera to a newer version (the latest is 9.6.3).

The second option is to tell jQuery that opera does support opacity using the following – or similar – within your script:

if ($.browser.opera) {
    $.support.opacity = true;
}