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

Do you miss Flash as much as I don’t?

Posted: April 30th, 2010 | Author: Foamcow | Filed under: Drunken Ranting, Social Comment, Web Design | Tags: adobe, apple, flash, ipad, iphone, pressrelease | 1 Comment »

This week has seen the argument between Apple and Adobe regarding the absence of Flash from the former’s mobile devices take another step towards a public cage fight between Apple’s Steve Jobs and Adobe’s CEO, Shantanu Narayen. In a press release from Cupertino, Jobs outlines the rationale behind Apple’s decision to keep Adobe’s flagship product away from iPhones and iPads – thus cruelly preventing their owners from enjoying the oodles of top quality Flash content that apparently, in the words of Adobe themselves, “makes up most of the web”.

Well, to be perfectly honest, who actually gives a monkey’s?

No, really. Do you own an iPhone or iPad? Do you actually miss being able to access Flash content?

I own an iPhone and I really couldn’t care less. There is nothing that Flash has delivered to me in the last *cough* years that I can’t live without. In fact, I, like many other web professionals would prefer not to live in a web where Flash is the ubiquitous means for delivering animated “rich” content. I don’t go as far as blocking it with a browser add-on, but I certainly filter it subconciously from my browsing experience.

Actually, I tell a lie. I have recently discovered a must have piece of Flash content – Farmville. Then again the last time I logged in, about 3 weeks ago now I think, I simply dug my farm plots to spell the word “crap” then logged out again. Yeah, I couldn’t have done that without Flash.

In the face of fairness, after all some people do seem to care, perhaps Apple should give customers a choice to install Flash or not. That would be fair wouldn’t it? Personally, I would say “yes, customers should have a choice to suffer at the hands of Flash or not”.

But consider the underlying reason for keeping Flash from marching in the iParade – that of protecting the user experience – it makes sense just to exclude it all together. Why? Because Apple make products for “normal” people, not geeks. These “normals” quite possibly have no idea what Flash is, let alone a plugin. They just want to press a button and go. If Flash was included on iProducts it would need to be “on” by default and so subject the victim user to the performance issues, shortened battery life and instability that have all been well documented by other sources.

Flash just doesn’t fit with Apple’s paradigm of “It just works”.

So where do Adobe go from here? For one, they could fix Flash. Why they don’t do this is really puzzling me. Though in reality I think the iBoat left the iHarbour a long time ago and they are not iInvited on the iTrip. Even if Flash was perfect, I think Apple would resist including it – then again, if it was a better product then perhaps Apple’s and Job’s interests would not be in competeing technologies.

I won’t go into “openness” here. Enough people are arguing about that. At the end of the day Flash is proprietary, inefficient and, on the whole, unnecessary. It is irrelevant. We don’t need it anymore.