Exposing a form

This is a great user interface technique to highlight important parts of the page while the user is doing something. Start using the following form and you can see the exposing effect.

standalone demo

Again, the exposing disappears when you click somewhere outside the form or press the ESC button. I personally haven't seen this kind of technique anywhere else before. So, I guess I'll get the credit for this and from now on this has to be called "exposing a form".

CSS code

This time we use a PNG image as the mask's background. It allows us to change the background color and everything still works. Here we use the color #678 and the background is positioned so that the form will be centered inside the white "halo".

#exposeMask {
	background:#678 url(/media/img/mask/mask_gradient_1000.png) no-repeat;
	background-position: 13% 160px;
}

CSS

HTML code

We use a normal form with labels and input fields. The tableless layout and visualization is done purely with CSS as you can see from the standalone page's source code.

<form class="expose">
	<label for="username">Username</label>
	<input id="username" /><br/>
 
	<label for="password">Password</label>
	<input id="password" type="password" /><br/>
 
</form>

HTML

JavaScript code

Here we expose our form when it is clicked. We use a customized background color for the "mask" and you can see two callback functions in action. Those functions change the background color of the form.

// execute your scripts when the DOM is ready. this is a good habit
$(function() {
 
	// expose the form when it's clicked or cursor is focused
	var form = $(".expose").bind("click keydown", function() {
 
		$(this).expose({
 
			// when exposing is done, change form's background color
			onLoad: function() {
				form.css({backgroundColor: '#c7f8ff'});
			},
 
			// when "unexposed", return to original background color
			onClose: function() {
				form.css({backgroundColor: null});
			}
 
		});
	});
});

JavaScript