Title-Based Textbox Hints

Jason Beaird — Thu, 04 Jun 2009 17:35:12 +0000

Time to rethink my old method of displaying textbox hints with background images. That method still works fine for compact login forms, but what if we have several textboxes on a page with different hints that may need changing. I don’t want to have to create/maintain images for each textbox hint, so I’d rather use text. Where should I get that text from though? I could use the label text, but sometimes that needs to be different from the hint. Take this search field for instance:

The label here would be “Search:”, but in the hint I want to give the user some examples of data they can search for. A great place to put this hint information is the title attribute of the textbox. For users without JavaScript, hovering an input with a title will show them a tooltip of the hint. Using jQuery though, we can enhance the experience quite a bit:

$('input.txbhint').focus(function() {
	if ($(this).val() == "" || $(this).val() == $(this).attr('title')){
		$(this).val("").removeClass("hinted");
	}
}).blur(function() {
	if ($(this).val() == "") {
		$(this).val($(this).attr('title')).addClass("hinted");
	}
}).filter(function() {
	if ($(this).val() == "" || $(this).val() == $(this).attr('title')){
		$(this).val($(this).attr('title')).addClass("hinted");
	}
});

The jQuery code above simply sets the input’s title text as it’s value and colors it gray (via the “hinted” class) until the user focuses on it. When they do, the value gets removed and the text color gets set to black. If the user leaves the textbox and the value is still blank, we cleverly reset the text with the title text again and change the color back to gray.

View the Demo

Anchor Link Toggle

Jason Beaird — Wed, 14 Jan 2009 17:50:24 +0000

I enjoy enhancing webpages with Javascript as much as anyone, but there is a lot to be said for making things function just as well with plain ole’ HTML. Recently, I was marking up a design that included a box on the homepage that toggled between 2 states. I could have made the non-javascript fallback simply link to a modified version of the homepage that showed one or the other, but that would require an unnecessary page refresh. Instead, I put both sets of information in a div with overflow set to hidden. I then used anchor links to slide the contents of the div up and down to show the selected information. Confused? Check out the anchor link toggle demo.

I’m certain this isn’t an original idea, but I haven’t ever seen anyone blog about it…probably because I don’t even really know what this technique should be called. Accessible toggle boxes, sliding anchor content, fairy-dustless slight of hand? Help me out here.

Jasongraphix » HTML

Title-Based Textbox Hints

Anchor Link Toggle