I've had some people asking: Oh great author, how did you do the cool and very awesome effect on the logotype at the top of this page? Okay okay, I still only have two readers, both of them are friends and none of them cares, but here we go anyways.

In essence it's very simple, three images and about 60 lines of mootools powered code.

It starts with your basic logo, just as you'd expect on any page that has one of them, though it does help if it starts out as a transparent png. From this we cut out the parts we want to fade and animate. Any good old image-editing software can do this as long as it supports transparency. Note that the left and right margins on the corresponding cutout is left intact, this is to simplify positioning the overlays on top of the original image.

So to sum up, about now you are supposed to be sitting with something like this on your hard-drive:

Any questions? No? Good, just remember that the overlays need to have a transparent background or the fading in/out won't really work, even though you can still move them back and forth 'til your heart's content.

Go ahead and insert the logo in a div with your favourite text-editor and then we go over to the code.

I inject the overlays with javascript, mostly because I think it's annoying to have them on a page that doesn't support javascript to start with. Since we are using mootols. Go ahead and create the img divs and inject them into the div that you put the logo in. Remember that we saved the left and right margins in the images so that we can position them to the right and left by just using left:0 right:0. Over these I put an empty div to use for the mouse-enters event, I had some issues when it wasn't there but your mileage may wary.

To actually fade and animate the different elements we have created the mootools transition of your liking, personally I think that a second is a nice time but you are free to do whatever you feel like.

	
logo.set('morph',{duration:1000,transition:Fx.Transitions.Quad.easeOut});
logo_left.set('morph',{duration:1000,transition:Fx.Transitions.Quad.easeOut});
logo_right.set('morph',{duration:1000,transition:Fx.Transitions.Quad.easeOut});
logo_morph = logo.get('morph'); logo_left_morph = logo_left.get('morph'); logo_right_morph = logo_right.get('morph');

Now that we have the Morph objects available it's time to actually do something useful. Take the mouse-over element I mentioned previously and add mootools mouseenters and mouseleaves events to it.

	
mouse_over.addEvents({
	mouseenter : function() {
		logo_morph.cancel; 
		logo_left_morph.cancel(); 
		logo_right_morph.cancel();
		
		logo_morph.start({opacity:0}).chain(function(){
		logo.setStyle('visibility', 'hidden');
		});
		
		logo_left.setStyle('visibility','visible');
		logo_right.setStyle('visibility','visible');
		
		if(logo.getStyle('visibility') != 'hidden'){
			logo_left_morph.start({opacity:1}).chain(function(){
				logo_left_morph.start({left:65});
			});
			logo_right_morph.start({opacity:1}).chain(function()
				{logo_right_morph.start({right:66});
			});
		}
		else{
			logo_left_morph.start({left:65});
			logo_right_morph.start({right:66});
		}
	},
});

A little more code to sink your teeth in. In essence it's actually really simple using Chains The Morph object will simple step through the chain on function after finishing the call to Morph.start(); So to break it down. On mouse over we start by canceling any ongoing Morph action and then starting with fading the logo out and the overlays out. Note that set visibility to hidden respectively visible on the elements faded, just to make sure that even if a browser doesn't play well with opacity it won't look horrible.

	
logo_morph.start({opacity:0}).chain(function(){
	logo.setStyle('visibility', 'hidden');
});
logo_left.setStyle('visibility','visible');
logo_right.setStyle('visibility','visible');

That said and done we check if the logo image is visible or not, this is to prevent getting a delay of the animation while the hidden logo is faded out from 0 to 0 again since that's what we would have asked for.

	
if(logo.getStyle('visibility') != 'hidden'){
	logo_left_morph.start({ opacity:1} ).chain(function(){
		logo_left_morph.start({left:65});});
	logo_right_morph.start({opacity:1}).chain(function(){
		logo_right_morph.start({right:66});
	});
}

So chain opacity->movement on the images and presto the effect is more or less complete. The other way around should be quite self-explanatory (if you managed to follow so far. If you didn't, don't fret – I'm horrible at explaining what the hell I'm doing), mouseleaves is just the same thing, but backwards.

