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

In a previous article, I showed you how to implement automatically-rotating quotations. In this tip I will show you how to add back and forth navigation.

First, we’ll need to add some buttons to click on, CSS to style them, and then we will change the jQuery to reflect that. Let’s keep it simple and just use text containers.

To add these buttons, add the following lines to the HTML:

Then add the following to the CSS:

You should now see:

Since we already made the rotatereverse() function in the previous article, we’ll use that here.

Finally, we’ll remove the current click() function and add in its place:

This will now give the user the ability to rotate forward and backward through the quotations at will.

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.

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 http://RyanMacklin.com.

Tags: CSS, jQuery, rotate quote,

Comments are closed.