CSSKarma

display your <style>

designing the web since 2002

Archive for June, 2009

|

Quick Tip #2 – Bringing Back Search with jQuery

Monday, June 29th, 2009

article banner

This is something I use on all my projects now. It’s designed for a search box, but can be used with any sort of input field.

The great thing about this is that the field value “Search” will only come back onBlur if the field is empty (or doesn’t say “Search”). So if you started typing something it won’t erase your text, which is something that has always irritated me about search boxes.

Anyway, I’ve been sitting on this post for a while, but I really wanted to get it out. So here it is:

XHTML
<div id="search">
<form method="post" action="">
   <label for="field">search</label>
   <input type="text" id="field"/>
   <button type="submit">go</button>
</form>
</div><!--/search-->
jQuery
$("#search input").focus( function() {
if ($(this).val()=="Search") {$(this).val("");}
});

$("#search input").blur( function() {
if ($(this).val()=="") {$(this).val("Search");}
});

The word “Search” in the jQuery is case sensitive, so watch out for that.

Tags: ,
Posted in Web Development | 6 Comments »

10 Tips to Create a More Usable Web

Thursday, June 4th, 2009

article banner

My First usability article came out today on Web Designer Depot

10 Tips to Create a More Usable Web

Don’t get me wrong, I like writing about CSS, but this was a nice change of pace. Anyway, Let me know what you think!

Tags: ,
Posted in Web Design | 2 Comments »

|

New from the blog

Are My Sites Up? authenticjobs.com