In my previous article “Labels in form layouts” I wrote about how I have implemented “underlined labels” on web application forms. However, due to complexity of web appications I developed I often needed to find a way to focus a user on a current context. When I discovered jQuery I decided to use it because of its powerful features.

Since the forms were often very complex and had (too much I would say) controls on them, I needed to focus a user’s attention on the current context. I first thought to highlight the current row.

In this example I’ll show you what I tried to do.

The image above shows that whatever user do, current row will be highlighted. The html markup for the example above will look like this:

    <h3>Sample web form</h3>
<div class="content">
<div class="row">
<div class="left">First name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Last name</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Email</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">Password</div>
<div class="right"><input name="Text1" type="text" class="text" /></div>
<div class="clear"></div>
</div>
</div>
<hr />
< !- Other rows here -->

<input name="Button1" type="button" value="Do some action" />

And CSS classes are pretty simple as well:

body{
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
}
.content{
padding:10px;
width:370px
}
.left{
width:150px;
float:left;
padding:7px 0px 0px 7px;
min-height:24px;
}
.right{
width:200px;
float:left;
padding:5px;
min-height:24px;
}
.clear{
float:none;
clear:both;
height:0px;
}
.row{
background-color:none;
display:block;
min-height:32px;
}
.text{
width:190px;
}
.ruler{
width:400px; border-bottom:dashed 1px #dcdcdc;
}
tr:focus{
background-color:#fcfcf0;
}
td{
vertical-align:top;
}
.over{
background-color:#f0f0f0;
}
.out{
background-color:none;
}

Each “row” consists of two div’s, one for a label and other for an input field(s). So what we tried to achieve it to highlight a current row whenever user click on any element inside that row. It could be an input field or a label.

Now let’s see the simplicity of jQuery:

$(document).ready(function()
{
$('.left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.row').addClass("over");
}).blur(function(){
$(this).parents('.row').removeClass("over");
});
});

Whenever an input, textarea, select, or element that has “left” CSS class get focus, append “over” CSS class to all parents that have “row” CSS class. Also, whenever an input, textarea, select, or element that has “left” CSS class lose focus, remove “over” CSS class from all parents that have “row” CSS class.

This was very interesting and extremely simple solution, but in a forms more complex that the one in the example above it just didn’t make much improvement. What I wanted actually was to highlight a group of related fields. Thanks to jQuery it was very easy to change the rules:

$(document).ready(function()
{
$('.left, .content input, .content textarea, .content select').focus(function(){
$(this).parents('.content').addClass("over");
}).blur(function(){
$(this).parents('.content').removeClass("over");
});
});

Note that the only change is parents() target. Instead of changing only parent row, we can highlight a whole group of rows. Each div that has “content” CSS class will be highlighted whenever any of his children get focus and vice versa.

Demo: http://www.jankoatwarpspeed.com/examples/ContextHighlighting/
Download: http://www.jankoatwarpspeed.com/post/2008/06/09/Building-a-better-web-forms-Context-highlighting-using-jQuery.aspx
Source:

Related Listings:

1. 10+ JQuery tutorials for working with HTML forms Submit A Form Without Page Refresh using jQuery Submitting a...
2. Impromptu – prompt jQuery plugin for Forms jQuery Impromptu is an extention to help provide a more...
3. Style Web Forms Using CSS Whether your main business is Web design or backend development,...
4. Ajax Count Words in Forms Script Sometimes you need to limit the number of input...
5. Web Forms 2.0 Script A cross-browser implementation of the WHATWG Web Forms 2.0 specification....

Do you like this post?

Email: