jQuery Fallback for HTML5 Placeholder Attribute

I love HTML5 and all its wonderful, new little attributes that make the life of the developer easier and more enjoyable. For example, the placholder attribute, which you can use on text input fields in forms. Why is it great? Because it allows you to place a label inside the form that automatically disappears when the user starts typing text in it. Before HTML5, everyone was doing this, yes, but you had to include javascript to make it work. Not so with HTML5! Now the placeholder attribute has all that UX goodness for you, right in the browser, no js necessary.

jQuery: Set Focus on an Input Control

Recently, while working on a mobile version of a Website, I was asked to hide the search bar that's traditionally at the top of a web page, and replace it with a clickable button. When clicked, this button would in turn reveal the search bar. The idea behind this user interaction was to save valuable screen real estate by hiding the search bar, which is only occasionally used.

I used CSS (display:none) to hide the search bar initially, and to display the button that would reveal it.

Here's a little legend to explain what my elements are in the examples below:

Subscribe to RSS - jquery