How to force Internet Explorer to ignore the cache and reload a SWF...

Dave of and I have just put the finishing touches to a very* simple voting form on a website I have been developing. Users can vote from six choices and the results get picked up by a SWF file that displays the results as an animated bar graph.

The problem, as ever, was Internet Explorer. After casting your vote you would be redirected to a new page containing the SWF file showing the new vote standings (including your vote). This worked fine in Firefox and Safari but, for reasons best known to some useless Microsoft techy, IE saw fit to just load in the SWF with the old data. I tried all sorts of work arounds including meta-tags that (supposedly) prevent IE from caching the webpage but to no avail.

In the end I created a new SWF file, the same shape and size that loads the original one in using the following code:

theDate = new Date();
// this number will always be unique
nocache = theDate .getTime();

The random number *should* prevent IE from just loading in the previous version from cache. Some testing will tell...

Oh - and you can do the same if you are loading in other files, such as txt, too.

* No really - VERY simple.

PX to EM...

Now this is good: 

I found the link to it on Dave White's blog and its pretty damn groovy. It is hailed as “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce.

I like those apples :o)

Scaling embedded YouTube videos...

I posted my first blog entry with embedded video this morning. As you’d expect I simply copied the supplied embed code from the relative video on YouTube (with customised colour of course) and pasted it in my post*. As my blog text column is only 350pixels wide and YouTube’s default video width is 425pixels this meant that I had to resize the video whilst maintaining the videos width to height ratio. How? Easy...

In your YouTube embed code you will see TWO instances of:

width="425" height="344"

Simply change the BOTH the instances to the width and height you require. In my case the width="350". As the ratio of the YouTube window seems to be roughly 1.2:1 to find the height simply divide your width by 1.2

width / 1.2 = height
350 / 1.2 = 291.666 (I rounded down to 291)

Once you’ve plugged in your new numbers the video window will be nicely resized.


* Therein lay some problems leading me to have to download WLW Beta – but more on this later.