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.

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.

To include the new UI and behaviours, include the following code:

// var map = new GMap2(mapDiv);
map.setUIToDefault();

This function will ensure that any updates to the maps.google.com UI will also be reflected on your site without you having to carry out any updates.

Read the full blog post here.

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;
}

Following up on the success of sockandawe.com the latest leader bashing game has now arrived with the release of bailoutbrown.com.

The format is the same, except instead of throwing shoes you are armed with a wad of cash! So even if you have no interest in the political side of things you can still have a bit of fun playing the game.

I’ve also written a new Google Gadget that displays the amount of cash thrown at Brown, assuming we are throwing wads of £200 at him that is.

Include this on your website using the following script:

<script src="http://www.gmodules.com/ig/ifr?url=http://www.bailoutbrown.com/gadget/module.xml&amp;synd=open&amp;w=220&amp;h=50&amp;title=&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

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

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

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.

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.

Static maps are displayed as images and are configured by a number of parameters sent as part of the image source in the http request, for example:

http://maps.google.com/staticmap?center=51.235912,
-0.751019&zoom=13&size=460x250&key=API_KEY

To use the static maps you are required to sign up for a Google Maps API key which can be obtained from here, although if you already have a JS API key this can be used.

When it comes to road map views the static maps provide you with many of the features available in the JS version, including but not limited to zoom levels, markers and polyline paths.

One downside I encountered was that static maps does not provide the ability to display satellite or hybrid imagery, or at least as far as I am aware.

There is also a query limit of 1000 unique (different) image requests per viewer per day, but a quick browse at the Google Group for the Maps API highlighted a few posts encouraging people to cache their results.

Even if you prefer to stick to the JS version at least now you can display some form of output to any visitors without JavaScript or with JS disabled, although they’re not as dynamic at least there’s something for them visually.

UPDATE

Since originally posting this, Google have announced the new static map features on the Google Maps API Blog, bringing to our attention the introduction of the new marker styles, paths, map image formats and the ability to translate labels into a number of languages. Read the full post here.

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.