CodingForums.com
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Rotating Quotes with Text Fading (http://www.codingforums.com/showthread.php?t=129429)

Papa 12-10-2007 04:45 PM
Rotating Quotes with Text Fading
 
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 :D

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 (Post 638216)
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 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 (Post 639109)
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
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.


All times are GMT +1. The time now is 07:17 AM.
Page 1 of 2 1 2
Show 40 post(s) from this thread on one page

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.