Wednesday, 1 July 2009

Websiting

This morning I did some more website stuff, trying to work out a good way to display a slideshow of images on my front page.

I wanted to check how javascript would get on with loading multiple images into the browser's cache, but since I'm testing the website locally, everything downloads almost instantly. I guess I could have tried uploading everything to the web server, but I have an approx 0.5MB/s (up to 8Mb/s) internet connection, so everything would still download pretty quickly anyway and I might not be able to see how well the javascript image loading was working.

So I started NetLimiter Lite 2, which was a bit of trouble as I'd disabled the NetLimiter Service, so I had to find it and then start it again. But when I finally got it started, it said my trial period was up and I needed to register.

NetLimiter isn't too expensive (about $20), but I thought I should check if there are any better programs or free ones that do the same job before shelling out for NetLimiter.

In my googling I came across this HOWTO: Install pyshaper (like netlimiter for linux). So I followed the guide there and set it up on my Ubuntu Virtual Machine (which is serving the local copy of my website). It seems to work okay so far, and is free, always a good plus.

Also in the morning, there was a young blackbird in the pond hole that Clare noticed. We weren't sure if it wanted to be in the hole to cool dow, or if it had fell in there and couldn't get out. I put a spade and a stick in the hole so it could climb up the spade handle or stick and escape if it wanted.

When I checked the hole again at about 10.30am, the bird was still in, so I went down in the hole to get it out. It wouldn't let me pick it up, but kept flapping its wings trying to fly away, so I managed to get my hands under it while it was flying up a little bit, then helped it up out of the hole. It ran away under the Salix bush, which was where I was planning to put it if I could pick it up, so I'm pretty sure it had got stuck in the hole and didn't want to be in there.

In the afternoon I carried on trying to make a slideshow with jQuery. The problem with jQuery is that things often seem not to work, and jQuery doesn't seem to have any error handling built in, so you just an error message like
Warning: function eval must be called directly, and not by way of a function of another name
Source File: http://static1.photosite.com/jquery-1.3.2.min.js
Line: 12

Which isn't very helpful for figuring out where your code is wrong.

In my case, I had some code that was working in IE7, but not Firefox. I was getting a list of images from the server, then putting them in an array like so:

//Load the images into cache
var images = [], img = new Image();
$(data).each(
function(){
img.src = STATIC2+'/Img/'+this.filename;
images.push($(img).clone());
}
)

and then trigger a function when the first image had loaded

$(images[0]).load(
function(){

alert('image loaded);
}
);


After commenting out various things and trying different stuff, I found out that load() must get messed up when cloning an image or something (well in Firefox anyway, as I said, still worked okay in IE7).
Changing the code to create a new image each time rather than cloning one image seemed to fix it:

//Load the images into cache
var images = [];
$(data).each(
function(){
var img = new Image();
img.src = STATIC2+'/Img/'+this.filename;
images.push(img);
}
)


After getting that working, I found that $(window).height() didn't get the correct window height in Chrome. It did give a value, though I'm not sure what, maybe the <body> height. It worked okay in Firefox 3.11 and IE 7, but I assume it doesn't work in any Webkit browsers. So to get the window width I instead had to use document.documentElement.clientHeight, which I think gives the correct window height cross browser.

Then I found that my page wasn't working in Opera. After trying lots of different stuff I discovered the problem - Opera is set to only check cached images every 5 hours. I had my image onload function in my script AFTER setting the src of the image. This meant that (in Opera) by the time it got to the image onload function in the script, the image had already loaded (since it was cached). So I had to move my onload function to before I set the src of the image.

After dinner I watched Mongol with Moccle, which was pretty good, but has a lot of bits where it just cuts from one to scene to another in the future, and doesn't explain what's happened between the scenes, e.g. you see him drowning in an iced over lake, then later he's just lying on the snow; he's got his head and hands shackled to a wooden board, then later he's somehow removed them; he doesn't have any followers and has just got out of prison, then later he's got a great army. And that's just a few examples.

Then I did some more website work. I found that IE7 was giving the height of a div about 20px more than all the other browsers, but I couldn't find any way to get it to give the same height as the other browsers.

Food
Breakfast: Bowl of Frosties; cup o' tea.
Lunch: 2x cheese on toasts; salad; stick of celery; ½ nectarine; Rocky; cup o' tea.
Dinner: Pasta twirls; tomato bolognese sauce; bacon. Pudding was a slice of Mandarin cheesecake. Coffee.
Supper: Milk chocolate digestive; custard cream; coffee.

No comments: