Monday 3 November 2008

Cross Browser JavaScript

I have been having terrible trouble making my daughter's 'Countdown to Christmas' google gadget work on internet explorer - works fine on firefox, but alas quite a lot of the world use IE, and on IE you just get a blank square.

IE is not helpful with debugging - it seems to be fussier about little problems that firefox let me get away with, so there were quite a few typos (no closing '>' etc.).

One significant issue was that I was attempting to scale the background image in html using width='100%' height='100%' - firefox stretches the image to fit, but within a google gadget at any rate, internet explorer just displays a blank square - no helpful error messages or anything - useful!
This means that my very clever bit of code to put the text in the correct position on the image doesn't work...Cured by forcing the image to a specified size in pixels rather than % - just means you have to size your page to fit it....This was not pretty, so had to solve it. Went for specifying width=100%, which works, and let the height float to preserve the aspect ratio of the image - just had to add yet more code to pick the vertical position of the text correctly.

The last problem was the dates - IE said there were about 600000 days to christmas, which was not quite right - this was because getYear() returns 108 in Firefox and 2008 in IE. Using getFullYear() cured it.

No comments: