Opera JS Troubleshooting

I recently received a comment that said my sprites were breaking in Opera and Safari 2. I don’t have a mac, so I can’t test Safari 2, only 3. Safari 3 works fine. I checked my Google Analytics to see how many people used Opera and it turns out to be around 3%. So I fired up my Microsoft Virtual PC and installed Opera, right next to IE6 and Safari. All the browsers, I really don’t want to support. Booooooo!

Ok, so the problem wasn’t my technique, nor jQuery. To make my life easier for the demos, I used an array to set all of the sames of all of the icons. I used a function called indexOf to get the position in the array and match it to the class. This is all a fancy way of making the class of the link define what kind of image shows up.

Turns out Opera doesn’t support using indexOf in this way. I found a fancy solution to extend indexOf on Opera. But this is ugly ugly ugly. Why does Opera have to be different? Why does Opera have to exist? Who uses Opera as their main browser? Seriously, are there people who say, “Firefox? yuck; IE7? boo; Safari? no way!” It makes no sense to me. Then again, I am a developer who has to deal with the mess underneath. I suppose if we all drove one kind of car, then maintenance would be easier.

I suggested to the jQuery list to put that extension (copied below) into the core. Why not fix Opera and avoid these issues in the future?

// This is solely to support indexOf in Opera.  Not sure of a better way to do this
if (!Array.prototype.indexOf) {
 Array.prototype.indexOf = function(val, fromIndex) {
 	if (typeof(fromIndex) != 'number') fromIndex = 0;
 	for (var index = fromIndex,len = this.length; index < len; index++)
 		if (this[index] == val) return index;
 	return -1;

To make this code box, I used Dean Lee’s Source Code Highlighter Plugin for WordPress. Uses this GeSHi thing too.

%d bloggers like this: