Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Animate the Web Page Content with jQuery

We will learn how jQuery can really enhance the website in terms of appearance as well as bringing in the animation effects when a user wants to navigate from one link to another.

Introduction

With the help of this tutorial, we will be focussing on enhancing the website with the assistance of jQuery by adding ajax functionality.

Adding the ajax functionality into the website would help in loading of the content in a specific container and the user will not have to navigate to any other page. We will also try to integrate some animation effects as well.

The below represents the HTML code we will be using:

Listing 1: HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
	<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
	<title>mmm... Ajax!</title>  
	<script type="text/javascript" src="jquery.js"></script>  
	<style type="text/css">  
	@import url(css.css);  
	</style>  
	<script type="text/javascript" src="js.js"></script>  
	</head>  
	<body>  
	    <div id="wrapper">  
	    <h1>ajax mrbool</h1>  
	    <ul id="nav">  
	        <li><a href="index.html">welcome</a></li>  
	        <li><a href="about.html">about</a></li>  
	        <li><a href="portfolio.html">portfolio</a></li>  
	        <li><a href="contact.html">contact</a></li>  
	        <li><a href="terms.html">terms</a></li>  
	    </ul>  
	    <div id="content">  
	        <h2>Welcome!</h2>  
	        <p>Text</p>  
	    </div>  
	    <div id="foot">Tutorial by Vinay for MRBOOL</div>  
	</div>  
	</body>  
	</html>  

Step 1

The very first step that needs to be done is to download the latest and most stable release of jQuery and then link the same in your document.

Listing 2: Linking jQuery archive

<script type="text/javascript" src="jQuery.js"></script>  

jQuery is known for its simplicity and the functionality that has been described above can easility be achieved in combination with some awesome effects with not many lines of code. Time is now to load the jQuery library and start a function when the DOM is loaded.

Listing 3: Starting a function when the DOM is loaded

$(document).ready(function() {  
	    // Stuff here  
	});  

Step 2

Here we want to make certain that the time user accesses the link within the navigation menu on our page, at this moment of time, the browser does not navigate to the corresponding page, however it the content of that page is loaded within the current page.

The intention is to target the links within the navigation menu and implement a function after accessing the same:

Listing 4: Implementing the function after accessing

$('#nav li a').click(function(){  
	    // function here  
	});  
	 

The below two pints conclude the objective of this function to do in event order:

  • Removal of current page content.
  • Retrieve new page content and append to content DIV.

There is a need to define the page from where the data would be coming post accessing the link. All that needs to be done includes the retrieval of ‘href’ attribute of the clicked link and then define that as the page to call the data from. Also there will be a need to define whereabouts on the requested page to pull the data from. This means that we don’t want to pull all the data other than the data within the ‘content’ div.

Listing 5: Defining whereabouts on the requested page

var toLoad = $(this).attr('href')+' #content';  

Assume the user accesses the ‘about’ link which redirects him to ‘about.html’ which in this situation, we will have a variable: ‘about.html #content’. This variable will be requested in the ajax call. But before that, we would require to come up with a nice effect for the current page content and instead of making it just disappear, we will be making use of jQuery’s ‘hide’ function as illustrated below:

Listing 6: Requiring to come up with a nice effect for the current page

$('#content').hide('fast',loadContent);  

The intention of the above function is to ‘hide’ the #content div at a fast rate. And then once the effect is finished, then the “loadContent” function is initiated.

Step 3

Post the disappearance of the old content with an awesome effect, we don’t want the user to wait for the arrival of the new content thereby calling us to create a little “loading” graphic that would make the user aware that something is happening in the background.

Listing 7: Disappearance of the old content

$('#wrapper').append('<span id="load">LOADING...</span>');  
	$('#load').fadeIn('normal');  

Listing 8: CSS applied

The below represents the CSS applied to the newly created #load div:

#load {  
	    display: none;  
	    position: absolute;  
	    rightright: 10px;  
	    top: 10px;  
	    background: url(images/ajax-loader.gif);  
	    width: 43px;  
	    height: 11px;  
	    text-indent: -9999em;  
	}  

Hence we have ‘load’ span set to display:none by default. However when we have fadeIn function being initiated, it will fade in to the top right hand corner of the site and display the animated GIF before it is again faded out.

Step 4

We have learned so far that when a user accesses on any of the links, the below will take place:

  • The ongoing or current content disappears with an awesome effect
  • A loading message appears

It’s time now to write that loadContent function that was being called earlier:

Listing 9: loadContent function

function loadContent() {  
	    $('#content').load(toLoad,'',showNewContent)  
	}  

The objective of the loadContent function is to call the requested page and when this is done, it calls the ‘showNewContent’ function:

Listing 10: showNewContent function

function showNewContent() {  
	    $('#content').show('normal',hideLoader);  
	}  

This showNewContent function makes use of the jQuery’s show function so as to make the new (requested) content appear within the ‘#content’ div. Post the completion of the same, it then initiates the ‘hideLoader’ function:

Listing 11: hideLoader’ function

function hideLoader() {  
	    $('#load').fadeOut('normal');  
	}  

Make sure to “return false” at the end of our click function so as not to make the browser navigate to the page.

Here is the code so far:

Listing 12: Including return false at the end of our click function

$(document).ready(function() {  
	    $('#nav li a').click(function(){  
	    var toLoad = $(this).attr('href')+' #content';  
	    $('#content').hide('fast',loadContent);  
	    $('#load').remove();  
	    $('#wrapper').append('<span id="load">LOADING...</span>');  
	    $('#load').fadeIn('normal');  
	    function loadContent() {  
	        $('#content').load(toLoad,'',showNewContent())  
	    }  
	    function showNewContent() {  
	        $('#content').show('normal',hideLoader());  
	    }  
	    function hideLoader() {  
	        $('#load').fadeOut('normal');  
	    }  
	    return false;  
	    });  
	}); 
Result of code above

Figure 1: Result of code above

I hope you liked the article, see you next time.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login