Thursday 2 July 2009

Websiting and ponding

Today I did some more work trying to get my jQuery slideshow to work. I spent nearly all the time trying to work out bugs in my code, nearly all typos. I think the only bug that wasn't a typo was in IE7.

With my page, the <body> doesn't have enough content to push it down to the bottom of the window. My slideshow script appends a div to body with CSS like:
.slideShowBG{
position: absolute;
top: 100px;
left: 30px;
bottom: 20px;
right: 30px;
background: #000;
padding: 40px;
text-align: center;
vertical-align: middle;
margin: 0 auto;
}

Also, my html has a height of 100%, and the body is not positioned.

In all browsers (well, I've not tested IE6), this makes the div stretch from 100px below the top of the page/window to 30px above the bottom of the page/window. Now in my javascript/jQuery, I am using this div as a border round the image, and resizing it when the image changes so it will always wrap the image being shown nicely, no matter what the image's aspect ratio.

When the image changes, what I am doing is shrinking both the div and image to nothing, then setting the div's height and width back to auto, so I can measure the div's height and width to see how much room there is to fit the image in. In all browsers I tested apart from IE7 this works fine, but in IE7 when the width and height on the div are changed to auto, or nothing (same thing), rather than the div stretching from 100px below the top of the page/window to 30px above the bottom of the page/window, as it was originally, it will now stretch from 100px below the top of the body to 30px above the bottom of the body. And because my page's body is very small, this makes the div very small.

I thought maybe jQuery was setting some other property on the div that was making it different to when it was originally inserted into the page, and this difference was causing it to be positioned relative to the body. However, looking at the css for the div in the IE Developer Toolbar, I couldn't see anything. So I just changed my code to calculate the div height based on the window height in IE7.

Another problem that I don't think was my fault was in IE8, I would get an error about
img.src is null or undefined
The problem with this error is that it was occurring inside an if statement that said
if(typeof((img = data[i].image)) != undefined)
data[i].image refers to an image, and is only set from that image's onload function, so there's no way it can exist without having an src.

The other thing with this error is that sometimes it would occur when switching to the 2nd image, sometimes on switching to the third image. If I refreshed the page without clearing the cache, then it would work okay. I'm thinking of changing the way the slideshow works, so I won't worry about this too much at the moment.

From about 8pm - 10.30pm (or maybe 10.45pm), I did some more work on the pond. It's all clayed up now, and needs the plants (and then water) adding. The plants were in rock-solid soil, so we left them in a wheelbarrow of water overnight, and Clare said she'd plant them early tomorrow morning.

Food
Breakfast: Strawberry jam toast sandwich; cup o' tea.
Lunch: Ham with mustard, iceberg lettuce and celery sandwich; clementine; Viennese Whirl; Rocky; cup o' tea.
Dinner: Savoury rice; ½ beef burger in ½ bun with grated mature cheddar cheese, tomato ketchup and iceberg lettuce; slice of bacon quiche. Pudding was some fresh pineapple and nectarine. Coffee.

No comments: