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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Random quote generator

    Hi so I have a working random quote generator for my site, and I'm trying to figure out a way to make it fade in and possible fade out then change to another quotation

    <div class="content">

    <p class="indented" style="font-size:80px"><font color="#FFFFFF">
    <script type-"text/javascript">
    var Quotation=new Array() // do not change this!

    Quotation[0] = "Keep Up Your Bright Swords For The Dew Will Rust Them";
    Quotation[1] = "Show Me A Hero & I'll Write You A Tragedy";
    Quotation[2] = "Words, As Is Well Known, Are The Great Foes Of Reality";
    Quotation[3] = "Actors Are Good Liars; Writers Are Good Liars With Good Memories";
    Quotation[4] = "The Enemy Of Art Is The Absence Of Limitations";
    Quotation[5] = "The Best Fiction Is Far More True Than Any Journalism";
    Quotation[6] = "Words Are Free, Order Is Extra";
    Quotation[7] = "There Is Nothing To Writing. All You Do Is Sit Down At A Typewriter & Bleed";
    Quotation[8] = "In A Mad World, Only The Mad Are Sane";
    Quotation[9] = "My Hunger Is Always There";


    // ======================================
    // Do not change anything below this line
    // ======================================
    var Q = Quotation.length;
    var whichQuotation=Math.round(Math.random()*(Q-1));
    function showQuotation(){document.write(Quotation[whichQuotation]);}
    showQuotation();


    </script></font></p>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,480
    Thanks
    0
    Thanked 635 Times in 625 Posts
    You will need a more modern script to start with since document.write can only run before the page loads (and so has been obsolete since Netscape 4 died since more modern browsers provide better ways to do interact with the page that allow updating after the page has loaded).

    See http://www.felgall.com/jstip95.htm for a script that will display random quotes on the page and replace them every so often while the page is still open. It doesn't have the fade in/out that you want but it does the rest of what you want and could have the fade added to it - whereas the script you currently have can't even swap to a new quote after loading the page.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Try this. You will have to substitute your own quotes. The script fades the text in, but it is getting late and I do not have the time to include the very similar script to fade the text out:-

    Code:
    <script type = "text/javascript">
    
    hex=0; // Initial color value.
    
    function fadetextout(){ 
    if (hex<255) { // if color is not white yet
    hex+=5; // increase color lightness
    document.getElementById("theQuote").style.color="rgb("+hex+","+hex+","+hex+")";
    setTimeout("fadetextout()",75); 
    }
    else {
    hex=0;  //reset hex value
    }
    } 
    </script>
    You can probably add this feature yourself.

    Code:
    <html>
    <head>
    </head>
    <body>
    
    <div id = "theQuote"></div>
    
    <script type = "text/javascript">
    
    window.onload = function() {
    showNext();
    setInterval(showNext,5000);   // 5 seconds
    }
    
    
    var quoteArray = [];
    quoteArray[0] = "I have such poor vision I can date anybody.";
    quoteArray[1] = "Hell hath no fury like a bureaucrat scorned.";
    quoteArray[2] = "Common sense is the collection of prejudices acquired by age eighteen. (Albert Einstein)";
    quoteArray[3] = "Before I met my husband, I'd never fallen in love, though I'd stepped in it a few times.";
    quoteArray[4] = "The cure for boredom is curiosity. There is no cure for curiosity.";
    quoteArray[5] = "Delete not, lest you, too, be deleted.";
    quoteArray[6] = "The height of cleverness is to be able to conceal it.";
    quoteArray[7] = "You're only given a little spark of madness. You mustn't lose it.";
    quoteArray[8] = "Love the river's \"beauty\", but live on a hill.";  // note escape quotes
    quoteArray[9] = "A man's respect for law and order exists in precise relationship to the size of his paycheck.";
    
    function randOrd(){return (Math.round(Math.random())-0.75); }    // Instead of using 0.5 in that "random" comparison (which has a strong bias toward maintaining the original order) use 0.75 instead (which only has a very slight bias).
    
    
    quoteArray.sort(randOrd);
    
    var count = 0;
    
    function showNext() {
    document.getElementById("theQuote").innerHTML = quoteArray[count];
    count ++;
    if (count > quoteArray.length-1) {
    quoteArray.sort(randOrd);  // shuffle the array again
    count = 0;
    }
    fadetextin();
    }
    
    var hex = 255; // Initial color value.
    
    function fadetextin(){ 
    document.getElementById("theQuote").style.visibility = "visible";
    if( hex > 0) { //If color is not black yet
    hex -=5; // increase color darkness
    document.getElementById("theQuote").style.color="rgb("+hex+","+hex+","+hex+")";
    setTimeout("fadetextin()",75); 
    }
    else {
    hex = 255;  // reset hex value
    }
    } 
    
    </script>
    
    
    </body>
    </html>
    I may not be perfect, but parts of me are excellent.
    Last edited by Philip M; 02-21-2013 at 10:14 PM.

    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 to the CF scene
    Join Date
    Feb 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool thanks guy. Still trying to figure out the fade out, but looks good!

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,734
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Here you are, with fade in/fade out as you requested.

    Code:
    <html>
    <head>
    </head>
    <body>
    
    <div id = "theQuote"></div>
    
    <script type = "text/javascript">
    
    window.onload = function() {
    showNext();
    setInterval(showNext,10000);   // 10 seconds
    }
    
    var quoteArray = [];
    quoteArray[0] = "I have such poor vision I can date anybody.";
    quoteArray[1] = "Hell hath no fury like a bureaucrat scorned.";
    quoteArray[2] = "Common sense is the collection of prejudices acquired by age eighteen. (Albert Einstein)";
    quoteArray[3] = "Before I met my husband, I'd never fallen in love, though I'd stepped in it a few times.";
    quoteArray[4] = "The cure for boredom is curiosity. There is no cure for curiosity.";
    quoteArray[5] = "Delete not, lest you, too, be deleted.";
    quoteArray[6] = "The height of cleverness is to be able to conceal it.";
    quoteArray[7] = "You're only given a little spark of madness. You mustn't lose it.";
    quoteArray[8] = "Love the river's \"beauty\", but live on a hill.";  // note escape quotes
    quoteArray[9] = "A man's respect for law and order exists in precise relationship to the size of his paycheck.";
    
    function randOrd() {return (Math.round(Math.random())-0.75); }    // Instead of using 0.5 in that "random" comparison (which has a strong bias toward maintaining the original order) use 0.75 instead (which only has a very slight bias).
    
    
    quoteArray.sort(randOrd);
    
    var count = 0;
    
    function showNext() {
    document.getElementById("theQuote").innerHTML = quoteArray[count];
    count ++;
    if (count > quoteArray.length-1) {
    quoteArray.sort(randOrd);  // shuffle the array again
    count = 0;
    }
    
    fadetextin();  // fade te text in
    setTimeout(fadetextout,5000);  // and fade it out again after 5 seconds
    }
    
    var hexA = 255; // Initial color value.
    
    function fadetextin(){ 
    document.getElementById("theQuote").style.visibility = "visible";
    if (hexA > 0) { // if color is not black yet
    hexA -= 5; // increase color darkness
    document.getElementById("theQuote").style.color="rgb("+hexA+","+hexA+","+hexA+")";
    setTimeout("fadetextin()",75); 
    }
    else {
    hexA = 255;  // reset hexA value
    }
    } 
    
    var hexB = 0; // Initial color value.
    
    function fadetextout(){ 
    if (hexB < 255) { // if color is not white yet
    hexB += 5; // increase color lightness
    document.getElementById("theQuote").style.color="rgb("+hexB+","+hexB+","+hexB+")";
    setTimeout("fadetextout()",75); 
    }
    else {
    hexB = 0;  // reset hexB value
    }
    } 
    
    </script>
    
    
    </body>
    </html>

    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.


  •  

    Posting Permissions

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