Using jQuery Plug-ins for better web forms (In-Field Labels)

December 15 2010

Using jQuery Plug-ins for better web forms (In-Field Labels)

In the process of creating a user friendly web form, the first thing that comes to the developer’s mind is to describe the kind of data that the user needs to input properly. Sometimes a simple label can do the trick, you put “Username” label in front of a text input field named username and all is done.

Problem occurs when, for an example, you want to tell to the user more info about the data that you want to be inserted in, so the label becomes longer. Eg. “Insert your first pet name”. The form labels have different length and the form looks messy.

One solution can be to top place the labels over the input fields but if we want to make it more stylish we can use the In-Field jQuery plug-in for that.

Click here » Using jQuery Plug-ins for better web forms (In-Field Labels) « to download the full demo.

Comment Form Using jQuery Plug-ins for better web forms (In-Field Labels)

To make the plug-in work you have to follow a special structure for the form layout. An example is:

HTML

<p>
<label for=”field_id”>Label Text</label><br />
<input type=”text” name=”field_id” value=”” id=”field_id” />
</p>

 

In addition to this some CSS is needed to position the label.

CSS

form p { position:relative }
label  { position:absolute; top:0; left:0}

The wrapper around the label and the field can be any element you want. The <p> element here is just used as an example.

Now to make everything work, a small javascript is added:

jQuery

$(document).ready(function(){
$(“label”).inFieldLabels();
});

and the effect is done.

Login Form Using jQuery Plug-ins for better web forms (In-Field Labels)

This plug-in has two options that can be set when we initialise it. The first one “fadeOpacity” determines how much the label will fade when the input field is focused (default: 0.5) and the second, “fadeDuration”, controls how fast the animation is going (default: 300).

At the end it’s important to mention that sometimes this plug-in can have some problems with auto-complete forms. To prevent this just add autocomplete=”off” to the input fields that you have labels on.

Click here » Using jQuery Plug-ins for better web forms (In-Field Labels) « to download the full demo. Here you can see the original post.

Creating Switch view option using jQuery and CSS

December 7 2010

Creating Switch view option using jQuery and CSS

The web user today wants the sites to be more interactive and that interaction to be done on faster and more user-friendly level. Now I’m going to show you a few-step tutorial that will help you to increase the interaction on your site.

Creating Switch view option using jQuery and CSS

 

You can download » Creating switch view option using jquery and css « full demo files packed in zip file!

Lets start!

1st Step: Creating the wrapper

Down below you can see the HTML and CSS for the whole wrapper and its consist of unordered list with list items and their css attributes will be manipulated via jQuery to get the different view.

HTML

<ul class = “display”>
<li></li>
<li></li>
<li></li>
</ul>

CSS

ul.display li a {
color: #e7ff61;
text-decoration: none;
}

ul.display li .content_block {
padding: 0 10px;
}

ul.display li .content_block h2 {
margin: 0;
padding: 5px;
font-weight: normal;
font-size: 1.7em;
}

ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 245px;  /*–The left padding keeps the
content from flowing under the image–*/

font-size: 1.2em;
}

ul.display li .content_block a img{ /*–Double border technique–*/
padding: 5px;
border: 2px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}

2nd Step: Make some Style for the Content

In every list item we put the content that consisting of div and image with link, heading and description within. For every element thats nested in the list item we associate and a style too.

HTML

<li>
<div class=“content_block”>
<a href=“#”><img src=“sample.gif” alt=“” /></a>
<h2><a href=“#”>Image Name</a></h2>
<p>Description goes here</p>
</div>
</li>

CSS

 
ul.display li a {
color: #e7ff61;
text-decoration: none;
}

ul.display li .content_block {
padding: 0 10px;
}

ul.display li .content_block h2 {
margin: 0;
padding: 5px;
font-weight: normal;
font-size: 1.7em;
}

ul.display li .content_block p {
margin: 0;
padding: 5px 5px 5px 245px;  =“color: #777;”>/*–The left padding keeps the
content from flowing under the image–*/
>
font-size: 1.2em;
}

ul.display li .content_block a img{ =“color: #777;”>/*–Double border technique–*/>
padding: 5px;
border: 2px solid #ccc;
background: #fff;
margin: 0 15px 0 0;
float: left;
}

3rd Step: Creating CSS for the second view

CSS

ul.thumb_view li{ width: 250px; } =“color: #777;”>/*–Switch the width
to accommodate for the three column layout–*/
>
ul.thumb_view li h2 { display: inline; }
ul.thumb_view li p{ display: none; }
ul.thumb_view li .content_block a img { margin: 0 0 10px; }
For the image link that will present the switch for the view we use a technique called CSS sprites.
switch button

HTML

<a href=“#” class=“switch_thumb”>Switch Display</a>

CSS

a.switch_thumb {
width: 122px;
height: 26px;
line-height: 26px;
padding: 0;
margin: 10px 0;
display: block;
background: url(switch.gif) no-repeat;
outline: none;
text-indent: -9999px;
}

a.swap { background-position: left bottom; }
 
a:hover.switch_thumb {
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=75)”;
}
And finaly the jQuery code that makes the magic touch of this example. Remember that you have to include the main library between the tags of the html document. You can download the latest version from here.

jQuery

 
<script type=“text/javascript”>
$(document).ready(function(){
    $(“a.switch_thumb”).toggle(function(){
$(this).addClass(“swap”);
$(“ul.display”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).addClass(“thumb_view”);
});
}, function () {
$(this).removeClass(“swap”);
$(“ul.display”).fadeOut(“fast”, function() {
$(this).fadeIn(“fast”).removeClass(“thumb_view”);
});
});
});
</script>

I hope that you’ll find a perfect situation to use this example.

You can download » Creating switch view option using jquery and css « full demo files packed in zip file!

UPDATE

Beacause of the comment of Cyber Carl, I’ve created some new (reverse) version of this example first to load the grid and then to switch to list view; you can download it » Creating switch view option using jquery and css(reverse) «

Search for: