IE8 and SVG

So I've been working on and off on a visualisation for a few weeks now... I was really quite happy with the result too. Except that the client was demoing on IE8, which is a huge improvement on IE7 and IE6 etc but still sucks!

Everything was working fine in Opera, Firefox and Chrome but what with the client using, as I've said, IE8 I needed to think of something else.

So I looked at Raphael and other libraries but then I got to thinking how IE8 was an improvement because it could handle alpha-transparency.

Now the visualisation involved transparent layers upon a map. This got me thinking: The map could be a suitably sized div with a jpeg background-image and then layering the different images atop that div by setting their position as being absolute in regards to the absolutely positioned map div.

The original visualisation used the SVG in order to trigger some pop-ups that gave further information, but that wasn't now possible so instead I looked at something really rather old school and thought about image-maps.

Image-maps used to be really quite popular but have recently lost ground to more modern approaches, I'm not totally sorry to see them go but I did find them a little useful at times... if a bit of a bugger to sort out by hand!

This is where Mapedit comes in useful though! What with the ability to zoom and having pixel-perfect control of the points of the image-map (and the judicious use of my Wacom tablet), it makes making an image-map a joy, and only $15!

So now I'm not quite so naffed-off with having to support IE8, that is unless future versions of browsers stop supporting image-maps!

Speaking of maps, prettymaps are cool, especially this one:

Bradford Factor

I've been doing a fair bit of work on the Bradford Factor for work... it's really quite nasty. I've had to generate some figures but couldn't clock what valid numbers there were so I created this spreadsheet to look up valid figures (no prime numbers allowed... except you can up until a certain number). If it help then please use it. It's got the number of periods of time off along the left and the total number of days off along the top.

Also had to do some stuff on the Myers-Briggs Type Indicator and I wanted to know what they were, the table below has a title attribute to each cell which'll show a tool tip for each type:

ISTJ	ISFJ	INFJ	INTJ
ISTP	ISFP	INFP	INTP
ESTP	ESFP	ENFP	ENTP
ESTJ	ESFJ	ENFJ	ENTJ

JavaScript 'if' shorthand

I'm not generally a fan of shorthand but the code I'm working on at the minute has loads and loads of if... else statements and they're making the code look bloody ugly so I thought I'd look at the shorthand for if... else. Turns out that it involves a ternary operator.

Anyway the code I'm working on looks like this:

if($('#reverse').attr('checked')){
  newColour = red;
}else{
  newColour = red;
}

Which becomes:

newColour = $('#reverse').attr('checked') ? red : green;

One line instead of five is a big improvement. And it works like this: condition ? result1 : result2;

Shocking Ice Cream Commercials

Thanks to a post on Dvorak Uncensored:

I'm not sure about what message they're trying to give and I'm sorry about the ordering, I'm not sure what that's trying to say either...

M255 TMA 04 is in the bag!

Finally finished the latest and last TMA about half an hour ago thanks to insomnia and caffeine so today I get to play with maps of the RBWM. Yay!

As an aside there seemed to be an issue with the Bach/Chill interface (how often does one get to say that? (Twice now)).

JavaScript getBackgroundImage(myDiv)

function getBackgroundImage(myDiv){
  // string to be returned
  var returnString = "";
  // Grab the offending element by id
  obj = document.getElementById(myDiv);
  // IE Opera
  if(obj.currentStyle) {
    returnString = obj.currentStyle.backgroundImage;
  }else{ // Firefox 
    returnString = getComputedStyle(obj,'').getPropertyValue('background-image');
  }
  // this gives is something like: "url(someDomain.com/someImageDirectory/someImage.someFormat)"
  // so we get everything after the last "/" which leaves us with "someImage.someFormat)""
  returnString = returnString.substring(returnString.lastIndexOf('/') + 1);
  // so we get rid of the last 2 characters leaving us with:
  returnString = returnString.substring(0, returnString.length-2);
  // "someImage.someFormat"
  return returnString;
}

With thanks to this post on WebmasterWorld. So much for being a birdbrain!

JavaScript isEven(value)

Nice easy function to tell if a number is even:

function isEven(value){
  return value % 2 == 0;
}