On this tutorial we can be taking your common on a regular basis web site and enhancing it with jQuery. We can be including ajax performance so that the content material hundreds into the related container as a substitute of the person having to navigate to a different web page. We can even be integrating some superior animation results.
So to start with, I’ve put collectively a quite simple structure for this instance. Here is a screenshot and the HTML code we’ll use.
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
3 |
<head>
|
4 |
<meta http-equiv="Content material-Sort" content material="textual content/html; charset=utf-8" /> |
5 |
<title>mmm... Ajax!</title> |
6 |
<script kind="textual content/javascript" src="jquery.js"></script> |
7 |
<type kind="textual content/css"> |
8 |
@import url(css.css); |
9 |
</type>
|
10 |
<script kind="textual content/javascript" src="js.js"></script> |
11 |
</head>
|
12 |
<physique>
|
13 |
<div id="wrapper"> |
14 |
<h1>ajax ... nettuts</h1> |
15 |
<ul id="nav"> |
16 |
<li><a href="index.html">welcome</a></li> |
17 |
<li><a href="about.html">about</a></li> |
18 |
<li><a href="portfolio.html">portfolio</a></li> |
19 |
<li><a href="contact.html">contact</a></li> |
20 |
<li><a href="phrases.html">phrases</a></li> |
21 |
</ul>
|
22 |
<div id="content material"> |
23 |
<h2>Welcome!</h2> |
24 |
<p>Textual content</p> |
25 |
</div>
|
26 |
<div id="foot">Tutorial by James for NETTUTS</div> |
27 |
</div>
|
28 |
</physique>
|
29 |
</html>
|
Step 1
Very first thing’s first, go and obtain the newest steady launch of jQuery and hyperlink to it in your doc:
1 |
<script kind="textual content/javascript" src="jQuery.js"></script> |
Among the finest issues, in my view, about jQuery is it’s simplicity. We are able to obtain the performance described above coupled with gorgeous results in just a few traces of code.
First let’s load the jQuery library and provoke a perform when the doc is prepared (when the DOM is loaded).
1 |
$(doc).prepared(perform() {
|
2 |
// Stuff right here |
3 |
}); |
Step 2
So what we need to do is make it in order that when a person clicks on a hyperlink inside the navigation menu on our web page the browser doesn’t navigate to the corresponding web page, however as a substitute hundreds the content material of that web page inside the present web page.
We need to goal the hyperlinks inside the navigation menu and run a perform when they’re clicked:
1 |
$('#nav li a').click on(perform(){
|
2 |
// perform right here |
3 |
}); |
Let’s summarize what we wish this perform to do in occasion order:
- Take away present web page content material.
- Get new web page content material and append to content material DIV.
We have to outline what web page to get the information from when a hyperlink is clicked on. All we have now to do right here is receive the ‘href’ attribute of the clicked hyperlink and outline that because the web page to name the information from, plus we have to outline whereabouts on the requested web page to tug the information from – i.e. We do not need to pull ALL the information, simply the information inside the ‘content material’ div, so:
1 |
var toLoad = $(this).attr('href')+' #content material';
|
As an instance what the above code does lets say the person clicks on the ‘about’ hyperlink which hyperlinks to ‘about.html’ – on this scenario this variable can be: ‘about.html #content material’ – that is the variable which we’ll request within the ajax name. First although, we have to create a pleasant impact for the present web page content material. As an alternative of creating it simply disappear we’ll use jQuery’s ‘disguise’ perform like this:
1 |
$('#content material').disguise('quick',loadContent);
|
The above perform ‘hides’ the #content material div at a quick fee, and as soon as that impact completed it then initiates the “loadContent” perform (load the brand new content material [via ajax]) – a perform which we are going to outline later (in step 4).
Step 3
As soon as the outdated content material disappears with an superior impact, we do not need to simply go away the person questioning earlier than the brand new content material arrives (particularly if they’ve a sluggish web connection) so we’ll create somewhat “loading” graphic in order that they know one thing is occurring within the background:
1 |
$('#wrapper').append('<span id="load">LOADING...</span>');
|
2 |
$('#load').fadeIn('regular');
|
Right here is the CSS utilized to the newly created #load div:
1 |
#load { |
2 |
show: none; |
3 |
place: absolute; |
4 |
proper: 10px; |
5 |
high: 10px; |
6 |
background: url(photographs/ajax-loader.gif); |
7 |
width: 43px; |
8 |
peak: 11px; |
9 |
text-indent: -9999em; |
10 |
}
|
So, by default this ‘load’ span is about to show:none, however when the fadeIn perform is initiated (within the code above) it’s going to fade in to the highest proper hand nook of the positioning and present our animated GIF till it’s pale out once more.
Step 4
To date, when a person clicks on one of many hyperlinks the next will occur:
- The present content material disappears with a cool impact
- A loading message seems
Now, let’s write that loadContent perform which we referred to as earlier:
1 |
perform loadContent() {
|
2 |
$('#content material').load(toLoad,'',showNewContent)
|
3 |
} |
The loadContent perform calls the requested web page, then, as soon as that’s finished, calls the ‘showNewContent’ perform:
1 |
perform showNewContent() {
|
2 |
$('#content material').present('regular',hideLoader);
|
3 |
} |
This showNewContent perform makes use of jQuery’s present perform (which is definitely a really boring identify for a really cool impact) to make the brand new (requested) content material seem inside the ‘#content material’ div. As soon as it has referred to as the content material it initiates the ‘hideLoader’ perform:
1 |
perform hideLoader() {
|
2 |
$('#load').fadeOut('regular');
|
3 |
} |
We’ve to recollect to “return false” on the finish of our click on perform – that is so the browser doesn’t navigate to the web page
It ought to work completely now. You possibly can see an instance of it right here: [LINK]
Right here is the code thus far:
1 |
$(doc).prepared(perform() {
|
2 |
|
3 |
$('#nav li a').click on(perform(){
|
4 |
|
5 |
var toLoad = $(this).attr('href')+' #content material';
|
6 |
$('#content material').disguise('quick',loadContent);
|
7 |
$('#load').take away();
|
8 |
$('#wrapper').append('<span id="load">LOADING...</span>');
|
9 |
$('#load').fadeIn('regular');
|
10 |
perform loadContent() {
|
11 |
$('#content material').load(toLoad,'',showNewContent())
|
12 |
} |
13 |
perform showNewContent() {
|
14 |
$('#content material').present('regular',hideLoader());
|
15 |
} |
16 |
perform hideLoader() {
|
17 |
$('#load').fadeOut('regular');
|
18 |
} |
19 |
return false; |
20 |
|
21 |
}); |
22 |
}); |
Step 5
You could possibly cease there however in case you’re involved about usability (which you need to be) it is vital to perform a little extra work. The issue with our present answer is that it neglects the URL. What if a person wished to hyperlink to one of many ‘pages’? – There isn’t a manner for them to do it as a result of the URL is all the time the identical.
So, a greater manner to do that can be to make use of the ‘hash’ worth within the URL to point what the person is viewing. So if the person is viewing the ‘about’ content material then the URL may very well be: ‘www.web site.com/#about’. We solely want so as to add one line of code to the ‘click on’ perform for the hash to be added to the URL every time the person clicks on a navigation hyperlink:
1 |
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
|
The code above mainly modifications the URL hash worth to the worth of the clicked hyperlink’s ‘href’ attribute (minus the ‘.html’ extension. So when a person clicks on the ‘house’ hyperlink (href=index.html) then the hash worth will learn ‘#index’.
Additionally, we need to make it potential for the person to kind within the URL and get served the right web page. To do that we verify the hash worth when the web page hundreds and alter the content material accordingly:
1 |
var hash = window.location.hash.substr(1); |
2 |
var href = $('#nav li a').every(perform(){
|
3 |
var href = $(this).attr('href');
|
4 |
if(hash==href.substr(0,href.length-5)){
|
5 |
var toLoad = hash+'.html #content material'; |
6 |
$('#content material').load(toLoad)
|
7 |
} |
8 |
}); |
With this included right here is all of the javascript code required: (plus the jQuery library)
1 |
$(doc).prepared(perform() {
|
2 |
|
3 |
// Examine for hash worth in URL |
4 |
var hash = window.location.hash.substr(1); |
5 |
var href = $('#nav li a').every(perform(){
|
6 |
var href = $(this).attr('href');
|
7 |
if(hash==href.substr(0,href.length-5)){
|
8 |
var toLoad = hash+'.html #content material'; |
9 |
$('#content material').load(toLoad)
|
10 |
} |
11 |
}); |
12 |
|
13 |
$('#nav li a').click on(perform(){
|
14 |
|
15 |
var toLoad = $(this).attr('href')+' #content material';
|
16 |
$('#content material').disguise('quick',loadContent);
|
17 |
$('#load').take away();
|
18 |
$('#wrapper').append('<span id="load">LOADING...</span>');
|
19 |
$('#load').fadeIn('regular');
|
20 |
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
|
21 |
perform loadContent() {
|
22 |
$('#content material').load(toLoad,'',showNewContent())
|
23 |
} |
24 |
perform showNewContent() {
|
25 |
$('#content material').present('regular',hideLoader());
|
26 |
} |
27 |
perform hideLoader() {
|
28 |
$('#load').fadeOut('regular');
|
29 |
} |
30 |
return false; |
31 |
|
32 |
}); |
33 |
}); |
Completed…
The beauty of this methodology is that is it is adaptable and will be utilized to a web site inside minutes. It is totally unobtrusive and the web site will work usually if the person has JS disabled.
