Paul Bennett - User Interface Developer » Javascript

Introducing Plushash39

paul — Wed, 02 Jun 2010 13:49:14 +0000

As a user interface developer, I come across those annoying question marks in Firefox fairly frequently, where someone has copied-and-pasted some text from a rich-text editor into an HTML file which contained unencoded HTML character entities. I have a fairly good memory for these things, but inevitably I have to use Google to find some that escape my memory. So I developed a simple HTML application to copy the encoded HTML character entities to my clipboard, ready to be pasted directly into my HTML.

Google Maps and Polylines

paul — Sun, 09 May 2010 09:19:12 +0000

At first glance, I thought this was going to be quite a tricky task, but as it turns out, it is really quite easy. Once you have loaded the Google Maps javascript files, you just need to create a new GPolyline object, and give it the coordinates of the points on your line, along with the colour and the thinkness of the line. All you then need to do is add it as an overlay, and you are done!

	var polyline = new GPolyline([
		new GLatLng(50.86327703482849, -0.08008003234863281),
		new GLatLng(50.85807603889224, -0.07750511169433594),
		// ... more coordinates
	], "#FF0000", 3);
	$map.addOverlay(polyline);

To make things even easier, I found a neat little Google Maps polylines code generator to create the list of coordinates for me!

Rotating Globe with jQuery

paul — Tue, 20 Apr 2010 21:11:55 +0000

This is basically another take on moving backgrounds using jQuery, but I was inspired to create a rotating globe by Román Cortés Pure CSS Coke Can. Sure, this has nothing to do with displacement, and it uses JavaScript, but it was fun none-the-less!

Wrapping lines of text using jQuery

paul — Wed, 03 Mar 2010 17:53:16 +0000

I am not going to go through the code in this post as it is pretty trivial. Essentially, all you need to do is go through each word in block of plain text, wrap it in an inline element, (e.g. a span) then work out each of those element’s top offset from their containing element. By doing this, you can work out which line each word is on. Lastly, you can wrap each line in an element, which can then be styled. Simples!

However, I feel it is worth mentioning a weird IE7/8 bug that I encountered along the way. Basically, when I wrapped each word in span, the first word of each line had an incorrect top offset. In fact, the offset was equal to that of an element on the previous line. There didn’t seem to be any logical reason for this to be happening, other than a browser bug. A quick workaround later and the plugin works in all major browsers.

Animated Backgrounds with jQuery

paul — Tue, 12 Jan 2010 18:37:40 +0000

Of course, this has been done many times before, but not in such an ethereal manner. So I have put together a not-so-subtle demo to have a go at this myself. I am not going to post the code here as this is very simple to achieve and hardly ground-breaking! If you want to see how this effect is achieved, you can view the source code of the demo.