[Re]Encoded.com

Five Ways To Improve Your Site Using jQuery

jQuery is an excellent JavaScript library with which you can create wonderful effects on your website and that too with a few lines of code. It simplifies HTML document traversing, processes of event handling, animating, and most of the Ajax interactions for rapid web development. There are many features in jQuery which can be used to improve your website.

This article will brief you on five ways by which you may improve your site using jQuery.

1) Building better web forms by highlighting the context using jQuery:

Through jQuery, you can easily improve your web application forms by highlighting the current context. Due to the complexity of the forms and having too many controls on them, this feature allows the user to focus on a current context. You may highlight the current row as shown in the snapshot below:

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


You may even highlight a group of related fields in more complex forms by just changing a few simple rules in jQuery code:

$(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 only parents() target has been changed. You can highlight a group of rows instead of changing only the parent row.

Your web form would look like this with a group of fields highlighted

This allows the users to focus only on a current action when they come across very complex web forms.

2) Improving your image gallery using jQuery:

If you have an image gallery on your site then jQuery can help you in making it more interactive for the users. Using the simplicity of jQuery, you may have descriptions attached to the images in your image gallery.

For example, a user browsing a CSS gallery wants to check out some new and beautiful web designs and is further also interested in details like the category to which the design belong to, the ratings or whatsoever. You may add this information below thumbnail but there are still more attractive ways of displaying the additional information.

Our main task is to display the information of the additional image when user lingers on the image. This information will be shown in a transparent div over the thumbnail. So first we need to show the images and the easiest way is to use unordered list. Here, we have taken an image from a gallery as an example, zemun.jpg.


<ul>
<li>
<a href="zemun.jpg">
<img src="zemun_tn.jpg" alt="Sample image" />
</a>
</li>
/* other images here */
</ul>

The CSS code for this would be:


ul
{
margin:0px;
padding:0px;
}
li
{
list-style-type:none;
float:left;
margin:15px;
position:relative;
padding:0px;
}
li img
{
border:0px;
}
li a
{
display:block;
}


So, this creates a simple gallery which would have floating thumbnail images. Further, we would add some description to each image:


<ul>
<li>
<a href="zemun.jpg">
<img src="zemun_tn.jpg" alt="Sample image" />
<div class="textPlaceholder">
<div>Zemun<br />Rating 4.7/5</div>
</div>
</a>
</li>
/* other images here */
</ul>


Now using jQuery, you may show or hide a description every time when someone lingers on a thumbnail.


$(document).ready(function(){
$("a").mouseover(function(){
$(this).find(".textPlaceholder").show();
}).mouseout(function(){
$(this).find(".textPlaceholder").hide();
});
});


3) Adding Zoom Icons to images using jQuery:

You may make your site attractive by adding zoom icons to your images which is shown whenever you hover on an image.
Here, we can add animation effects which would make the HTML code simpler:


<div id="gallery2">
<h2>jQuery solution</h2>
<a href="3029990904_d10cc4fd9d_o.jpg">
<img src="3029990904_6fc619349d_m.jpg" alt="" />
</a>
<a href="3036302292_d37001ed77_o.jpg">
<img src="3036302292_61f44a917c_m.jpg" alt="" />
</a>
</div>


You may add the empty elements dynamically inside the links:

$("#gallery2 a").append("");

The complete jQuery code will look like this with the fade in and fade out effects:


$(document).ready(function(){
$("#gallery2 a").append("");
$("#gallery2 a").hover(function(){
$(this).children("span").fadeIn(600);
},function(){
$(this).children("span").fadeOut(200);
});
});


4) Image Cross Fade Transition using jQuery:

Using jQuery, you can create cross fade image or rollover transition using two images or single image as shown below:

The important thing to remember is that the end image used for transition must be set absolutely on the same position as the starting image. The images which fade between should be the same size, in height and width.

For two images, the code would be:
// while DOM is all set to work:

$(document).ready(function () {
// to locate the elements of div.fade in order to call the hover event
$('div.fade').hover(function() {
// while the mouse pointer hovers, to locate the element which we desire to fade *up*
var fade = $('> div', this);

// if the element is currently being animated (to a fadeOut)…
if (fade.is(':animated')) {
// ...take the current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fades in quickly
fade.fadeIn(250);
}
}, function () {
// on hovering out, fades the element out
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fades away slowly
fade.fadeOut(3000);
}
});
});


5) Submitting a form without Page Refresh using jQuery:

Using jQuery you may allow your users to submit the form without refreshing the page. This can be done using the powerful ajax function of jQuery. We begin with a basic HTML form with name, email id and phone number and produce the following form using CSS styles and an image in the background in Photoshop:

Next is to add jQuery and reference it in your HTML:

$(function() {
$(".button").click (function() {
// here the form is validated and processed
});
});

When the form is ready for filling, some validations are added. We need to hide the labels while the page reloads and also when the user clicks to submit the form. An error message would appear only when the validation added does not work.

A variable ‘name’ is set to the field with ‘name’ as the id:

var name = $("input#name").val();

To see if that field is left blank, we use the show() method of jQuery to view the id with label “name_error”:

if (name == "") {
$("label#name_error").show();
}

Here, a string of values is created using jQuery which has all the form values.

var name = $("input# name"). val ();
var email = $("input# email"). val ();
var phone = $("input# phone"). val ();
var dataString = name=+ name + &email= + email + &phone= + phone;


The ajax function of jQuery is used for processing the values present in the dataString. At the end of the process getting over successfully, a message is displayed to the user. Next, we add the function return false and avoid getting our page refreshed.


$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("
");
$('#message').html("
<h2>Contact Form Submitted!</h2>
")
.append("
We will be in touch soon.
")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id="checkmark" src="images/check.png" alt="" />");
});
}
});


return false;

After submitting the form, the end user gets the following message:

So, this method helps if you have login forms or any sort of advanced forms which processes values from a database giving back results. Moreover, you would provide interactivity to your users as they will not have to wait for the page to be reloaded.