How to add jQuery scripts in Joomla

In the era of smart phones we are looking for ways to make cross compatibility when it comes to our websites. With the rise of the iPhone and Android we see people beginning to move more and more away from the world of flash and into alternatives that can make the web *move*. And so, with the rise of HTML5 and JavaScript we see more and more websites moving into cross device solutions. One of those solutions is a JavaScript library called jQuery. So how exactly do you get your jQuery scripts to work inside your Joomla template?

When it comes to using jQuery in Joomla the problem that most people run into is the conflict between MooTools(another javascript library) and jQuery.  By default Joomla loads the MooTools library into the head of the template.  It is possible to write some php and cause it from not loading, but I believe an easier way is to make jQuery run in no conflict mode.

There are several different methods to accomplish this, today we will use one of the easiest and quickest ways to make your scripts Joomla compatible.

First, make sure that you have jQuery loaded into your template.  (< I think I feel another tutorial!)

Second, lets take a look at a some jQuery code as it is written normally:

$(document).ready(function() {
 $('.scroll_btn').click(function(){
 $('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
});

As you can see jQuery uses the $ as the name of its variables.  The reason that this will not work in Joomla is because MooTools also uses the $ as a variable as well.

In order for this to work properly we need to change the names of our variables in jQuery.  Well, you can actually change the $ to the word jquery.  Your code would now look like this:

jQuery(document).ready(function() {
 jQuery('.scroll_btn').click(function(){
 jQuery('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
});

Now that all your selectors are different than MooTools your jQuery scripts should be able to function as normal.

So how do I convert jQuery plugins?

Well the easiest way that I have found is by simply opening up the script and manually changing all the $ to jquery. 

And that's pretty much it, you can now make your web pages do some pretty incredible things.  P.S. The script is a script that can make a button scroll to the top of your page.