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.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change javascript text rotator from random to sequence

    I found this code online and modified it and it works fine. Now I want to change it so that it will rotate the text quotes in sequence, rather than randomly. I have only the barest knowledge of JS, so the more literal and explicit you can be, the more it will help! Thanks in advance!

    Here's the code:

    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: [
        " '1-Neil Bjorklund's lyrics are compelling, intelligent, a cut above the usual singer-songwriter fare' -- Victory Music Review",
        " '2-Neil has a poet's talent when it comes to songwriting, creating images that linger long after the music ends' -- Folk and Acoustic Music Exchange",
        " '3-This inner-traveller and consummate musician will captivate you and draw you in' -- Kobi Lucas, KLCC-FM",
    
      ]
    };
    
    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);
    	  //number below in red is how long the fully black text lasts
        setTimeout(bundleFunction(null, fadeText, [el, tg]), 8000);
        return;
      }
      setOpacity(el, v);
        //number below in red is how long the fade 1n lasts
      setTimeout(bundleFunction(null, unfadeText, [el, tg]), 20);
    }
    
    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);
      //number below in red is how long the fade out lasts
      setTimeout(bundleFunction(null, fadeText, [el, tg]), 5);
    }
    
    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);
      };
    }
    Last edited by VIPStephan; 06-03-2012 at 10:21 PM. Reason: added code BB tags

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    881
    Thanks
    0
    Thanked 115 Times in 114 Posts
    Code:
    var Tnum=-1;
    function rotateText(el, textGroup) {
      setOpacity(el, 0);
      var t = rotateText.texts[textGroup];
      Tnum=((Tnum+1)<t.length?Tnum+1:0);
      var t = t[Tnum];
      el.innerHTML = t;
      unfadeText(el, textGroup);
    }

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Just change this:
    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);
    }
    to this:
    Code:
    var currentText = 0;
    function rotateText(el, textGroup) {
      setOpacity(el, 0);
      var t = rotateText.texts[textGroup];
      el.innerHTML = t[currentText++];
      unfadeText(el, textGroup);
      currentText %= t.length;
    }
    EDIT: Teach me not to refresh first. Lerura's answer and mine are really the same. I think using the modulo operator (%) to limit the incrementing number (currentText in my code, Tnum in his) is cleaner, but both do the same thing.
    Last edited by Old Pedant; 06-03-2012 at 11:46 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thank You!

    Problem solved! Thank you for both replies. Much appreciated.


  •  

    Posting Permissions

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