Websiting

This morning I did some more work on the slideshow for my photo website. I wanted to make it so when a thumbnail image is clicked, the large version of that image immediately starts downloading for display, and so would have to cancel the download of the image that was previously loading.

I store the currently loading image in a property of my slideshow object called 'currentlyLoading'. I thought I would be able to cancel the download by just deleting that property e.g.

slideshow.currentlyLoading.parentNode.removeChild(slideshow.currentlyLoading);
delete slideshow.currentlyLoading;

However, this didn't work. Using Fiddler to inspect the HTTP requests, I could see that the image would continue downloading even when I closed the browser!

Googling about this, most results seemed to just be about stopping images from starting downloading, rather than stopping an image that has already started downloading. However, I did find this post on stack overflow: Javascript: Cancel/Stop Image Requests.

After trying to load an image via AJAX so I would be able to stop the request, it seems that this is not possible in my case as my images are hosted on a different subdomain to my webpages, and cross domain AJAX is not possible due to security reasons. Looking at the jQuery docs, it seems that cross domain AJAX is possible, but only with JSON and pulling in an external script. So no good for downloading images.

I think I will need to just get my slideshow working at the very basic level for the moment, and then learn how to make an improved version in Flash.

After lunch I went on Animal Crossing. I went to the City, and got Kicks to shine my shoes by my style. I was wearing the explorer outfit, and he made my shoes Red, which I thought was a bit weird. Then I went into Gracie Gracie, and Gracie was there. I got her to give me some fashion advice, but she said my shoes didn't go with the rest of my outfit. Grrr! That Kicks!

I went to see Kicks about this, but all he would do is say that my shoes were looking really good and to come and see him again when they need another buff. Unfortunately you can't use your equipment in the city, otherwise I would have hit him repeatedly with my net.

I did some more work on my photo slideshow, trying to track down some errors, which took ages.

There was a thunderstorm, and my UPS beeped, so I switched my PC off for a bit, but everything seemed to be okay. When Lil' Lad got home though, he said that all the computers at school had turned off, so I guess it's just as well I have a UPS!

I think my basic slideshow is just about working now. I am getting some errors in Firefox, which I believe are probably to do with scope, though it's hard to tell as I think the problem is inside a

I had a problem with Opera in that it wasn't displaying the slideshow at all, and I couldn't work out why. As well as not displaying the images, after downloading the first image, it wouldn't download any more. My code for loading the images was as follows:

        var img = new Image();
        this.currentlyLoading = i;
        img.onload = function(jj){
            return function(){
                
                //Store this image in the loaded images array
                jj.images[i] = this;
                
                //Delete it from the imagesToLoad array
                delete jj.imagesToLoad[i];
                
                //Load the next image
                for(i in jj.imagesToLoad)
                {
                    jj.loadImage(i, jj.imagesToLoad[i]);
                    break;
                }
            }
        }(this);
        img.src = STATIC2+'/Img/'+data.filename;
        $(img).addClass('slideShowImg').css({"display" : "none"}).attr("alt", data.Headline).appendTo('body');

Eventually I figured it out (well I think so anyway) - because the image's onload function needs to be evaluated, by the time the onload function is evaluated, the image's src has already been set, and so the onload event won't fire. So switching those last two lines, so the CSS etc. is set on the image before setting the src, means that the browser has enough time to evaluate the image's onload function before setting the image's src. Trying my site in IE8 and Firefox, both of these browsers worked okay without changing the above code.

After getting that working okay, I checked Dpreview and Moose News blog. Then I uploaded my site files to WebFaction, to test the site on the web server. After making changes to various files so the site should work on the web server, I tried uploading a photo through the site, but got the error

HTTP Error 413 - Request entity too large

Doing some googling, I found that you need to add client_max_body_size 200M (or however many MB your max upload size will be) to the server section in your nginx conf file: nginx 413 when uploading file 1mb or larger. I also added the lines to php.ini about max POST size and max upload size, then restarted spawn-fcgi and nginx. The file uploaded okay, but I got an error from Imagick about a folder not existing. So I checked, and the folder didn't exist, so I created it.

Since the upload process had created a database record for the image, I needed to delete that. However, when I deleted the main record, all records linked to it in other tables should also be deleted due to the Foreign Key Constraints, but they weren't. I checked whether a table had foreign key constraints SHOW CREATE TABLE tablename, and the foreign keys existed, but not the constraints.

I checked the Foreign Key constraints were in the SQL file I was importing, and they were, and it definitely said to use the InnoDB engine for each table. I tried dropping the database, and importing it again, but still the foreign key constraints weren't being set.

I thought maybe it was a problem with phpMyAdmin, but googling didn't turn up anything helpful along those lines. So I decided to try and import the file via the MySQL command line rather than phpMyAdmin, to see if it would work like that. Googling, I eventually turned up a tutorial on how to import a database from a file using the SQL command line, it's very simple as it says there, you just do SOURCE file.sql;

MySQL imported the files, but said it had 2 errors for most tables. Checking in PHPMyAdmin, all the tables were MyISAM! In phpMyAdmin, I opened a test database, and created a test table, and found that InnoDB wasn't listed as one of the possible storage engines. Much googling later, it seems that you must specify InnoDB as a plugin when you compile MySQL.

After finding that out, I decided to try and install MySQL 5.4.1, but when doing a make, I got an error saying

libtool: fork: Resource temporarily unavailable

According to this: libtool: fork: Resource temporarily unavailable, it seems that the problem is because my shell provider doesn't allow me to run enough simultaneous processes.

Rather than bothering WebFaction support with it, and since it's a beta version just for testing/development environments, I'll try again with MySQL 5.4.0 tomorrow (as it's getting late now).

In the evening I also watched quite a bit of Red Cliff 2 with Moccle.

The weather today was mainly cloudy, with a few sunny spells, and more rainy spells, with one or two lost of very heavy rain.

Food
Breakfast: Lemon marmalade toast sandwich; cup o' tea.
Lunch: Slice of cold cheese pizza; banana; slice of Moccle's chocolate birthday cake; cup o' tea.
Dinner: Cheapo sausage; Delee Pork & herb sausage; baked beans; brown sauce; potatoes. Pudding was trifle sponge with tinned peach slices and cold tinned custard. Coffee.
Supper: Hob-nob; cheapo shortbread finger; cup o' tea.