Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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>
    Last edited by Philip M; 12-10-2007 at 07:49 PM. Reason: Improvement/Correct Error

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    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&#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/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();

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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
    Last edited by Philip M; 12-10-2007 at 08:01 PM.

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    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&#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 . . .

  • #6
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Trinithis View Post
    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

  • #7
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #8
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    awesome.. learning by trying stuff out really helps... i got it to show..

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    Glad you got it to work. Just a heads up: Java and Javascript are entirely different despite having the related names.

  • #10
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Trinithis View Post
    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"

  • #11
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    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>

  • #12
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #13
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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"
      ],
    Last edited by Papa; 12-15-2007 at 01:33 PM.

  • #14
    Regular Coder
    Join Date
    Jun 2007
    Location
    USA
    Posts
    527
    Thanks
    26
    Thanked 74 Times in 72 Posts
    The simplest way would be to add the author names directly into the quotes array.
    Trinithis

  • #15
    New Coder
    Join Date
    Jul 2010
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •