The jQuery javascript library offers an excellent and easy way for both experienced and beginner web designers and website owners to add great effects or features to any site.
The jQuery website contains hundreds of plugins, which allow you to quickly add elements to your website such as web photo galleries, navigation, animation, slideshows, mp3 players, AJAX and many more. These plugins are usually well supported and come with downloadable demo files, which makes it easier to integrate the code into your own website.
Later on in our blog we will show examples of where Design Chemical use this excellent resource in our web design projects. However, before you can start using jQuery features you must first know how to add the library to your web page.
There are two ways to include the jQuery library file:
1. Upload The jQuery Library File to Your Server
With this method you hold the main jQuery library file on your web server. You can download the latest version from the jQuery website.
Inbetween the head tags include the link to the jQuery file – make sure that the path is correct based on your file structure. Example – if you download the file “jquery-1.3.2.min.js” to subdirectory “js/” then use the following code:
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
Then upload the jQuery library file (e.g. jquery-1.3.2.min.js) to your web server along with your edited web page.
Make sure that the code comes before any other jQuery code in your document head.
2. Download The jQuery Library File Directly From Google
Instead of holding the file locally you can have your web page download directly from the google code repository. Main advantages of this is that if your visitor has already visited a website that uses the same code then your site can utilise the locally cached copy, which improves your page loading time. With jQuery becoming more and more popular, this method provides a definite advantage.
To download directly from google simply include the following code inbetween your head tags:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Upload your edited web page to your web server and that’s it!
Easy … now with the library included in your web page you are free to utilise the code to add great features to your web design. To see a sample of what jQuery can do click on one of the project images on our web design portfolio to see a gallery sample in action.
Hello everyone!
For some reason I can’t seem to get this to work right. Here’s my code:
In the header:
$(function(){
$(“.img-swap”).live(‘click’, function() {
if ($(this).attr(“class”) == “img-swap”) {
this.src = this.src.replace(“_off”,”_on”);
} else {
this.src = this.src.replace(“_on”,”_off”);
}
$(this).toggleClass(“on”);
});
});
Here’s where I reference in the body:
Any suggestions?
Great work creating this btw!
Hi,
Try:
$(document).ready(function() { $(".img-swap").live('click', function() { if ($(this).attr("class") == "img-swap") { this.src = this.src.replace("_off","_on"); } else { this.src = this.src.replace("_on","_off"); } $(this).toggleClass("on"); }); });[...] After adding jQuery to your website we set up the code that will perform the validation when the submit button is clicked: [...]
[...]Bookmarked and Pinged > Adding jQuery To Your Website Design Chemical – Web Design, Printing, Packaging & SEO – http://www.designchemical.com/blog/index.php/jquery/adding-jquery-to-your-website [...]
[...] After adding jQuery to your website we set up the code that will perform the validation when the submit button is clicked – first clearing any existing error messages from previous attempts: [...]
[...] some of the usual jQuery magic we can add the following code to the head of the [...]
[...] the jQuery javascript library already added to your website add the following javascript code between the tags in your web [...]
I completely agree. Thanks for the post!
[...] you are not sure how to include the library code into your web page then refer to our post – Adding jQuery To Your Website. The following examples assume that your web page already includes the jQuery [...]