Too Cool for Internet Explorer

Saturday, October 2, 2010

Who cares about Javascript, Jquery and Prototype?


Well, I care about them all of course.

But I have recently experienced a situation where if I was in a more up to date development environment, none of them will surpass simple HTML and CSS.

Let me show how that application should work:

  • First of all, unfortunately, we need to use tables in these apps.
  • We have a set of images in a Thumbnail.
  • When one of the Thumbnail images is clicked a corresponding centered larger image will be displayed at the bottom of the page.
  • I have defined a fixed width of this larger image in 750px.
  • I was counting with the height being automatically and proportionally set considering that width.

Everything works fine in all browsers, except when images are narrow then that preset limit.

In that case the centered larger image becomes distorted. The narrow the image compared with the preset width the more obvious becomes the distortion.

You can see an example of how it not properly works here.

On the other hand the solution to that was amazingly simple. Simple as 2 lines of CSS code!

You can see that working option here.

But there is a problem… As always that simple amazing solution doesn’t work on IE6 (in fact it doesn’t work in IE at all). If you are testing the above example in IE, try the last image and see what happens.

Believe it or not, many customers around (at least here in Brazil) are using that infamous browser as the “official” one, and developers should base their web applications on it.

That is only one of the many situations where you should care about Javascript, Jquery and Prototype. They will help you a lot.

Since this is not so complicated, Jquery and Prototype are not necessary. Just a couple of Javascript functions have solved the problem.

Here is a working solution tested against IE6, IE8 and some real modern Browsers like Firefox, Safari, Opera and Chrome.

I would like to see some Jquery and Prototype alternatives to get the same, on an even simpler solution.