...

View Full Version : Rotating Quotes with Text Fading



Papa
12-10-2007, 05: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.


<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, 06:50 PM
Try this:-

<DIV id=textrotator style="FONT: 16px arial bold; WIDTH: 100&#37;; 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, 08: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


<!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&#37;;">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/TimeoutChainer/TimeoutChainer.js

fade.js


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;
}




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, 08: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&#37;; 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, 08: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 :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 . . .

Papa
12-13-2007, 05:02 AM
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

Papa
12-13-2007, 05: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


<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, 05:40 AM
awesome.. learning by trying stuff out really helps... i got it to show..

Trinithis
12-13-2007, 07: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, 12:46 PM
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:


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, 11:57 PM
For a less flexible, but easy(er) to understand code that uses true opacity rather than color changes:

rotate.js


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


<!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, 01: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, 02: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



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, 07:24 PM
The simplest way would be to add the author names directly into the quotes array.

fineartist99
07-15-2010, 10: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.

fineartist99
07-15-2010, 10:15 PM
go to this page and view source, there is my and maybe your answer

http://www.caodesigns.com/blog/code-examples/quote-rotator/index.html

durangod
12-30-2012, 04:00 PM
From the previous page i used trinithis code and then removed some divs and groups that i did not need.

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

here is what i have:



<!-- added for text rotator -->
<script type="text/javascript">

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: ["test1...",
"test2...",
"test3...",
"test4...",
"test5..."]
};

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]), 10000); /* number of seconds, this is 10 sec */
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);
};
}

</script>
<!-- end text rotator -->




then on the page i have





<div style="font-size:small;margin:0px 10px 0px 10px;" id="quotes"></div>

<script type="text/javascript">
rotateText(document.getElementById("quotes"), "quotes");
</script>




I used this and it works, but since im not using all groups as in the original, i dont know if i need the groups configured and value passed? I have been watching this now for over an hour and restarted it several times during to see if the loop changed.

Im seeing test 1 thru 4 show fine, test 4 repeats more than others and many times it repeats right after itself, i counted 3x in a row once.
Test 5 never shows, i have not seen it once in over an hour of testing so not sure whats up with that.

Is there an easy mod so that it does not repeat the quote it just showed? And do you see anything that would cause test5 not to show at all? :)

Thanks



Another update here. I went from 5 to 11 options thinking there were not enough to stop the consecutive repeats and Changed this from math floor to math round and that seems to have fixed the issue with test5



var t = group[Math.round(Math.random() * (group.length - 1))];


UPDATE i think i got it..But who knows. This should stop the consecutive random
I change t to group maybe that will help.




//grab current text
var sametext = document.getElementById('quotes').innerHTML;

//get new text
var group = rotateText.texts[textGroup];
var t = group[Math.round(Math.random() * (group.length - 1))]; //chose round on this one

//if they are the same then get another one
if(sametext == t)
{
//alert("text is the same" + sametext);
var group = rotateText.texts[textGroup];
var t = group[Math.floor(Math.random() * (group.length - 1))]; //chose floor for this one
}//close if




You can see the alert trap that i added (commented out now) that shows me the current text on the page and with that i verified that t (the new output) is different once the alert is trapped. So it is working and it does grab a dif value if its the same.
Ok im done with this, sorry to do some an old thread but i didnt want to keep refering to it.

Thanks...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum