JQuery Quote Rotator Plugin.
February 7th, 2010
Here’s a jQuery plugin that rotates through list items with a nice fade effect. You may nest any type of element you like inside a given list item.
How to make it work.
Drop these scripts in your header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.quote_rotator.js" type="text/javascript" charset="utf-8"></script>
Call the function to any list element:
$(document).ready(function() { $('ul#quotes').quote_rotator(); });
You can specify which quote you’d like to show first by adding a class of active to the list item. If you don’t explicitly add an active class, it will default to the first item in the list.
Configuration options.
$('ul#quotes').quote_rotator({ rotation_speed: 7000, // defaults to 5000 pause_on_hover: false, // defaults to true randomize_first_quote: true // defaults to false buttons: { next: '>>', previous: '<<' } // defaults to false });
Rotation will pause on mouse hover by default. This is nice if you're rotating through links or other elements that you might not want fading away from the user.
Also notice that next/previous buttons are not included by default. If you want buttons, you need override the buttons option. As in the example above, assign a javascript object with next and previous keys. The values will be used as text for your buttons.
This doesn’t seem to work properly on ie7, any idea why?
Reply
April 27th, 2010
AK@AK
Download the most recent version. There was an errant comma throwing errors in IE. I fixed it about a month ago. So I’m guessing you have an outdated version. The newest version definitely works in IE7. I just double checked it.
If that doesn’t help. Send me a more detailed explanation of your problem and I’ll see what I can do
Reply
April 27th, 2010
Cory Schires@Corey
You’re absolutely right, working great now. Thank you!
Reply
April 27th, 2010
ak@Corey,
Thanks, works great.
Just one minor issue, In IE8 it seems that the font changes from the style I assigned to it to an unaliased type. It doesn’t do this in Chrome, Safari or Firefox. You can see this at RossAviation.com home page under What others are saying.
Thanks Again.
Reply
June 14th, 2010
RubenHello,
I am on a Mac and in Firefox only the first quote fades in. After that, it’s blank and does not cycle through the other three quotes. Do you have any idea what the issue is? It works fine on Safari. Any help would be appreciated! Thank you.
Reply
August 23rd, 2010
Alisonhi
works nice, but you can see the separate divs all at once before the page fully loads. how to prevent that?
thanks
Reply
In your CSS set the style for LI to be display:none. When the page loads the quote box will be empty, and then the Javascript will kick in and start to show the first list item.
November 19th, 2010 Norm Sherman
September 26th, 2010
johny whyHi, we’ve implemented your plugin, and are encountering a weird problem; if I am scrolled past the list being rotated in my browser window, the view jumps back up to the rotating list each time a new element is rotated in – is there an easy way to keep the window from jumping back up? Thanks!
Reply
Hmm. I’ve never head of that being an issue which leads me to assume you’ve got something wrong that’s specific to your application/implementation.
Off hand, I’d suggest taking a really close look at your markup, especially the list items. If your missing a closing tag (or something like that) it could cause your screen to jump around as different items fade in and out of view.
Other than that, are you seeing any JS error in the console (using firebug or whatever)? If you can’t figure it out, send me a link or post a gist to github and I’ll have a look.
Hope it helps.
January 7th, 2011 Cory Schires
I was experiencing this same problem with a site in development. I had it implemented as a sidebar item on a few pages, with different content on each. It was behaving as expected on some, on others it was exhibiting the behaviour Kevin describes.
I eventually sussed out that the reason it was causing the page to scroll was, in essence, because the rotating elements were causing the height of the page to change.
In my implementation, the pages that were working to spec had more content in the content pane of the page than in the sidebar, and as such the changing elements of the Quote Rotator could not affect the height of the page. In the pages that were not working, there was little content in the content pane, meaning the contents of the sidebar were governing page height.
This occurs regardless of whether or not the rotating elements have differing heights. I’m no expert, but from looking at the Javascript, this appears to happen because for a very brief period during rotation, all the list items are hidden, which affects the height of the parent list, which can in turn affect the height of the page.
Kevin – in your CSS, try setting a height property on the #quotes item. The usual {height:200px; height:auto !important; min-height:200px;} voodoo worked for me.
Hope this helps. Brilliant plug-in, by the way! Saved me a fair bit of hassle.
January 19th, 2011 Jack Wright
@Jack.
Thanks for the insight. I agree, some minor CSS tweaks should solve your issue.
I suggest setting a height on the ul/ol that contains the rotating quotes (i.e. the same element that you called the plugin on). The value should be at least large enough to display your longest quote (to avoid weird overflow issues). That should keep everything neatly contained in a fixed size box – thus preventing your layout from jumping around.
Also, I don’t plan on automating this setting in a future release of the plugin since it’s fairly application specific. In other words, it’s difficult to know exactly how tall you’ll want your quote container for a given layout. Yes, I could look at the height of the tallest child list item, but that seems needlessly magical. Better, I think, to just keep it simple and trust people will write the CSS they need.
January 19th, 2011 Cory Schires
January 5th, 2011
Kevingreat stuff but how can you have this working and also have the quote be different when i hit the reload /refresh the page….can this be done within this code? So instead of the first quote make it random when I reload the page? Can this be done in JS/Jquery or do i have to use PHP?
Reply
You definitely don’t need PHP and it would be a mistake to get another language involved if it can be avoided.
That said, I think this is a pretty good feature idea. I’ll add it to the plugin — probably this evening but it should be no more than a few in days. I’m thinking it will be a configuration option:
Keep an eye on this thread. I’ll let you know when the new version is released to github. Thanks for the idea!
If anyone else has ideas for improvements lemme know or, better still, fork the project on github and contribute some code.
January 25th, 2011 Cory Schires
January 25th, 2011
jc24Oh my pleasure I love what you done I was going to implement this with php but if you’re saying it should be done without it then excellent! Glad I ask!@
Reply
Just pushed a new release to Github. You can now specify that you’d like the first quote shown to be randomized. By default this is not the case.
I’ve updated the instructions above to reflect this feature.
January 25th, 2011 Cory Schires
January 25th, 2011
jc24Thank you HA The:
var random = Math.floor( Math.random() * (list_items.length) );
Why didn’t I think of this!@ Thanks so much and good job!
Reply
January 25th, 2011
jc24could this work if I only wanted 1 quote randomized every day of the week?
for example I want 3-7 quotes in each of my lists and then only display 1 on that day (Mon, Tues, Wed, etc)?
CK
Reply
I don’t understand what you are trying to do. Out of the box, it can randomly select the first quote to be shown if specified in the configuration options like so:
There’s no support for randomly selecting from a subsets of list items based on day of the week. If that’s what you’re looking to do, you’ll need to hack to plugin and set some conditions using javascript time functions. But, I gotta ask, why would you want to do that? No one’s even going to notice, I’d think.
February 7th, 2011 Cory Schires
February 7th, 2011
crystalI love this! It works really well.
The only issue I’m having is a border around the quote. [screenshot: http://cl.ly/4VYq ]
It’s only seen in Firefox 3.6.13, Mac, and on closer inspection, it looks like the tiny dots you see on active links in Firefox. I tried adding “outline:none” but that didn’t work.
(the site is in development here http://dawgs.squarespace.com)
I ran the site through browserlab.adobe.com, and I don’t see it happening on any browser there.
I probably won’t sweat it, but if you have any ideas, I would be grateful!
Reply
February 10th, 2011
AlanRe: the border/outline image… After further testing, it’s a Squarespace issue. Thanks again!
Reply
February 10th, 2011
AlanGlad you like the plugin. I was not able to recreate the issue on your demo site even in that exact browser (which seems weird). As far as the dotted-line bug generally, it’s well documented that setting outline to none/0 will not remove it properly in all browsers. As I recall, IE can be especially petulant. Have a look at these links:
http://css-tricks.com/removing-the-dotted-outline/
http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links
I’m pretty sure the dotted-line comes when focus is placed on a element. So you can force remove the dotted-line by triggering a blur event on page load. I’d give that a try. So it would look something like:
Hope it helps. Site looks good, btw.
Reply
February 10th, 2011
Cory SchiresNice effect. Exactly the functionality I was looking for as a semi-subliminal message to be displayed on a monitor in my peripheral vision. However, this makes my fan turn on (2.4 GHz Duo Core MacBook Firefox 3.6), so I reduced the fade duration from 1000 to 200.
Reply
March 1st, 2011
nonzeronice !!! thnxx a lot…
Reply
March 7th, 2011
saReally nice effect. I’d like to use this not as a random quote that runs by itself, but triggered with the change of a tab in jQuery tabs UI, so I get a random quote in a sidebar with a tab change in the main body of the page. If it’s not too much trouble, could you point out just the functions needed to rotate the quote? I think I can trigger it with select : function(event, ui) { … } in my tabs init. Thanks, Mark
Reply
@songdogtech
There’s currently no public function to reset the quotes. I could add this this as part of the API, I suppose. What do you think? Is it a common enough use case to make it worth adding a ‘reset’ function to the API?
Also, I believe you could just invoke the entire plugin on select:
That should show a random quote as well as initialize the rotation effect.
If that doesn’t work, lemme know and I’ll dig a little deeper in order to expose just the bits you need.
April 22nd, 2011 Cory Schires
April 22nd, 2011
songdogtechHi, To fix an old bold style not rendering issue, I done the following code change.
Only using fadeIn and fadeOut.
My hold some text
// rotate quotes with fade effect
//active_quote.animate({
// opacity: 0 // fade out active quote
//}, 1000, function() {
// active_quote.hide().css(‘opacity’, 1); // hide and reset opacity
// next_quote.fadeIn(1000); // fade in next quote
//});
active_quote.fadeOut(1000); // fade in next quote
next_quote.fadeIn(1000); // fade in next quote
Reply
May 2nd, 2011
TimHi – this is great thanks, just one question is there a way we could have a next and previous button?
Reply
Not currently. But seems like a pretty good suggestion for a new configuration option. I’ll add it in the next few days.
May 18th, 2011 Cory Schires
@sara
Added support for next/previous buttons (as well as other improvements) in the version 1.0 release today. Enjoy!
May 28th, 2011 Cory Schires
May 18th, 2011
SaraHow would you go about and add a bar at the bottom with the links of who said the quote, so when you click it, the rotation pauses, and shows that quote?
Would be nice feature!
Reply
Hmm.. Not a bad idea but I don’t want to build it as core feature. My general concern is that I’d like to keep the plugin focused on solving a simple problem (i.e. rotating quotes). I’m afraid if I add too many features to the plugin (e.g. I recently added an option for next/prev buttons) then it will become little more than a type of slider (and there’s certainly enough variations of jQuery sliders for two internets).
What I may do, however, is expose a public method which people could use to hand roll the type of functionality your describing (as well as other ideas I haven’t even considered). It would look something like:
$(‘ul#quotes’).quote_rotator(‘skip_to’, $(‘li#noam_chomsky’) )
If you’d actually use this method, let me know and I’ll find some time to work it in over the next few weeks.
May 30th, 2011 Cory Schires
I would like to try this feature.
I will try the example code out in a few hours, then post how it did. This is a nice plugin BTW, and I feel by adding this feature, would make it even better.
Cheers!
May 31st, 2011 Name
If you’d like to implement that feature, that’d be awesome. There’s currently a private method called rotate_quotes which handles finding either the next or previous quote and running the animation. I’m guessing the public method would be along these lines.
May 31st, 2011 Cory Schires
Cory,
I have been trying this:
$(‘ul#quotes’).quote_rotator();
var thisId = $(this).attr(“id”);
$(‘ul#who-said .’ + thisId).each(function() {
$(this).click();
});
But it doesnt seem to be working. Any ideas?
May 31st, 2011 Name
May 30th, 2011
JonSure. Here’s how I’m envisioning it. The plugin would expose a public method called ‘rotate_to’. The API would look like:
$(‘ul#quotes’).quote_rotator(‘skip_to’, $(‘li#noam_chomsky’) )
Getting that part working will require modifying the plugin source code along the lines specified in this plugin template: (
http://stefangabos.ro/jquery/jquery-plugin-boilerplate/?utm_source=javascriptweekly&utm_medium=email).
The logic for what happens inside the ‘rotate_to’ function would closely resemble what’s already being done inside an existing private function called ‘rotate_quotes’. No more changes would be need to be made in the plugin.
Once exposed, how people use it is entirely up to them. So, for example, adding the click functionality you described might look like this:
Or abstracted, it might look like:
If you get stuck send me a gist on github. Hope that helps!
Reply
June 3rd, 2011
Cory SchiresThanks for sharing! I was having some of the same rendering issues with IE that were listed above and I even notice a difference in your demo. The problem is more pronounced with larger colored text so you won’t be able to notice it as much on your demo. I am going to revisit this problem towards the end of this week but the following seems to have fixed the fade in.
next_quote.fadeIn(‘slow’, function() {
this.style.removeAttribute(‘filter’);
});
Reply
@John
I’ll filed an issue on github: https://github.com/coryschires/quote-rotator/issues/ Will have a look when I get a chance.
Thanks!
June 7th, 2011 Cory Schires
The code I tried yesterday worked perfectly on IE but died on Firefox and ChThe above code should only be executed if it is IE otherwise the code original code should be executed.
If IE
next_quote.fadeIn(‘slow’, function() {
this.style.removeAttribute(‘filter’);
});
else
next_quote.fadeIn(1000);
I still plan on looking at this towards the end of the week to see if I can smooth out the fade in and fade out while those events are occurring. The fix above makes the text readable after the fade in occurs.
June 8th, 2011 John Friedman
June 7th, 2011
John FriedmanWorks well for what I need. I did however add a few callbacks to it.
I added on_rotating and on_rotated. on_rotating passes back the active node and the next node as event arguments. The need for this is due to the fact I am resizing the iframe and parent container when the quote size changes.
shoot me an email if you would like me to shoot you the code.
Reply
July 20th, 2011
JTHi Cory – thanks for the awesome snippet!
After trying many many MANY different options, I used yours to rotate the testimonials on the 15 Kilo Coffee Roasters website (http://15kilo.com). The code is implemented in 4 different places on the site (2 different rotation lengths, solved by duplicating the JS file) as well as using PageLime CMS in the backend to add and subtract list items to be rotated.
Cheers,
Chris
Reply
Awesome. Glad it worked for you.
October 6th, 2011 Cory Schires
October 5th, 2011
ChrisHi again Cory,
I’ve come across a bug that seems to be appearing only in Chrome, and am wondering if you’ve seen anything like it before? If I have http://15kilo.com open in one tab, and am browsing on another site in another tab during a quote transition. When I return to 15 Kilo, there will be no quote displayed (div will be empty), for approximately the duration of a quote, when the next quote will then fade in. Sometimes, two will even display at once.
Any insight would be helpful.
Thanks!
Reply
Hm. That sounds crazy. But I don’t doubt it happened, if you saw it. I have no immediate insight. I’d just google stuff like: javascript deselected tab chrome. See what comes up. Lemme know if you discover anything, as I’d like to add a bug fix if you figure it out.
October 6th, 2011 Cory Schires
October 6th, 2011
ChrisFirst of all, great plugin. Ive been implementing this for awhile now. In IE9 I have some strange behavior with large colored text (as described above). I’ll try those fixes in a second.
Secondarily though, I have a MUCH larger problem. I have this implemented in a div. Regardless of browser (IE9, Firefox 7, Chrome) – if I go to a different tab, then come back about 10 minutes later, the space where quotes should be is completely blank. Then after some time (maybe double the rotation_speed) it shows a bunch of the LI elements I have all at once. Then for each rotation_speed, one of them gets removed and it gradually shrinks over time.
Seems as though being in a separate tab it doesn’t reinitialize correctly or something when it returns. Since one of them disappears after rotation_speed I assume that when the tab is out of focus LI’s are not being set as inactive somehow. Then all active ones show, and each rotation_speed after that its correctly marked as inactive.
–
Not sure if this was submitted and needs to be approved first. Wanted to mention that similar behavior occurs for me in your demo as well.
Reply
Yeah. You’re now the second person to raise this issue. I’ll have a look at it but it’s gonna be around a week before I get a chance. Thanks for helping me find this bug.
October 13th, 2011 Cory Schires
October 11th, 2011
RipHi Cory,
I absolutely love the quote rotator and have an immediate usage for it. The issue I’m having however, and not too sure how to implement it; is one of randomization of quotes. I noticed you have made the inclusion for the 1st quote to be randomized, (which would in fact take care of the issue) if I had quotes listed by multiple authors (which in this instance I do) but a vast majority are presented by the same author.
My question is, is there a randomization method that can at random select a quote rather than having the 1st quote randomized and those subsequently listed displayed? So basically each quote that displays is in fact a random quote.
I would appreciate some input at your earliest convenience and again, GREAT plugin.
Shane
Reply
@shane
Glad you like the plugin. Unfortunately, there’s no support for always randomizing quotes. Also, since it’s an unusual use case, I’m reluctant to add it to the core plugin. However, you could hack the plugin pretty easily to make everything random. I would try to overwrite the ‘get_next_quote’ function to pull a random quote from the list rather than shifting forward as it currently does.
Send me a note if you have any troubles.
October 13th, 2011 Cory Schires
October 13th, 2011
Shane SteeleGreat plugin! But I’m having the same problem as Kevin above. I have the quotes rotating near the top of the page. And when I scroll down to the bottom, the page jumps back up to the quote rotator box each time the quote changes. It’s not changing the page size, as someone suggested, because I have the height set fixed. Any thoughts?
Reply
@Nik
Guessing this is either…
a) You need to explicitly set a height on the ol/ul that that’s wrapping the quotes (as discussed above)
b) You have something weird going on with anchor links.
If I had to guess, your problem is A. It seems to trip lots of people up.
March 10th, 2012 Cory Schires
Worked like a charm, thanks! And thanks for such a quick reply.
March 10th, 2012 Nik
March 10th, 2012
NikHere’s what my list styling looks like, if that helps:
ul.quotes li {
padding: 8px;
background-color: #B4CEE5;
width: 150px;
height: 240px;
top: 0px;
left: 0;
-webkit-border-radius: 0px 20px 20px 0px;
border-radius: 0px 20px 20px 0px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
border: solid #000 4px;
border-left: 0;
}
Reply
First, try setting the height on `quotes.ul` rather than the `li`.
Also, as a test, set the height to something very high (e.g. 1000px) and see if that fixes the issue. Of course, it will mar your layout but that will tell you if it’s height related.
I’ll be online for the next few hours. Let me know how it goes.
March 10th, 2012 Cory Schires
I’m very new to HTML. Is there a way to keep my box styling from fading out as well during each quote transition and isolate it to just the quotes? I’ve tried moving the styling to the ul wrapping. I’ve tried wrapping the li items in a div. I’m kinda clueless. For now, I just changed the animate speed to 0. But I’d really prefer the fade effect.
March 10th, 2012 Nik
Sounds like you’re on the right track.
If you looking for the styles to persist and only the words change/fade. Then, you need to apply those styles to the `ul/ol` rather than the `li`.
While, I’m at it. That CSS you pasted in looks sorta odd. Why the transitions? They shouldn’t be needed. Also, the `top` and `left` seem odd unless you’re absolutely positioning something. The rest of the stuff I’d move to the `ul/ol`.
March 10th, 2012 Cory Schires
I added the transitions because I added a hover effect that grows out the box to show the longer version of the quote.
March 10th, 2012 Nik
March 10th, 2012
NikUnfortunately because of complexity of growing out the box on hover, I think that’s where I’m having issues. When I moved the styling to the ul, on hover the li and ul boxes would not align. So it would add another box just a little offset below it and then grow that out. I couldn’t for the life of me figure out how to align the two elements.
Reply
You should set the `ul` height to be at least as tall as your tallest quote (i.e. `li`). That should fix the page jumping issue. Is that how you’re doing it?
March 10th, 2012 Cory Schires
Yes, your initial reply fixed that issue, thanks! I think I may have to give up on the fade effect tho because of all of the complexity I added w/ the hover effect.
March 10th, 2012 Nik
Cool. It’s hard for me to know what you mean by the hover effect w/o seeing it in action. But that sounds smart. If it’s causing too much complexity, it’s probably not worth it. After all, it ‘s just a visual flourish.
March 10th, 2012 Cory Schires
March 10th, 2012
NikYa, it looks great either way. I’m working on a friend’s site. [www.24-7transcripts.com] Hopefully it’ll be up and running shortly. But then again, given how complex I like to make things, maybe not! lol
Reply
March 10th, 2012
NikIs there a way to stylize the buttons and place them where I want? They’re currently floating outside of my box and I’d like to contain them inside.
Reply
March 17th, 2012
NikHi Cory, I’ve tested your script but on my system, Win 7 64 Bit with IE 9 I can just see the list of all the divs, no rotation at all. What am I missing? Thanks for reply.
Reply
Can you send me a gist or something so that i can see your code?
April 23rd, 2012 Cory Schires
April 22nd, 2012
FedericoHey Cory, I’m getting an ie9 issue as well, infact when viewing your demo site(http://coryschires.github.com/quote-rotator/) isn’t working in ie9 either. Just letting you know, if you figure out anything I’m sure you’ll let us know.
Reply
June 2nd, 2012
Scott