So for my first tutorial I'm going to create a testomonials section for a website using Javascript and the jQuery library. Quite often a client makes a request to show testomonials on the home page. This is one example of accomplishing that task.
Step One
First we will need to write out the HTML structure but since this is a Javascript tutorial I'm not going to focus so much on this part. It's basically just an unordered list using the blockquote tag. I'm also also adding "display: none" to the all of the list items except for the first one. This will allow a single quote to show when Javascript is turned off. Also we will link to the javascript library that we'll be using.
<!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>Quote Rotator</title>
<script language="javascript" type="text/javascript" src="Javascript/jquery.pack.js"></script>
</head>
<body>
<ul id="testimonials">
<li class="slide">
<blockquote>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fermentum velit quis lorem bibendum commodo. Quisque dolor ipsum."</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>2-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
</li>
<li class="slide" style="display: none">
<blockquote>3-I absolutely love and take great pride in building websites. I'm passionate about all things design and dedicated to standards based design.</blockquote>
</li>
</ul>
</body>
</html>
Step Two
We'll then need to add some basic styling to make the quote look presentable. You could take this a step further using background images for the quotation mark but I'll leave that up to you.
#testimonials {width: 500px}
#testimonials .slide {list-style-type: none;line-height: 24px}
blockquote {font-size: 18px;font-family: Georgia, "Times New Roman", Times, serif;color: #333;font-style: italic}
Step Three
First let's load the jQuery library and initiate a function when the document is ready (when the DOM is loaded).
$(document).ready(function() {
// Stuff here
});
Now what we are going to do is select the div that contains the blockquotes using a common jQuery selector. We start by writing the dollar sign ($) which is just shorthand for "jQuery". So the same line could also look like "jQuery();"
$('#testimonials .slide');
The next thing we will need to do is fade in the other quotes over a period of time using the Javascript function "setInterval". The syntax for this funtion is pretty simple
setInterval (expression, interval);
setInterval(function(){
},5000);
Next we are going to select the visible div.slide and fade it out. We do this by using a jQuery selector to select div.slide and then filter out the non visible elements using ":visible". We then set the speed and create a function.
$('#testimonials .slide:visible').fadeOut(5000,function(){
});
Step Four
Now we need to create an If/Else statement to fade in the remaining divs.
if($(this).next()){
$(this).next().fadeIn(1000);
}
else{
$('#testimonials .slide').fadeIn(1000);
}
So lets discuss each line of that statement. We first write if (this) referring to the current dom element and then using ".next()" we're selecting the sibling element. If that returns true we run the next line which selects the next element of the current dom element and then we fade it in using the jQuery effect ".fadeIn(1000)" which we apply a speed to. The next line "else{}" states that if the original statement wasn't true to run the following line. Here we use another jQuery selector to select div.slide and the using the effect ".fadeIn(1000)" we slowly make it visible.
Step Five (Fixes)
With the current code the quote rotator works, that is, until it comes back around to the first quote in the sequence which then display nothing. To fix this we'll use ".size()" to return the total count of elements within the jQuery object.
if($(this).next()){
$(this).next().size().fadeIn(1000);
}
Now that we fixed that issue we notice that when the sequence starts again it displays all of the quotes at once. Fixing this issues requires that we use "eq(index)" to select the first element in the "else" statement. Now we seem to have a working blockquote rotator which works without problems. Using this concept you could apply to a div and rotate in/out any content. I hope you were able to take something away from this tutorial and I'm sure I'll be doing some pretty cool things in the future.
]]>
