The Tutorial Blog » javascript

Deep Linking with jQuery

Wez Pyke — Wed, 10 Feb 2010 14:43:43 +0000

You can view a demo and download the resources for this tutorial at the bottom of the post.

Web 2.0 websites have a lot of Ajax functionality, some times when you load a new element of a page you may want the user to be able to click the back or forward button so that they can see the previously loaded content. One method to add this function to a website is to use the jQuery Address plugin with jQuery.

jQuery Address has 4 main methods; init, change, internalChange, externalChange. The init method is what is called when the plugin is initiated. The change method is called when the URL is changed, an element in the page is changed or either the forward or backward button is pressed. The change method has the combined functionality of internalChange and externalChange. The internalChange is only called when a hyperlink inside the page is clicked; externalChange is only called when the URL is changed or the backward or forward button is pressed.

To allow deep linking within your website the only two methods that are required is init and change, you can then use internalChange and externalChange wherever you may need them.

Getting it to work

The first thing that is required of course is that you download the file for jQuery Address. When you have done this copy the jquery.address-1.1.min.js file into the same location as your index.html file.

Now we include jQuery and the jQuery Address plugin, put this inside the head tags in your html file:


<script type="text/javascript">
google.load("jquery", "1.4.1");
script>

The jQuery

The next thing that we're going to do is create a function that will be called when a hyperlink is clicked so that we know what file to load and where to load it. We will call this function loadURL(), it will take one parameter named url.

function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
}

We have console.log so that when we open up Firebug in Firefox we know which page is being requested. This is useful for debugging if there are any faults with the requested page loading.

We now set the jQuery Address event handlers so we know when to deep link an element within the page.

$.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
})

What this code does is retrieves the href attribute from a hyperlink by matching the rel to a hyperlink. We also log when it should have changed so we can see this in Firebug.

The last bit of jQuery that we do will check when a link has been pressed and then call the loadURL() function that we created before.

$('a').click(function(){
	    	loadURL($(this).attr('href'));
});

This is what the head of your file should look like:




	
	TheTutorialBlog.com : jQuery Deep Linking
	
	<script type="text/javascript">
	google.load("jquery", "1.4.1");
	script>
	
 
 
	<script type="text/javascript">
	/*
	$("document").ready(function(){
 
	    function loadURL(url) {
	    	console.log("loadURL: " + url);
	    	$("#area").load(url);
	    }
 
 
	    // Event handlers
	    $.address.init(function(event) {
	        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
	    }).change(function(event) {
	    	$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
	    	console.log("change");
	    })
 
	    $('a').click(function(){
	    	loadURL($(this).attr('href'));
	    });
 
	    });
 
	/*]]>*/
	script>

The HTML

The HTML for this is really basic stuff, we will create two hyperlinks that will load two separate files. We will also create a div element named area, this is where the files will be loaded.


 
 
	Test 1 

	Test 2 
 
 

 
	Load Area:

The name of the file that you want to load goes inside the href tag. You also need to include address:/ inside rel. This is how jQuery Address knows what hyperlinks you want to deep link.

Final words

I hope this tutorial has been useful, please feel free to leave a comment or ReTweet this tutorial on Twitter.

Demo and Download

Demo
Download

Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...

Related posts brought to you by Yet Another Related Posts Plugin.

Easily and effectively display images with FancyBox

Wez Pyke — Sat, 29 Aug 2009 23:32:39 +0000

FancyBox is a plugin for jQuery that allows you to easily display images in the same window with a simple yet effective code. The plugin takes no time to set up and all that is required is that you include the jQuery javascript library within the pages that you are using the FancyBox plugin on.

Features:

Display single images
Create image galleries
Display iFrame
Execute Ajax
Include Flash, movies or audio files

Using FancyBox

First of all we need to link to the jQuery and FancyBox file after we have downloaded.

<script type="text/javascript" src="path-to-file/jquery.js">script>
<script type="text/javascript" src="path-to-file/jquery.fancybox.js">script>

Next we add the stylesheet that is included with FancyBox:

Then to link to an image we simply set the id of an image to "single_image":

All that is left to do is execute the jQuery code when the DOM is loaded.

$(document).ready(function() {
 
    $("a#single_image").fancybox();
 
}

That is all the code that is needed to display a single image. To learn how to do things such as ajax calls, view the documentation for FancyBox here.

Other lightbox alternatives

Is there another lightbox alternative that you have used that you would like to share with all the readers? Post a comment below.

Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library Recently I wrote quite a huge chunk of jQuery for...
Deep Linking with jQuery You can view a demo and download the resources for...
PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...

Related posts brought to you by Yet Another Related Posts Plugin.

jQuery Form Validation

Wez Pyke — Tue, 30 Jun 2009 20:38:47 +0000

Create a form that requires the user to enter both a username and password. If the username field or password field is left blank then a message will be displayed.

Build a Twitter-like site with CodeIgniter and jQuery Part 2 Don't forget to check out part 1 if you have...
jQuery Dropdown Suggestions For this tutorial we are going to create a drop...
Adding security to CodeIgniter forms with a custom library class The class that we are going to create within CI...

Related posts brought to you by Yet Another Related Posts Plugin.

jQuery #1

Wez Pyke — Sun, 28 Jun 2009 22:45:40 +0000

Learn how to use the animate function within the jQuery library to create an effect similar to the table of contents for the table of contents on codeigniter.com.

Blip.tv Link

Click to play

Deep Linking with jQuery You can view a demo and download the resources for...
Build a Twitter-like site with CodeIgniter and jQuery This tutorial will be the first of a five part...
10 Awesome jQuery Tutorials You Should Check Out jQuery is a great tool that everyone in web development...

Related posts brought to you by Yet Another Related Posts Plugin.