Tuesday 29 June 2010

Cross Browser addEventListener

So I got to thinking about why I hade loads of onclick elements written into my code and how it really didn't help the readability and purity of the X/HTML code so I decided to look at addEventListener which is something I've seen lots on comp.lang.javascript but has always worried me ever so slightly. Anyway, it's not all that hard really, you just do something like var helloP = document.getElementById("helloWorld"); helloP.addEventListener('click', helloWorld, false ); and then add a function like this: function helloWorld(e){ alert("Hello World");}

It's not all that hard except that you need to appreciate that Internet Explorer doesn't implement it that is!

Instead Internet Explorer uses attachEvent and it behaves in a different manner. Say we wanted to get the ID of the element that was clicked in the above example. In most browsers we'd use an alert like this: alert("Hello World, you pressed the paragraph with the id of \""+e.target.id+"\"."); but internet explorer will get all confused and say that it doesn't understand target... it does understand srcElement though. At the beginning of our script we can check whether the helloWorld function can't understand target by asking if(!e.target) and it it doesn't then e.target will become srcElement thus: if(!e.target){e.target = e.srcElement;}

If course we've still got to add the listener in the first place so we could replace addEventListener with a generic function which handles all the browser problems and I found one here, but I didn't like the shorthand of the variables it was using so refactored them to this:

function addEvent(element, type, listener, useCapture) {
  if (element.addEventListener) {
    element.addEventListener(type, listener, useCapture);
    return true;
  } else if (element.attachEvent) {
    return element.attachEvent('on' + type, listener);
  } else {
    element['on' + type] = listener;
  }
}

So we've a cross browser way of adding listeners and a cross browser way of handling the result of the listener, cool ehh? If only IE would stop being such a pig!

Edit: It would seem that that isn’t all that’s needed, after reading this article on quirksmode I may well have to do some more work if I'm after anything other than the ID of the element clicked!

Monday 21 June 2010

A Place for Amber

So I'm working on Information Visualisation using colours, something along the line of green being good and red being bad, but have you ever tried to blend red and green? The result is vary rarely pretty so I got to thinking about how to do it. Initially I went through The Gimp and the gradient fill tool with red being the background colour and red being the foreground colour. I created an image that was 90px long and 10 high and filled it with the gradient. Created another layer with black lines every 10 px. Copied and pasted the squares between the lines into another image and let the Gaussian Blur tool go crazy before pasting the result back into the image and anchoring the layer, I did this for all 9 squares and then converted to indexed colours using the web pallette. It worked a treat to start with but when it gets near the middle there is a really rather nasty brown!

After looking and looking I realised that there was something interesting going on in terms of the hex colour codes that was generated and they each seemed to jump in increments of 33 (that's 33 hex or 51 decimal!). So there was effectively a scale going on with 00, 33, 66, 99, cc and ff being the only red and green numbers... except for near the middle (where the browns live, with there being a blue at 33). Odd ehh? Have a look:

ff0000
cc0000
993300
996600
999933
669900
66cc00
33cc00
33ff00

Got to thinking some more and ff / 9 = 1c so I could make a scale between 00 and FF using 1c increments:

ff0000
e31f00
c73b00
ab5700
8f7333
738f00
57ab00
3bc700
00ff00

But then the penny dropped! Why not look at traffic-lights and replace that there nasty brown with Amber (Or at least Orange!):

ff0000
ff3300
ff6600
ff9900
999900
99cc00
33cc00
33ff00

Thursday 17 June 2010

IE6 and the empty div

So I'm working on a site where the majority of the audience work within environments where Internet Explorer 6 (IE6) is still prevalent... now I used to work in a similar environment so I always used to use Portable Firefox, one of the joys of which is that it doesn't touch the underlying OS, neither does it take any notice of the various rules associated with IE6 so while others were bemoaning the loss of access to facebook I was wondering what all the fuss was about... but without them being on there there was less of a reason for me to be and I realised what a drag it was... which is all a bit of a long-winded introduction to IETester which allows me to now view sites created using my bright and shinney Windows 7 machine running the latest IE, Chrome, Firefox, Safari and Opera to run IE6... seems a bit naughty that though - like asking a supermodel to wear old, grungy Y-fronts.

Anyway, after playing with it for a while I discovered a problem with an underline I was using. Being the perfectionist I am I wanted the underline on some text to miss the descender of the text I was using, a little like underlining some text at school and wanting the line to miss the curly bits off the bottoms of "g"s, "j"s, "p"s and "q"s (and any other characters which your handwriting might make drop below the baseline). So I'd developed the site using lots of bright browsers and everything looked cool thanks to some judicious use of MeasureIt to make sure everything lined up correctly and then I looked at it using IETester and the underline was thick as anything (If in this instance "anything" is as thick as a line of text!) but, thanks to this post on The Webmaster World I clocked that IE6 was setting the height on an empty div as being the default height of a line of text. Explicitly telling IE6 that it wasn't so worked a treat and so a slung "line-height:1px;font-size:0px;" into the CSS and all was right in the world...

Still, a shame that I need to go routing around the internet looking for solutions for a browser that's nigh on 10 years old (released on the 27th August 2001) and is described as being the "least secure software on the planet". Perhaps I need to add a rider to sites in future that I'll not be supporting it anymore thanks to it's general crappyness... perhaps if I weren't working with an audience in mind that were constrained to use it I could get away with that... poor buggers.

And don't get me started about horizontal navigation uls... not even the judicious use of /IE7/ can solve that particular problem, I had to use CSS hacks (Which, as everyone knows, make the baby Jesus cry!).

Wednesday 16 June 2010

96%

Thought I'd done well when I got 90% for TMA1 for M255 but 96% for TMA2 is looking even better. Guess I'm getting the hang of this Java stuff after all. Still I keep saying "object orientated" rather than "object oriented", which is not the done thing apparently, comes from being so English I guess ;-)

