Websiting

Despite putting my watch forward 1 hour yesterday to correct for the start of DST today, and so going to bed an hour earlier than normal, I managed to actually wake up later than normal today. I only had time to have a shower etc. and eat breakfast, then left for Church.

At Church we got given a palm cross as we left, I put mine in my coat pocket, but when I took my coat off when we got near home, the cross had disappeared, so I guess it must have fallen out of my pocket somewhere.

After Church I started cutting out some Pogs in Photoshop. For dinner we had a district church person and his wife round.

After dinner I carried on cutting out pogs in Photoshop. For this update of my pog website, I also had images of a packet and checklist. I had saved the packet and checklist images as jpegs, since they are square they don't require the alpha-transparency that is required for the circular pog images (which I save as PNGs). Since the packet and checklist images are much larger than the pog images, I decided to test the update on my local copy of the website before updating the live website.

It seemed to work okay in Firefox, but in IE8, the background overlay when loading the large version of an image was solid black, when it was meant to be partially transparent. Obviously this problem wasn't caused by the large images, but must have been present since IE8 launched. The CSS rule I was using for the semi-transparent background (which wasn't working) was
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
Changing this to
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
made the opacity work. My guess is that in IE8 before it was launched, it required an '-ms-' in front of the 'filter' property (since otherwise, why would I have written it like that?), but then they changed it for the release version to require just a plain 'filter' with no '-ms-' prefix.

Next I had a problem in IE7 where the image was always being positioned at the top of the page instead of the top of the viewport. After some debugging, I found the problem was that I was using
document.body.clientHeight
to get the page height. I can't remember exactly, but it was either returning 0 or the window height, either way it wasn't the page height. This then messed up calculations later on that used the page height. The solution was to instead use
document.body.scrollHeight
to get the page height.

Next I looked at IE6, which was giving me javascript errors. The MS Script Debugger just said it couldn't load the javascript file when I clicked to debug the error though. Furthermore, the error would occur continuously, requiring me to 'end process' IE through the task manager. So to try and get debugging working so I could tell where the error was, I decided to install Microsoft Expression Web.

Before installing it though, I thought that my IE6 Virtual Machine image would be going to expire soon, and so it would be a good idea to download the latest vhd to save installing Expression Web on my current vhd, and then having to install it again in a few days on a new vhd when my current vhd image expires. However, checking the MS website, the IE6 vhd expires on April 1st (so in a few days). So no point downloading that then.

So I got on with installing MS Expression Web on my current IE6 vhd. While I was waiting I checked various photo websites. It took ages, but did finish eventually.

I started it up, created a new project, and then started debugging, which opens IE with Expression Web attached for debugging. I then opened my webpage, refreshed it to make sure the latest copy of the js file was downloaded, and clicked on the image to load it up.

Expression Web intercepted the error, and showed the point in the code causing the error. However, the error was 'Object Required'

But where Expression Web had paused the code execution was in the following function:

function getWindowSize() {
  var winX = document.documentElement.clientWidth;
  var winY = document.documentElement.clientHeight;
  return [winX, winY]; 
}

Checking both document.documentElement.clientWidthand document.documentElement.clientHeight in the console in Expression Web, there weren't any problems, both existed, and both gave the expected values. So after all that time taken to install it, Expression Web was pretty useless for finding out what the problem was.

So I started debugging the old fashioned way - stick an alert() in the code, then keep moving it down the code and refreshing the page until the error occurs before the alert, Then you know that the error occurs between where you last placed the alert, and where it is placed now.

Eventually I figured out that the problem seemed to be related to the Alpha transparency PNG fix I was using in IE6. I think this fix does something like replaces the PNG image with a transparent gif, then sets the Alpha Transparency filter to make the PNG appear as the background image and sets the width and height of the image to match that of the PNG. My code was changing the src of a PNG to a jpeg, and then relying on the image automatically being the correct size (which it isn't if it has the width and height of the 'loading' PNG set.

In the end I decided to just check whether the url had 'jpg' in it, and if it did then just load the image in the browser (the default action of the link), and otherwise to do the 'lightbox effect'.

The weather was a mixture of sun and clouds all day, with more clouds than sun. In the evening it rained a bit.

Food
Breakfast: Bowl of Choco Moons Cereal; Cup o' Tea.
Dinner: Chilli Con Carne; Rice; Flavoured Tortilla Chips; Grated Mature Cheddar Cheese. Pudding was a slice of Raspberry Pavlova with Ice Cream. Coffee.
Tea: Peppered Ham Sandwich made with Bakery Bread; Orange.
Evening Snack: 1½ Slices of Sponge Cake with Forest Fruits Jam, Buttercream, and Icing; Cup o' Tea.
Supper: Chocolate Mint Sandwich Biscuit; Cup o' Tea.