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 Coder
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How can I make this text rotator random?

    I pulled a simple Javascript snippet that performs a simple fade in/out quote rotator.

    Here is a demo of it: Demo

    Right now it runs through the quotes as I input them by use of DIVs

    Code:
    <div id="quotes">
             <div>Before turning to those moral and mental aspects of the matter which
    present the greatest difficulties, let the inquirer begin by mastering
    more elementary problems.
             </div>
     
             <div>How often have I said to you that when you have eliminated the
    impossible, whatever remains, however improbable, must be the truth?
             </div>
    </div>
    Here is the Javascript that runs it:

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/
    jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
     $(document).ready(function()
     {
         setupRotator();
     });
     function setupRotator()
     {
         if($('.textItem').length > 1)
         {
             $('.textItem:first').addClass('current').fadeIn(1000);
             setInterval('textRotate()', 3000);
         }
     }
         function textRotate()
         {
             var current = $('#quotes > .current');
             if(current.next().length == 0)
             {
                 current.removeClass('current').fadeOut(1000);
                 $('.textItem:first').addClass('current').fadeIn(1000);
             }
             else
             {
                 current.removeClass('current').fadeOut(1000);
                 current.next().addClass('current').fadeIn(1000);
             }
         }
    </script>
    How can I modify this script to make it pull a quote randomly?
    I tried changing current.next() to current.Math.random() but no luck.

    Thanks for the help!
    Last edited by The Chef; 07-11-2012 at 01:52 AM.

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Anyone?

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,239
    Thanks
    203
    Thanked 2,554 Times in 2,532 Posts
    No idea, I don't use jQuery. You might do better if you posted in the jQuery forum. Try this instead.

    Code:
    <html>
    <head>
    </head>
    
    <body onload = "changetext()">
    
    
    <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.
    
    var quotation = [];
    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 Bullhas skills, which are widespread"
    quotation[5] = "...Sixth quotation"
    
    
    Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
    while (s.length) this.push(s.pop());
    return this;
    }
    quotation.shuffle();  // shuffle the quotations
    
    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
    }
    }
    
    var count = 0;
    var len = quotation.length;
    function changetext(){
    document.getElementById("textrotator").innerHTML=quotation[count];  // and display it
    count ++;
    if (count >len-1) {
    quotation.shuffle();  // shuffle the quotation array again
    count = 0;  // reset the counter
    }
    if (count >len-1) {count = 0}
    fadingtext();
    
    setTimeout("changetext()",5000);
    }
    
    //window.onload=changetext();  // if not in <BODY onload>
    
    </script>
    
    </body>
    </html>
    "A good reputation can take years to aquire, a bad one takes a few seconds"
    Last edited by Philip M; 07-11-2012 at 05:31 PM. Reason: Noticed typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks! I'll give this a shot. And woops - forgot this was jQuery.


  •  

    Posting Permissions

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