Will find out today whether I get to carry on playing with OS API or I'll have to play with Google's Calendar API, not sure which I'll prefer. I guess the Calendar will be fun and will build upon the stuff I learnt whilst playing with the Contacts API. Though I'm wondering if it'll accept JSON rather than vanilla XML?

And then, in the meantime, I'm looking at Subversion and GIT and deciding which'll be the most fun to work with... looks like Subversion so far but research continues... suppose I should look at it for personal stuff as well as professional stuff as keeping 7zip archives of old projects gets old mighty quickly. Speaking of professional stuff the recent stuff about the BCS is interesting. I've been an associate member for ages as I wasn't working in the field but there's an entry in my Calendar to check about becoming a proper member 6 months after starting as a developer, don't know if it'll exist at that point though.

I've also been looking at the Office for National Statistics efforts to disseminate it's vast store of data in the form of Neighbourhood Statistics and it's Neighbourhood Summary, how cool is that site?

Monday 7 June 2010

Dunham's Wood

Went here on Sunday and I've got to say it was really, really cool. A little like stepping back to the 70's TBH but all the better for that. An old art teacher once told be I was a child of the 70's in terms of my approach to work so that must explain why I loved it as much as I did. From the miniature railway all the way to the maze I thought it was downright brilliant and I'd encourage anyone with kids and a hankering for a little nostalgia to give it a visit.

Chap we went there with said that the bloke who set it up just decided to plant a wood in a field and then decided to build a railway.

Each time it's open all the proceeds go to charity and this weekend they went to St. Mary's Church Restoration Fund and I'm pretty sure that it must have been members of the congregation that were staffing the stalls in the little glade near the entrance.

Tuesday 1 June 2010

template.html to template-dashboard.html in Pentaho

So I'm using Pentaho CDF and I was having problems setting up my own themes. Seems like I could create content using the local folder but when I tried to change the outer content I hit upon problems. I saw that the temples are split into 2, if you see what I mean, with the outer page wrapper living within the /system/pentaho-cdf folder but I couldn't see where they were. The .xcdf file points to template.html but there isn't a template.html file within the folder... then I noticed that there was a template-dashboard.html file and I started to get a glimmer of what was going on, especially as I looked at other .xcdf files and clocked that some had style elements.

Basically what I discovered was that template.html actually represents template-dashboard.html and if there is a style attribute within the .xcdf file then the value of that attribute corresponds to the naming if the template file such that a style attribute with a value of abc (for example) means that a file named template-dashboard-abc.html within the /system/pentaho-cdf folder is parsed.

Lot's of headaches led to this conclusion but I hope that other people don't run into similar problems... the solution sort of came to me while I was asleep - the cat was trying to wake me up and I was trying to stop asleep by thinking of something that was giving me problems, perhaps not the best approach to trying to get to sleep as the cat got his breakfast early and I went into work very early to try out my hypothesis.