Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196
News

jQuery: 5 must-know techniques

A countdown of practical jQuery coding tips and techniques that will give any project the wow factor.

01. Load content using AJAX

OBJECTIVE: Avoid page reloads by using jQuery to load content from other  les directly into your page

ACTION LIST:

1. Use the jQuery AJAX object to call another page after a user action
2. Select the part of the page to load into your document
3. Insert the loaded content into your page DOM, and animate the reveal

One of the best elements of having a JavaScript framework such as jQuery available is the browser abstraction. No longer do web designers and developers have to worry about targeting specific browsers, and instead we can concentrate on enhancing the user experience. It’s generally a good idea to take a progressive enhancement approach despite the wide browser support offered by the framework, however, and this tip does exactly that. Loading content using AJAX can increase the apparent speed of your website, reduce the page-loading  ash and improve the general user experience by providing a slick passage from
one piece of content to another. You can also use AJAX to control what web spiders see on your site, allowing for complex, non-keyword relevant content to be loaded separately. The basic coding premise is very simple: an event is  red by the user, and this in turn triggers the new content to be loaded into an object which is then displayed for all to see on the page. Because we can control which event we want to use as a trigger, content can be loaded at exactly the right time to provide the best user experience. In the example shown here we’re intercepting clicks on all links and using the href attribute to grab the relevant content before animating this into view. In itself this offers a wealth of opportunities – think in terms of iPhone-style swipes where the new content slides into view from the right, pushing the old content out to the left. By hooking into standard <a> tags we also ensure that if a user arrives at our site without JavaScript enabled, the website will continue to work exactly as it should do. The core code required to use this tip is a simple one line function:

$(‘#content’).load(‘mypage.html’, function() {
// Any code in here runs once the new con
tent has loaded
});

STEPS:
01 Create your site as usual
Create your page design as usual, using normal
HTML and CSS to style your content and arrange
it into pages. When you have a section that would
benefit from all the content being accessible without
page reloads, consider using AJAX to load the new
content in.

02 Attach an event to the link
Use jQuery to add an event to the link that calls the
next page. Make sure you either return false or use
the preventDefault() method to avoid the browser
taking over and loading the new page when you click
on the link.

// Attach an event to the link tag with a class of
“next”
$(“a.next”).live(“click”, function(){
// get the address of the page to load
var page = $(this).attr(“href”);
// this function will be called when the
data has loaded
function doSomethingWithData(data) {
// Select only the content
inside the new page’s #content div
var newcontent = $(data).
 nd(“#content”);
// Insert the new content into this page’s #content div
$(“#content”).
html(newcontent);
}
// load in the new page using AJAX
$.get(page, doSomethingWithData);
// prevent the browser from performing
the default link action
return false;
});

03 Test and refine
If you test your page now, it should swap out the
content inside your content div without reloading
the whole page. Consider adding an animation to
move the old content out and the new content in,
such as in this example where we’ve combined the
carousel and AJAX code to slide the new content
into view.

×