Rotating Quotes with Text Fading

Papa · 12-10-2007, 04:45 PM

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.

Code:

<script language="JavaScript">
function rotateEvery(sec)
{
	var Quotation=new Array()

	// QUOTATIONS
	Quotation[0] = '...The big brown fox jumped over the tall fence';
	Quotation[1] = '...The wind is blowing cold snow across the dark black road';
	Quotation[2] = '...Fall has many colors and black is not one of them';
	Quotation[3] = '...the blue bird lives in the big red barn';
	Quotation[4] = '....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';
	Quotation[5] = 'Sixth quotation';
	Quotation[6] = 'You can add <b>as many</b> quotations <b>as you like</b>';

	var which = Math.round(Math.random()*(Quotation.length - 1));
	document.getElementById('textrotator').innerHTML = Quotation[which];
	
	setTimeout('rotateEvery('+sec+')', sec*5500);
}
</script>

Philip M · 12-10-2007, 05:50 PM

Try this:-

<DIV id=textrotator style="FONT: 16px arial bold; WIDTH: 100%; COLOR: rgb(255,255,255)"></DIV>

<script type = "text/javascript">

var hexinput = 255; // initial color value.

quotation = new Array()
quotation[0] = "...The big brown fox jumped over the tall fence"
quotation[1] = "...The wind is blowing cold snow across the dark black road"
quotation[2] = "...Fall has many colors and black is not one of them"
quotation[3] = "...the blue bird lives in the big red barn"
quotation[4] = "...Mr. Grant really believes that the Bull’s skills, which are widespread"
quotation[5] = "...Sixth quotation"

function fadingtext(){
if(hexinput >0) {
hexinput -=11; // increase color value
document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
setTimeout("fadingtext()",200); // 200ms per step
}
else {
hexinput = 255; //reset hex value
}
}

function changetext(){
if(!document.getElementById){return}

var which = Math.round(Math.random()*(quotation.length - 1)); //select random quote
document.getElementById("textrotator").innerHTML = quotation[which]; // and display it

fadingtext();

setTimeout("changetext()",5000); // five seconds
}

window.onload = changetext();

</script>

Trinithis · 12-10-2007, 07:22 PM

Philip M, I tried your code on both IE6 and Fx3, and it did not work.

Here's my take on the problem:

rotate.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Test</title>
</head>

<body><div>
  <div id="textrotator" style="width:100%;">abcdefg</div>
  <script type="text/javascript" src="TimeoutChainer.js"></script>
  <script type="text/javascript" src="fade.js"></script>
  <script type="text/javascript" src="rotate.js"></script>
</div></body>
</html>

TimeoutChainer.js
http://trinithis.awardspace.com/Time...eoutChainer.js

fade.js

Code:

function setOpacity(el, value) {
  el.style.opacity = value / 100;
  el.style.filter = "alpha(opacity=" + value + ")";
}

function fade(el, interval, deltaOpacity /*, init*/) {
  if(!el.fader)
    el.fadeValue = arguments.length > 3
      ? arguments[3]
      : 100;
  else
    el.fader.clear();
  el.fader = new TimeoutChainer({
    context: el,
    callback: setOpacity,
    interval: interval,
    numTimes: el.fadeValue,
    args: [el, {
      valueOf: function() {
        el.fadeValue -= deltaOpacity;
        if(el.fadeValue < 0) el.fadeValue = 0;
        return el.fadeValue;
      }
    }]
  });
  return el.fader;
}

function unfade(el, interval, deltaOpacity /*, init*/) {
  if(!el.fader)
    el.fadeValue = arguments.length > 3
      ? arguments[3]
      : 100;
  else
    el.fader.clear();
  el.fader = new TimeoutChainer({
    context: el,
    callback: setOpacity,
    interval: interval,
    numTimes: 100 - el.fadeValue,
    args: [el, {
      valueOf: function() {
        el.fadeValue += deltaOpacity;
        if(el.fadeValue > 100) el.fadeValue = 100;
        return el.fadeValue;
      }
    }]
  });
  return el.fader;
}

Code:

function rotateQuotes() {
  var q = rotateQuotes.quotes;
  q = q[Math.floor(Math.random() * q.length)];
  var tr = document.getElementById("textrotator");
  var uf = unfade(tr, 10, 1, 0);
  tr.innerHTML = q;
  new TimeoutChainer({
    callback: function() {
      var f = fade(tr, 10, 1);
      new TimeoutChainer({
        callback: rotateQuotes,
        runAfter: f
      });
    },
    delay: 2000,
    runAfter: uf
  });
}

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();

Philip M · 12-10-2007, 07:37 PM

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)

<DIV id="textrotator" style="FONT: 16px arial bold; WIDTH: 100%; COLOR: rgb(255,255,255)"></DIV>

<SCRIPT type = "text/javascript">

var hexinput= 255; // initial color value.

quotation = new Array();
quotation[0] = "...The big brown fox jumped over the tall fence"
quotation[1] = "...The wind is blowing cold snow across the dark black road"
quotation[2] = "...Fall has many colors and black is not one of them"
quotation[3] = "...the blue bird lives in the big red barn"
quotation[4] = "...Mr. Grant really believes that the Bull’s skills, which are widespread"
quotation[5] = "...Sixth quotation"

