First off, if you don’t already have it, you’re going to want to download jQuery from the official site which you can find here. After that, upload it to your server, and include it in the file you want to use the jQuery in, by putting the following code in the head of your html document:
<script type="text/javascript" src="link/to/jquery.js"></script>
Okay, so what do I do now?
Well, that’s easy, my friend (while we’re calling each other ‘friend’, why don’t you go ahead and subscribe), we just have to initiate a jQuery function. Now now, don’t get yourself into a tizzy. This isn’t as hard as it sounds.
$(document).ready(function() {
// Your code will go right about here.
});
Confused? It’s not as hard as it looks. Usually a function in jQuery starts with this first line. In jQuery, ready() is a function of sorts. Functions merely carry out a function, i.e. a particular job. What you’re saying here, basically, is to begin the jQuery function for the whole document. Think of it like this, if it’s easier for you:
ready(function goes here);
Now, the way that jQuery is set up is so that the code will begin as soon as the document is noted to be loaded in your browser. This means you don’t have to wait for everything to be loaded (as you might have to do if you weren’t using jQuery).
What we’re going to want to do now is make something interesting. So lets mess around with the basic functions for a while, shall we?
Now these are really easy. If you’ve ever used javascript before, you could learn this language in 30 minutes. First of all, to select an element (which we will need to do if we want to manipulate it), you have to do this:
$('element')
Now, you can select various things, for instance, if you want to select an element with a certain id, you do this:
$('#element')
If you were picking a class, you put a dot instead of a hash. If you’re selecting multiple classes, you just write them, seperating them by dots, like this:
$('.element1.element2')
There are also a bunch of selectors you can use, which you can find here
Another useful example is if you want to select all divs with an id, you would select it like this:
$('div[id]')
So after you’ve selected it…
You can go ahead and start adding some effects. Here’s a little example, of the javascript you might use:
$(document).ready(function() {
$('button').click(function() {
$('#click').show('slow');
});
});
And then the HTML:
<button>Click me!</button>
<div id="click" style="display: none;">
Oh gosh, you clicked the button
</div>
So let’s take a look at the javascript first of all. We start like we did before. Then we select the element, as you were shown before. The dot is sort of a connector between the selection and the function, and the function we’re using here is “click”, which is a jQuery function. Again, click uses a function so you can specify what’s going to happen, so what we’re saying next is, when you click button, then anything with an id of “click” will be shown slowly. You can also set it to ‘fast’. In the HTML, as you can see, display is set to none. So when you press the button, the text will appear slowly.
Great! It’s not that hard. If you’re still having trouble, try reading over the previous bits again. So now that you’ve got the basics down, lets make a really simple slider application. This is to show you what can be accomplished with a very basic understanding of jQuery and javascript.
First of all you’re going to want to write out your basic HTML document. If you don’t already have that done, just copy and paste this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Nice, Simple, jQuery Slider-type thing.</title>
</head>
<body>
</body>
</html>
Okay, so go to your head area, and include the jQuery file, just as we did before:
<script src="jquery.js" type="text/javascript"></script>
Just put that anywhere in the head area of your javascript file. To begin doing our own little custom coding bit, we have to tell the browser that we’re starting some javascript, so just start with this:
<script type="text/javascript">
</script>
Put that into the head of your document.
All our javascript will go inbetween the script tags. But what, I hear you shout, will go inbetween these two mystical tags? Well that’s easy, young one, we’re going to put some of that magic jQuery in there, and finish it off with a little bit of do-it-yourself javascript!
First thing I did was to start jQuery, as I showed you before. Forget how to do it? Well, all you do is this:
$(document).ready(function() {
}
All the javascript we write from now on will go between those two magical curly brackets. So to begin, we’re going to define two variables:
// By default part is 1.
var part = 1;
// There is a maximum of 3 slides.
var max = 3;
Okay, so that’s pretty easy, right? “max” is the number of slides we’re going to have in total. You can change this if you want. “part” is set to 1, because the first slide is slide number 1. This is so we don’t end up with nothingness when we open the page. Before we continue, lets add some HTML to the body section of our page.
<div id="back">
<a href="#"><img src="back.gif" alt="" /></a>
</div>
<div id="s1">
<div class="fadeup1">This is Some Text to Appear on top of the image</div>
</div>
<div id="s2">
<div class="fadeup2">This is Some more text to appear</div>
</div>
<div id="s3">
<div class="fadeup3">And even more!</div>
</div>
<div id="next">
<a href="#"><img src="next.gif" alt="" /></a>
</div>
So as you can see, by using your magnificent mathematical ability, we have a total of 5
<div>s (Well, 8 if you include the<div>s inside <div>s). The <div>s with ids of s1, s2, and s3 are going to be our slides. The <div>s inside of them are going to be a little bit of text that we’ll add to each slide to describe it a bit. Then we have a back and next button. You can probably make your own back and next buttons, but if you want the ones I used, take a look at the demo at the bottom.
I think now would be a good time to add some CSS. Move back to your head section, and this somewhere:
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-weight: bold;
}
#s1, #s2, #s3 {
width: 630px;
height: 200px;
}
#s2, #s3 {
display: none;
}
#s1 {
background: url('light.png');
}
#s2 {
background: url('preview.jpg');
}
#s3 {
background: url('prev.png');
}
#next, #s1, #s2, #s3, #back {
float: left;
margin: 20px;
}
.fadeup1, .fadeup2, .fadeup3 {
color: #fff;
padding: 20px;
background: #000;
display: none;
opacity: 0.8;
}
img {
border: 0;
}
</style>
Hopefully I don’t have to explain this. However, if you don’t exactly understand what I’ve done here you might want to check out our tutorial on how to code a layout in XHTML and CSS, to get a basic understanding of CSS.
The key points to outline from this CSS snippet is that I’ve made s2 and s3 hidden (not s1, we don’t want the user to see a blank page with 2 arrows), and I’ve made all of the fadeup bits hidden too. All we’re going to try and do with the javascript is make them appear to the user without reloading his or her page. That doesn’t sound too hard, now does it?
Lets move back to our javascript. Add this line just below the two variables we defined before:
[javscript]
$(“.fadeup1″).slideDown(’slow’);
[/javascript]
Now by default, the first image will be displayed to the user. This is so that (as I’ve mentioned before), this user doesn’t see a blank page with two arrows when they arrive on the page. So we’re going to want the fadeup1 div to appear to the user. I’ve set it to use the function slideDown, so it will literally just slide down slowly, appearing to the user. Next we’re going to want to define what happens when the user presses next and back.
$('#next').click(function() {
});
$('#back').click(function() {
});
Okay, so if you remember from earlier, all we’re doing here is selecting the next and back <div>s, and we’re going to make something occur when the user presses them with the click funtion in jQuery. There are 4 things we’re going to have to do in each of these functions. We’re going to have to..
1) Make the image div (image) fade in.
2) Made the previous div (image) disappear
3) Make the text in the fadeup div appear for that particular image
4) Make the fadeup text for the previous div disappear.
That’s all we have to do for this script to work. So what we’re going to have to do is find out what the next div is called, and what the previous div is called. So we’ll deal with the “next” function first. Put this in that function:
if(part == max) {
part = 1;
}
else {
part = part + 1;
}
if(part == 1) {
pp = max;
}
else {
pp = part - 1;
}
So lets think about this for a minute. We defined part earlier as 1, and we also defined max as 3. Part is just sort of, what div number we’re on. So if we’re on the last div, i.e. max, the next part will be 1, as it starts all over again.
Otherwise, (else {) the next part number is going to be the current part plus 1. Next we find out what the previous page number would be (pp). So again, think about it. If the current part we’re on is 1, then the previous page will be the last page, i.e. max. Otherwise the previous page will be the current page minus 1.
Now we have to put these variables into use. Since the div’s ids aren’t just a number, we have to merge the number with some text, or concatenate two strings. To do that I made 4 variables:
var get = "#s"+part;
var get2 = "#s"+pp;
var get3 = ".fadeup"+part;
var get4 = ".fadeup"+pp;
Okay, so the first variable (get) is the next div. The second variable is the div that’s going to be faded out. The third variable is the next fadeup div, and the 4th variable is the fadeup div that’s going to be faded out. Now we just use jQuery to finish it off, by adding some nice effects:
$(get).fadeIn();
$(get2).hide();
$(get3).slideDown('slow');
$(get4).hide();
So the first we fade in the next div, we hide the current div, we slide down the next fadeup, and we hide the current fadeup. And there you have it, the next button is working. The back button is pretty similar only sort of the opposite of the next button. Here’s the code to put in the back button function:
if(part == 1) {
//This is the first page
part = max;
}
else {
part = part - 1;
}
if(part == max) {
np = 1;
}
else {
np = part + 1;
}
var get = "#s"+part;
var get2 = "#s"+np;
var get3 = ".fadeup"+part;
var get4 = ".fadeup"+np;
$(get).fadeIn();
$(get2).hide();
$(get3).slideDown('slow');
$(get4).hide();
So we’re doing the opposite here. If the current part is 1, then the previous page will be max. Otherwise the previous page will be part minus 1. If the current part is max, however, the next page will be 1, otherwise the next page will be the current part + 1. Then we make the variables like before, and do exactly the same thing with jQuery.
Here’s the final javascript code:
<script type="text/javascript">
$(document).ready(function() {
// By default part is 1.
var part = 1;
// There is a maximum of 3 slides.
var max = 3;
$(".fadeup1").slideDown('slow');
$('#next').click(function() {
if(part == max) {
part = 1;
}
else {
part = part + 1;
}
if(part == 1) {
pp = max;
}
else {
pp = part - 1;
}
var get = "#s"+part;
var get2 = "#s"+pp;
var get3 = ".fadeup"+part;
var get4 = ".fadeup"+pp;
$(get).fadeIn();
$(get2).hide();
$(get3).slideDown('slow');
$(get4).hide();
});
$('#back').click(function() {
if(part == 1) {
part = max;
}
else {
part = part - 1;
}
if(part == max) {
np = 1;
}
else {
np = part + 1;
}
var get = "#s"+part;
var get2 = "#s"+np;
var get3 = ".fadeup"+part;
var get4 = ".fadeup"+np;
$(get).fadeIn();
$(get2).hide();
$(get3).slideDown('slow');
$(get4).hide();
});
});
</script>
That’s about it for this tutorial. I hope you’ve enjoyed it. I hope to have a few more jQuery tutorials in the future, so stay tuned. I hope you’ve enjoyed this, and good luck javascripting!
Comments
Great intro to Jquery, looking forward for more in depth tutorials.
Hi,
Can we not use image tag instead of use in image in background?
You are using image in background. Is there any special reason or standard you follow.
Hey. I’m not using an image, just a background color. Would it not just be easier to use the background css element? I’m using it just because it’s easier that way.
Sorry mate you are using image in background, check your code below
#s1 {
background:transparent url(light.png) repeat scroll 0 0;
}
#s2 {
background:transparent url(preview.jpg) repeat scroll 0 0;
}
Html code
/* Can we use image here or display same below msg in top of image. */
This is Some more text to appear
Oh I’m sorry, I feel silly now, I thought your comment was on another tutorials.
Anyway, there is no particular reason why I used background images here. When I was coding this, I was messing around a bit and the original way I had planned to do it (which didn’t work) required me to use background images for some reason as it was easier. You could probably use images but I honestly haven’t tried it.
Sorry for the confusion! :D
What if you want the textbox to slide up and stay at the bottom? Is it as simple as changing slideDown to slideUp and then add some changes to the css?
Hey jakob, slideUp actually makes the content disappear, rather than appear. I’m sort of in a rush here, but if you wanna check out the docs of jQuery (slideUp) you can get them here: http://docs.jquery.com/Effects/slideUp