Oke doke, We're going to need some form of virtual notepad and a browser [Anything modern, Highly discourage using IE for anything...]
Ok, If you've never done any Javascript before then this is kind of confusing but bear with me even though it looks messy first you'll get the hang of it and before you know it you'll be having little Javascript babies running around.
Events
Events in JS and jQuery are very simple, You can use two types, HTML markup to call methods, Or make the event in JS which is a lot neater and easier to do really...
So, This is how we're going to go, Lets make a click event for an element, here is a sample:
$("#result").click(function () {
});
Ok, Here we are identifying that when the HTML element which as an ID or Name of "result" and then providing a handler for the .Click event. After this we are declaring what is going to happen when the event triggers, for example
$("#result").click(function () {
$(this).hide("slow"); // Hide it slowly!
});
Ok, You may have noticed a strange word in the code, "this". The "this" is basically referring to the result element that we defined in the method, it is a much better way of referring to elements within a function, as it saves you time from re-writing all the element names over and over again and wearing out your keyboard...
But remember!
The keyword for "this" will change depending on where you are using it, so whenever you use it make sure that you use it in the right context.
Anyway, here, We used the jQuery library to call the hide method. So when the element for result is clicked, it will hide slowly! Easy!.
Kay.... So what if I want to make preloaded content but... easy....
Well using jQuery it is very easy, Lets say we have three tabs. These tabs are called tab1, tab2 and tab3. we also have the divs for the content and these are called one, two and three.
I know they aren't very imaginative but bare with me
Right, Before we do ANYTHING lets plan and think about this logically, Using the simplist way possible, we just want when tab1 is clicked, we want to hide the other two and show the right content for the tab.
But... when the page is loaded it will all be visible! So we'll be needing to use the document.Ready
event to hide them on start up.
Ok so lets set about getting this code done, We won't use internal JS because that's just like rolling around in mud and looks very ugly...
So lets make a file called navigation.js
But wait!
We need to link the jQuery library if we're going to do anything with it right? so lets add this to our HTML inbetween the <head> </head>tags
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript">
Ok now we've done that, We can set about our jQuery code, lets make our document.Ready event first like so:
$(document).ready(function(){
});
What document.Ready means is similar to the name: "When the Document (Meaning our Webpage) is ready, Do this!".
The document.ready function is one of the most important parts in jQuery and Javascript because it gives us the basis for the rest of our code, because all of our code goes between the method, it means that our code is loaded whenever the page including the images are loaded.
So basically, Without this it means we can't do much without it for example, using a click function with jQuery would be pointless without document.ready it wouldn't work!
Great.. we have an empty load function hooray! so lets hide our two other peices of content first like so
$(document).ready(function(){
$("#two, #three").hide(); // Hide the other two tabs on load of the page
});
Ok that's all good, But now we want to be able to see those too right? lets add a click event inside it, Like so:
$("#tab1").click(function () { // Click event for the Navigation Tab 1
$("#two, #three").hide("slow"); // Hide tabs 2 and 3
$("#one").show("slow"); // Show the corresponding content for Tab 1
}); // End Tab One Click
See? It is very simple, and all you have to do is repeat it for the different tabs, hiding and showing the correct content!
Done it? Then don't forget to link in your navigation.js file to your html, again between the head tags, you would put something like this:
<script type="text/javascript" src="navigation.js"></script>
Useful jQuery Syntax
Here are a few examples of the syntax that jQuery uses, They are quite straight forward:
$("#element")
will address an elementand the Syntax for a method would be like this:
$("#element").method("parameters");
an if statement would look like this:
if(something is true){
// do something
}
I will explain the
});
For you, First, We need to have a closing curvey bracket for the one we opened so that goes first
Next, we need to close the "(function()" part, so we put a ) after that.
Then to end the line, we put a semi colon.
Declaring Variables
Naturally, In..pretty much all programming languages, variables play a big role and in javascript it's easier than others in some ways.. For example everything is a var in Javascript easily to be able to declare it like so:
var Egg = "broken";
And there you have it, The egg is broken.
Now we've broken the egg, That's actually pretty much it for variables in Javascript for now atleast
Easy huh? That's all for this tutorial! Here are some useful links to find out some more information:
jQuery Documentation: http://api.jquery.com/
Google: http://www.google.com
jQuery help forum: http://www.dreaminco...rum/105-jquery/
I hope you learnt something today, and that now you know basic syntax and functions you can get to grips with this brilliant library.
MultiQuote
| 