Posted on by & filed under Content - Highlights and Reviews, Web Development.

Do you have clients who want quotes from satisfied customers on their site, something that’s eye-catching without being annoying? Or maybe you need some inspirational or humorous lines to add a little something extra for your readers? Making rotating text for your site can do this for you, and it is simple to create using jQuery.

In this article, we’ll put some text into JSON, rotate the text with jQuery, animate the change, and add in automatic rotation with the jQuery Timer plugin.

Getting the Page Ready

First, let’s start with a simple HTML construct to hold our quote:

And some simple CSS:

We only want to style the outer div – the div for the quotation and the div for the attribution. You use quoteblock-inner and quoteblock-tag-attribution purely for jQuery’s benefit. The HTML renders like this (with a quotation filled in):


Next, let’s create the JSON array that will contain all of our quotes. We’ll store the quote and who it’s attributed to. And we’ll start off by telling the browser that we’re on index 0.

Populating with jQuery

Now that we have a styled construct and data for it, we can use jQuery to populate it.

The changequote function takes the specified index, iterates through that JSON object, and replaces every tag that’s specified with the following entry:

The function will then execute the following:

This makes the function very flexible, handing any change to the JSON & HTML ids without needing any alteration.

Adding Rotation

Now that we have the first quote populated, we’ll add the ability to manually rotate the quotes by clicking on them. Since it’s jarring for some users to just see the text change rapidly, we’ll add a fade in & out to smooth out the experience.

Here we’ve added the changequote_withfade() function. Since we’re using changequote() to initialize the quote block, we don’t want to start every page load off with a block that fades in and out. Note the variable fadetime, which tells the fade functions to take 1200 milliseconds to execute.

By keeping the fading outside of rotatequote(), we make it easy to create a function that rotates in reverse:

We won’t use it in this article, but it’s good to keep this in our pocket for in case we want richer navigation later.

Auto-Rotation with jQuery Timer

We now need to use the jQuery Timer plugin, which you can get at:

Let’s say we want the quotes to rotate on their own every 10 seconds (or 10000 milliseconds). That’s easy with the timer() function from the plugin above:

With this instance of timer(), the quote will rotate both when clicked on, as well as every 10 seconds.

Since the quotations automatically rotate and also rotate when clicked on, this could create a jarring user experience when the quote rotates right before or after it’s clicked on. To avoid this, we’ll make the click function stop the timer. So we’ll change the click() to:

Now when the page loads, the quote will rotate on its own until the user interrupts.

Moving Out of the Global Namespace

Now is a good time to move the code out of the global namespace, so that our functions and variables don’t collide. Wrapping everything in an immediately executing quote_rotate() function, we have the following:

Looking Ahead

Now that you’ve got this going, it’s easy to add additional elements, like richer rotation or having the JSON change on the fly.

Safari Books Online has the content you need

Check out these jQuery books available from Safari Books Online:

Want to add more interactivity and polish to your websites? Discover how jQuery can help you build complex scripting functionality in just a few lines of code Head First jQuery shows you how to navigate HTML documents while handling events, effects, callbacks, and animations. By the time you’ve completed the book, you’ll be incorporating Ajax apps, working seamlessly with HTML and CSS, and building your own plug-ins.
jQuery in Action, Second Edition is a fast-paced introduction and guide. It shows you how to traverse HTML documents, handle events, perform animations, and add Ajax to your web pages. The book’s unique “lab pages” anchor the explanation of each new concept in a practical example.
With these recipes, you’ll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces. Ideal for newcomers and JavaScript veterans alike, jQuery Cookbook starts with the basics and then moves to practical use cases with tested solutions to common web development hurdles.
Learning jQuery Third Edition is revised and updated for version 1.6 of jQuery. You will learn the basics of jQuery for adding interactions and animations to your pages. Even if previous attempts at writing JavaScript have left you baffled, this book will guide you past the pitfalls associated with AJAX, events, effects, and advanced JavaScript language features.
jQuery: Novice to Ninja is a compilation of best-practice jQuery solutions to meet the most challenging JavaScript problems. In this question-and-answer book on jQuery, you’ll find a cookbook of ready-to-go solutions to help breathe life into your web page.

About the Author

  Ryan Macklin is freelance front-end developer, specializing in jQuery, JavaScript, PHP, HTML and CSS. He spends his off-hours as a freelance writer, editor and game designer, and maintains a blog revolving around game design and being a freelance writer & editor at


Tags: jQuery, JSON, rotating quotes,


  1.  jQuery Tip: Rotating Quotations Follow-Up « Safari Books Online's Official Blog