Hey guys. I've got a simple javascript that rotates quotes randomly. It's very basic, so I wanted to add a fade in/ fade out transition to the text to make it more appealing. I've researched around the net and have had trouble finding sources to help me out. Here is the code.

rotateQuotes.quotes = [
"...The big brown fox jumped over the tall fence",
"...The wind is blowing cold snow across the dark black road",
"...Fall has many colors and black is not one of them",
"...the blue bird lives in the big red barn",
"....Mr. Grant really believes that the Bull’s skills, which are widespread, are utterly godlike even though he acts like he doesn’t think so",
"sixth quotation",
"You can add <b>as many</b> quotations <b>as you like</b>"
];

rotateQuotes();

12-10-2007, 07:37 PM

Philip M

Strange, it works fine for me! With respect your script seems overly-complicated.

But here it is again in case I made a typo when I improved it:-

(EDIT - I see that I forgot to change the id = "fader" to "textrotator" the id as used by Papa)

Note that as the quote is randomly selected the same quote may appear twice in succession

12-10-2007, 07:57 PM

Trinithis

Alright, I discovered the issue with the code: It needed a body tag. Btw, your id attribute should be in quotes for forward compatability.

As for my script, I had written the TimeoutChainer a week or so back, and I decided I might as well take advantage of the code I had already written :D

As a side note to the OP, the style="width:100&#37;;" attribute needs to be there for an IE bug. You can change the % number though, and if you want, you can play around with the numbers in rotate.js and through trial and error find out what works best for you.

And if you really need it, I can explain my code, but it might (or might not) take a while for me to do so. Finals this week . . .

12-13-2007, 04:02 AM

Papa

Quote:

Originally Posted by Trinithis

Alright, I discovered the issue with the code: It needed a body tag. Btw, your id attribute should be in quotes for forward compatability.

.... . .

Thanks guys.. sorry havent been paying attention to the thread.. i was out of town on family business.. moving the sister.. fun i know.. ill have to try these out tomorrow.. i did try yours philip but was having some trouble getting it to work.. or display at all on the page.. ill have to play with both scripts... thanks again.. means a lot that you all are helping a newb like me:D

12-13-2007, 04:34 AM

Papa

Okay. I'm going to try your code again Philip, then the other so I can try and learn. I've placed the java code in its own .js file and called up the javascript in my header of my html page like the other javascript scripts i have... but i am having trouble getting the code to display in the body of the html page.. where i want the code to show its just showing nothing.. blank.. i believe i am just being stupid and cant see what i am doing wrong.. here is where i am trying to display the code... ive tried different things to call up the script.. but none seem to work.. i must be doing something obviously wrong.... i know the code i left in below is wrong.. i just wanted soemthing there so you all could see what im talking about

Where i assume "hexinput" is where you place your hex values. Where in you code can I change color? Thinking of having a text start as the same background color, white, then go into my color of "blue steel" which is "#4682b4"

12-13-2007, 10:57 PM

Trinithis

For a less flexible, but easy(er) to understand code that uses true opacity rather than color changes:

Thanks again for the reply Trinithis. I copied your code exactly, into their respective .js and .html files. Nothing happens when i load the rotate.html file into firefox.

12-15-2007, 01:27 PM

Papa

Alright. I got the script to work. I added some minor styling edits to the code. How can I link an author to a quote. Right now they authors and quotes are appearing independently of one another. See below example.

The simplest way would be to add the author names directly into the quotes array.

07-15-2010, 09:01 PM

fineartist99

Does anyone know how to include images into this feature?

Since java script files don't allow images I was wondering if anyone knew how I could include images to go along with the quotes so that they as well fade in and out and rotate like the simple text. Thanks in advance.