function fadingtext(){
if(hexinput>0) {
hexinput -=11; // increase color value
document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.
setTimeout("fadingtext()",200);
}
else {
hexinput=255; //reset hex value
}
}

function changetext(){
if(!document.getElementById){return}

var which = Math.round(Math.random()*(quotation.length - 1)); // randomly select a quote
document.getElementById("textrotator").innerHTML=quotation[which]; // and dispaly it

fadingtext();

setTimeout("changetext()",5000); // 5 seconds
}

window.onload=changetext();

</script>

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

Trinithis · 12-10-2007, 07:57 PM

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

As a side note to the OP, the style="width:100%;" 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 . . .

Papa · 12-13-2007, 04:02 AM

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

Papa · 12-13-2007, 04:34 AM

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

Code:

<div id="top">
	<blockquote class="withquote">
			<p class="withunquote"><span style="color: #4682b4;"><strong><script src="text_rotate.js" type="text/javascript"></script></strong></span>
    </blockquote></p></withunquote>
    	<h5>- Bob Jones, Midnight Press</h5></div>

Papa · 12-13-2007, 04:40 AM

awesome.. learning by trying stuff out really helps... i got it to show..

Trinithis · 12-13-2007, 06:15 AM

Glad you got it to work. Just a heads up: Java and Javascript are entirely different despite having the related names.

Papa · 12-13-2007, 11:46 AM

Quote:

Originally Posted by Trinithis

Glad you got it to work. Just a heads up: Java and Javascript are entirely different despite having the related names.

yea sorry about. Trinithis, I've started to look at your code as well and I've noticed that philip brings up font "style" particularly color ... with the following code:

Code:

document.getElementById("textrotator").style.color="rgb("+hexinput+","+hexinput+","+hexinput+")"; // Set color value.

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"

Trinithis · 12-13-2007, 10:57 PM

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

rotate.js

Code:

function rotateText(el, textGroup) {
  setOpacity(el, 0);
  var t = rotateText.texts[textGroup];
  var t = t[Math.floor(Math.random() * (t.length - 1))];
  el.innerHTML = t;
  unfadeText(el, textGroup);
}
rotateText.texts = {
  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",
    "...Sixth quotation"
  ],
  authors: [
    "Mark Twain",
    "Charles Dickens",
    "Edgar Allen Poe"
  ],
  restaurants: [
    "Burger King",
    "McDonalds",
    "Taco Bell",
    "Wendy's"
  ]
};

function setOpacity(el, value) {
  el.style.opacity = value / 100;
  el.style.filter = "alpha(opacity=" + value + ")";
}

function unfadeText(el, tg) {
  var v = el.style.opacity * 100 + 1;
  if(v > 100) {
    setOpacity(el, 100);
    setTimeout(bundleFunction(null, fadeText, [el, tg]), 2000);
    return;
  }
  setOpacity(el, v);
  setTimeout(bundleFunction(null, unfadeText, [el, tg]), 10);
}

function fadeText(el, tg) {
  var v = el.style.opacity * 100 - 1;
  if(v < 0) {
    setOpacity(el, 0);
    rotateText(el, tg);
    //or... setTimeout(bundleFunction(null, rotateText, [el, tg]), NUMBER);
    return;
  }
  setOpacity(el, v);
  setTimeout(bundleFunction(null, fadeText, [el, tg]), 10);
}

function bundleFunction(context, func, args) {
  context = context || null;
  if(typeof func == "string" && context)
    func = context[func];
  if(!args)
    args = [];
  else if(!(args instanceof Array))
    args = [args];
  return function() {
    return func.apply(context, args);
  };
}

rotate.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Rotate</title>
  <script type="text/javascript" src="rotate.js"></script>
</head>

<body><div>
  <div style="width: 100%; background-color: #000; color: #ccf;" id="quotes"></div>
  <div style="width: 100%; background-color: #fff; color: #000;" id="authors"></div>
  <div style="width: 100%; background-color: #0a0; color: #ff0;" id="restaurants"></div>
  <script type="text/javascript">
    rotateText(document.getElementById("quotes"), "quotes");
    rotateText(document.getElementById("authors"), "authors");
    rotateText(document.getElementById("restaurants"), "restaurants");
  </script>
</div></body>
</html>

Papa · 12-14-2007, 12:28 AM

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.

Papa · 12-15-2007, 01:27 PM

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 big brown fox jumped over the fence"
- Little Red Riding Hood, 2007

Code:

rotateText.texts = {
  quotes: [
    "<strong>...The big brown fox jumped over the fence</strong>",
    "<strong>...The wind is blowing cold snow across the dark black road JOHN</strong>",
    "<strong>...Fall has many colors and black is not one of them POE</strong>",
    "<strong>...the blue bird lives in the big red barn</strong>",
    "<strong>...Mr. Grant really believes that the Bull’s skills, which are widespread</strong>",
    "<strong>...Sixth quotation</strong>"
  ],
  authors: [
    "- Little Red Riding Hood, 2007",
    "John",
    "POE"
  ],

Trinithis · 12-15-2007, 06:24 PM

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

fineartist99 · 07-15-2010, 09:01 PM

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.