That about it for today. If you want to play around with the code, it's not pretty nor is it properly objectified then take a gander over here Feel free to do whatever you want with it as long as you don't blame if it doesn't work or if it breaks anything

It all started out when I wanted to play a little bit with mootools Move.Drag. The original plan was to make a javascript version of magnetic poetry – why not? – it sort of got a little out of hand and turned into chess, and consequently the drag/drop implementation for good old tested left-click.

But what does this has to do with anything. Well to start there's the very simple (quickly hacked) two player javascript version of the game, really quite uninteresting, but as my little project continues onward getting it to look a little better and implementing an actual server in php. So far it looks something like this. It's quite basic at the moment, no feedback whatsoever, text-graphics, doesn't care about check-mate (and probably never will because it is a little more computationally expensive than the rest), and only covers basic legal moves (ie. Castling and En Passante is out of the picture). Check it out if you want to but the code is a mess of UI handling and logic in one small bowl of spaghetti-o, more to come later.

So what? you should probably ask by now. Except for sharing that fugly hack of a chess-implementation, what is the point I'm trying to make? Well it's this: Javascript is a convenient way to validate input data on the client side. Big whoop, you could say, but it does add to the responsiveness of the application and it does save a smidgen of band-width, not to mention processing power since most of the request (assuming that end-users actually use your client) will be more or less valid. By not having to check all input against the server latency becomes much less of an issue (javascript performance could however show it's ugly face in extreme or badly coded cases).

Practical one could say, just getting validated data to mash into your application. But not so fast, javascript being easily changed from the console (or from skimming to the source to get the format of those pesky GETs/POSTs) and that way skip the verifying scripts all together you still run the risk of getting malicious data. Cheating being an issue for chess – (you are using prepared SQL statements to help combat SQL-injection right?), not to mention data that will simply break your carefully crafted app.

So boys and girls, no matter how much client-sided work you do, always always always treat data as poison and verify it on server side as well. Always.

This is not the first time I've felt the need to visualize some sort of data with the help of basic line-graphs. Last time I didn't even try doing it in javascript but went directly at pythons matplotlib which in all fairness is really nice. Another alternative has been Googles Charts, but that's relying on a third part, and even if we are talking a company as reliable as Google it still leaves me with a slightly sour taste. So enter Flot, a jQuery (yes, I know.) based plotting library that is very simple to use and produces pretty decent results.

var plot = $.plot($("#placeholder"), [d1,d2,d3]);

Where d1,d2,d3 being arrays on the form [[x,y],[x,y], ...]. For your basic plot that's about all you need to do, not much hassle at all. But what if you want to do something more advanced? Such as add legen labels, decide on showing lines, fill, points. And what about axis-enumerations? Well, it's still pretty simple, here's an example from the DoF calculator below.

var plot = $.plot($("#placeholder"), [
        { data: d1},
        { label: "In focus", data: d2, color:'green', lines : {show:true, fill:true,lineWidth: 0}},
        { label: "Focus Limit",  data: d3, color:'red', lines : {show:true}},
	],	
	{
		xaxis: {
			ticks: 10,
			min: plotStart/1000,
			max: plotEnd/1000,
		},
		yaxis: {
			ticks: 6,
			min: 0,
			max: plotMaxCoc,
		}
	}
);

So what are we doing? Yes, xaxis and yaxis specifies the respective axis enumeration, you can specify transform functions for the enumeration if you need it in some special format (it's all in the API if you don't mind digging some). Label defines the legend, and well. I guess it really explains itself. Check out the examples the Flot page, they are a great foundation (the API is however a bit messier).

Here's what I felt the need to use it for, Depth of Field calculator. A depth of Focus Calculator. Yes, photo being one of my hobbies and for shooting street on film keeping a reasonable track of your zone-focus is a good idea. Though don't look to closely at the code, it's quite a mess. And no, it won't work in Internet Explorer because I was to lazy to add the canvas-fix (Flot comes with one of those so no problem if you need compatibility).