Bill's Amazing Content Rotator jQuery Content Rotator

The content rotator we are going to make has a special feature. I wanted something that I could use in WordPress that a client who knows nothing about jQuery or even HTML could use. I wanted the client to just be able to add paragraphs in a normal way to a page and have them just work in the rotator. I didn't want the client to have to type in any additional classes or IDs. I didn't want to limit the client to any specific number of paragraphs. The following script is the result that I came up with. It could be modified in lots of ways for other uses and it is instructive on how to do this kind of thing with jQuery.

If you download, unzip and open the start file, you will see I have a simple page set up with an H2, a div with the ID of "container" and inside the container some paragraphs with quotes from students about the course. I have already included the jQuery library and linked it up. I also included an empty file for us to put our script into. There are two styles on a style sheet. The final result will take each quote one at a time and rotate them through in a loop on a timer.

The first thing we need to do is set the display of the paragraphs to none by default in the CSS. The rest will be taken care of in the jQuery. Next, we can add our document.ready() event handler to the top of the script.js file, as usual. Next, lets think about what we want to actually happen. We want to loop through the paragraphs on the page, one at a time on a timer, fading the paragraphs in, and then fading them out. When we have reached the last one on the page, we want to go back around to the first one and start all over again. There are lots of ways to do this. One way is to use a counter. When we get to the last paragraph, we set the counter back to the start. We could use a traditional programming loop, or we could have the program call itself to make it behave in a recursive fashion. We will actually do the last one.

Lets go ahead and make a counter variable and set it to 1. Then, I am going to make a new function OUTSIDE the document.ready() function. We can not use an inline, anonymous function in this case because we are going to have to call the function by name to get the recursive bit going. We will pass in the counter variable so we know which paragraph to get.

This is essentially the structure of the function we are going to write.

This will select the container nth child paragraph of the #container div and fade it in over two seconds. We initially set the counter to 1, which gets the first paragraph. It looks a little weird with the plus signs around the counter, but essentially we are breaking up the string inside the jQuery object so that we can use our counter variable and have it actually get evaluated as a variable. We are using the CSS nth-child() syntax for this which is what will allow us to deal with as many paragraphs as we want. Also, as a side note, the nth child does not use the zero index for counting. Instead counting starts at 1, just to make things even more confusing.

Next we will add a call back function to the to the fadeIn animation. This is because we want something to happen after the paragraph has faded in. Everything else we do is going to happen in that call back function. We are going to run an if/else statement inside the call back function to find out if we are on the last paragraph or not.

In the if statement we want to check and see if this paragraph, the one we just faded in, is the last child paragraph of the #container div. So we use the "this" keyword again for it. Lets leave this for now and figure out the else. I think it will make more sense that way. The else statement will run unless we are on the last paragraph of the div.

Inside the else statement, we are going to set a timer. setTimeout will take a function and run it AFTER waiting a specific amount of time. In this case, seven seconds. We can replace the doSomething with an anonymous function that we want to run after waiting seven seconds. We faded in the paragraph, we waited seven seconds, now we want to fade that paragraph out.

We want to take that same paragraph and fade it out. We are using the same counter as before. If we are on the first paragraph, the counter is still set to 1. After we have finished fading the paragraph out, we need one more call back function. What do we want to happen next? We want to get the next paragraph and start all over again.

We want to increment the counter and run contentRotator again with the new counter passed in. Now it will fade in paragraph number 2, wait 7 seconds, check to see if that is the last paragraph and if it is not, it will fade it out, set the counter to 3 and run the function again getting paragraph 3 instead. In programming, this is called recursive, which is a special kind of looping. Now we just need to fix the if part of the program.

For the if part of the program, we really just need an exact copy of what we did in the else statement with the timer and everything. The only really big difference here is that the counter needs to get set back to one because we are on the last paragraph and we want to rotate around to the beginning again.

The very last thing we have to do, is tell the document.ready() function to run this contentRotator() function when the page loads to get it started. From then on it will just run automatically.