jQuery function of the day

Category: Website Devlopment

Category: Website Devlopment

Website Devlopment

jQuery function of the day

Do you wish there was an easy way to have the main content of your website load asynchronously yet allow your site to still work with javascript disabled? Well, then you need to make an acquaintance with the jQuery function load.

Here’s one way one might go about using it as well.

$('a').click(function(e) {
	$('#content').load($(this).attr('href')+' #content');
	e.preventDefault();
});

And that’s basically it. The above function replaces the current content div with the content div of the link in question. What the above jQuery does is hijack the normal anchor function and replace it with a load. You will need to have e.preventDefault() in there to prevent the link from functioning normally. All that really remains is a filter to tell this code to only work for links that point to your site, not for external links. We’ll leave that as an exercise for the reader.

Website Devlopment

A word about sprites and plugins

One of the hallmarks of a bad website is rollover images not done with sprites. The result is that the first time the end-user accesses one of the secondary background images, the rollover doesn’t appear. This behavior really confuses users.

Additionally, one of the best ways that you can speed up your site is to use sprites for background images. However, what many people don’t realize is that lots of plugins use background images but don’t place them in sprites.

Here’s a sprite we built from existing images for a common social networking plugin.

Website Devlopment

GTMetrix and website optimization

I’ve recently fallen in love with GTMetrix.com. Their site does a great job of showing you exact ways that you can speed up the load time of your website. They not only show you how your site needs speeding up, they also have plenty of links showing you how to fix it.