Football, Football, Football!!!!

Posted: June 11th, 2010 | Author: Foamcow | Filed under: General | Tags: comedy, football, football football football football football, soccer, world cup | 1 Comment »

I think Mitchell and Webb got it about right.

How To Create a Facebook Style Password Field with jQuery

Posted: May 20th, 2010 | Author: Foamcow | Filed under: General, How to, design | Tags: code, forms, jquery, tip, tutorial | No Comments »

Note: This is a pretty old demo I made for someone on a forum somewhere. Since there is never one way to skin a cat I may well do it slightly differently if I did it today.

OK. Facebook, and probably many other sites, employ a method by which they put a form field’s label inside the field itself. This is no biggie, and quite easy to accomplish but what about password fields. By default, in every browser I can think of, the password field type is masked – that is to say the characters you enter are hidden by asterisks or bullet points. This presents a problem since if you shift your label into the field it will be masked.

The solution, therefore, is to change the fieldtype to a plain text field before putting the label into it, then switching to a password field when the user enters something.

Why can’t you just make it a plain text field to start with?

For users that are browsing with agents that don’t use Javascript or those that have just blocked it, the password field must still be a password field – so it has to start out that way and be changed by Javascript.

Where my method beats Facebook’s is that if you empty the password field and leave it, the label is restored. Facebook’s effort leaves it blank.

The Code

Let’s start with a simple login form.

<form action="#" method="get" accept-charset="utf-8">
	<p><label>Password</label><input type="password" name="password" id="password" /<p>

	<p><<input type="submit" value="Continue"></p><
</form>

There, told you it was simple.

Now a little sprinking of jQuery. (of course you’ve already included the jQuery library)

$(function(){

	// first we remove label tags from dom
	$('#password').siblings('label').remove();

	// then we add a faux-label inside the field (there's a neater way to do this)
	$('#password').replaceWith('<input type="text" name="password" id="password" value="Password" />');

    // capture the initial click and bind a custom function to it
    $('#password').bind('click',fieldcheck);

	function fieldcheck(el){
		if($(this).attr('type')=='text'){
			$(this).val('');
			$(this).replaceWith('<input type="password" name="password" id="password" />')
			$('#password').focus();
			$('#password').bind('blur',fieldcheck);

		}

		if($(this).attr('type')=='password'){
			if($(this).val()==''){
				$('#password').replaceWith('<input type="text" name="password" id="password" value="Password" />');
				$('#password').bind('click',fieldcheck);
			}
		}
	}

});

And there you have it. A neat, degradeable and, I hope, accessible method to tidy up a password field.

There are a few ways you could improve or expand this, the obvious being to create the text field and faux-label dynamically rather than hardcoding it as I have done for this example.

Lovely lock design

Posted: May 6th, 2010 | Author: Foamcow | Filed under: General | Tags: clever, design, lock, simple. | No Comments »

You can sometimes tell great design because it is blindingly obvious, simple yet clever and will make you say “ah yes, of course!”

I should add, this is nothing to do with me. I saw a link to it pop up on Twitter but there is no other information such as who designed it.

Alien v Predator infographic – Pay attention.

Posted: May 5th, 2010 | Author: Foamcow | Filed under: General | Tags: aliens, infographic, predator | No Comments »

Useful information on what to do if you are caught in the middle of a war between Aliens and Predator(s).
You need to know this.

http://staubman.com/blog/wp-content/uploads/2010/02/avp-large.jpg

Dalek “To Victory” Wallpaper

Posted: April 26th, 2010 | Author: Foamcow | Filed under: General | Tags: dalek, doctorwho, drwho, poster, propaganda, tovictory, wallpaper, war, ww2 worldwar2 | No Comments »

I loved this poster when I saw it in a recent episode of Doctor Who and was delighted to find that the BBC had made public a PDF of the poster to print out and adorn your bomb shelter.

Since I don’t have a wall near my computer, I thought I’d make this quick wallpaper to remind me how The Daleks will save us during our time of strife.

Click the image to load the full size version then right click yadda yadda…