www.webdeveloper.com
Results 1 to 9 of 9

Thread: Quote Timed Rotation w/forward/back

  1. #1
    Join Date
    Apr 2010
    Posts
    4

    Quote Timed Rotation w/forward/back

    I am looking for a simple timed text quote rotator that includes forward, pause and back controls. Ideally not requiring JQuery.

    Thx,
    Larry

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Arrow Some attempt please ...

    Quote Originally Posted by larryj24 View Post
    I am looking for a simple timed text quote rotator that includes forward, pause and back controls. Ideally not requiring JQuery.

    Thx,
    Larry
    If you cannot provide some sample code that is not working for you,
    at least post some sample quotations you wish to display.

    OR: Modify one of the many examples of a google search: 'javascript quote of the day'

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Something to try...

    Sample ...
    Code:
    <html>
    <head>
    <title>Timed Quotations</title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/showthread.php?t=228900
    
    var Quotes = [
      'Now is the time for all good men to come to the aid of their country',
      'Whatever the mind of man can conceive and believe, he can achieve',
      'You never get too old to learn a new way of being stupid',
      'Blessed are those who expect nothing for they shall not be disappointed',
      'Never squat with your spurs on. [Old cowboy proverb]',
      'Always drink upstream from the herd. ',
      'There are two ways to argue with a woman ... neither of them works.',
      'If you find yourself in a hole, the first thing to do is stop digging',
      'All looks yellow to a jaundiced eye.'	// NOTE: no comma after last entry
    ];
    
    var timerOn = false;
    var quoteAction;
    var QuotePtr = -1;
    
    function ShowQOD() {
      if (!timerOn) { quoteAction = setInterval("ShowQOD()",3000); timerOn = true;}
      QuotePtr++;
      if (QuotePtr < 0) { QuotePtr = Quotes.length; }
      QuotePtr = QuotePtr % Quotes.length;
      document.getElementById('QOD').innerHTML = Quotes[QuotePtr];
    }
    
    onload = function() {
      ShowQOD();
    }
    </script>
    <style type="text/css">
    #QOD { 	height:100px;
    	width:200px;
    	border: 1px solid black;
    	background-color:yellow;
    	text-align:left;
    }
    #quoteHolder {
    	position:absolute;
    	top:100px;
    	left:100px;
    	text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="quoteHolder">
      <div id="QOD"></div>
      <button onclick="QuotePtr-=2;ShowQOD();">&lt;</button>
      <button onclick="timerOn=false;clearInterval(quoteAction)">=</button>
      <button onclick="QuotePtr++;ShowQOD();">&gt;</button>
    </div>
    </body>
    </html>

  4. #4
    Join Date
    Apr 2010
    Posts
    4
    That is just right...thanks very much!

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Arrow

    Quote Originally Posted by larryj24 View Post
    That is just right...thanks very much!
    You're most welcome.
    Glad I could help.
    Good Luck!

  6. #6
    Join Date
    Apr 2010
    Posts
    4

    A desired modification

    I tweaked your code to reset the timer if you click on the < or > controls. Below is the modified code.

    Another thing I'm trying to do it to allow the author of the quote to appear on a separate line below the quote. Ideally in a different font, i.e. italics.

    Is there an easy way to do this?

    Thx,
    Larry

    ________________

    <html>
    <head>
    <title>Timed Quotations</title>
    <script type="text/javascript">
    // For: http://www.webdeveloper.com/forum/sh...d.php?t=228900

    var Quotes = [
    'Whatever the mind of man can conceive and believe, he can achieve',
    'You never get too old to learn a new way of being stupid',
    'Blessed are those who expect nothing for they shall not be disappointed',
    'Never squat with your spurs on. [Old cowboy proverb]',
    'Always drink upstream from the herd. ',
    'There are two ways to argue with a woman ... neither of them works.',
    'If you find yourself in a hole, the first thing to do is stop digging',
    'All looks yellow to a jaundiced eye.' // NOTE: no comma after last entry
    ];

    var timerOn = false;
    var quoteAction;
    var QuotePtr = -1;

    function ShowQOD() {
    if (!timerOn) { quoteAction = setInterval("ShowQOD()",5000); timerOn = true;}
    QuotePtr++;
    if (QuotePtr < 0) { QuotePtr = Quotes.length; }
    QuotePtr = QuotePtr % Quotes.length;
    document.getElementById('QOD').innerHTML = Quotes[QuotePtr];
    }

    onload = function() {
    ShowQOD();
    }
    </script>
    <style type="text/css">
    #QOD { height:100px;
    width:400px;
    /* border: 1px solid black;
    background-color:yellow; */
    text-align:left;
    }
    #quoteHolder {
    position:absolute;
    top:100px;
    left:100px;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="quoteHolder">
    <div id="QOD"></div>
    <button onclick="QuotePtr-=2;ShowQOD();clearInterval(quoteAction);quoteAction=setInterval('ShowQOD()',5000)">&lt;</button>
    <button onclick="timerOn=false;clearInterval(quoteAction)">||</button>
    <button onclick="QuotePtr++;ShowQOD();clearInterval(quoteAction);quoteAction=setInterval('ShowQOD()',5000)"> &gt;</button>

    <!-- <button onclick="QuotePtr-=2;ShowQOD();">&lt;</button>
    <button onclick="timerOn=false;clearInterval(quoteAction)">Pause</button>
    <button onclick="QuotePtr++;ShowQOD();">&gt;</button> -->

    </div>
    </body>
    </html>

    _______________

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Thumbs up How about this ...

    There are several ways you could do this, but I would think the easiest would be:
    Code:
    var Quotes = [
    '<b>Whatever the mind of man can conceive and believe, <br>he can achieve.</b> <p><i>[Napoleon Hill]</i>',
    '<b>You never get too old to learn a new way of being stupid.</b> <p><i>[Me]</i>',
    '<b>Blessed are those who expect nothing <br>for they shall not be disappointed.</b> <p><i>[Rev. Rascal]</i>',
    '<b>Never squat with your spurs on.</b> <p><i>[Old cowboy proverb]</i>',
    '<b>Always drink upstream from the herd.</b> <p><i>[Old cowboy proverb]</i>',
    '<b>There are two ways to argue with a woman <br>... neither of them works.</b> <p><i>[Old cowboy proverb]</i>',
    '<b>If you find yourself in a hole, <br>the first thing to do is stop digging.</b> <p><i>[Old gravedigger\'s revelation]</i>',
    '<b>All looks yellow to a jaundiced eye.</b> <p><i>[Dr. Payne]</i>' // NOTE: no comma after last entry
    ];

  8. #8
    Join Date
    Apr 2010
    Posts
    4

    Thanks again!

    That works!

    I had tried embedding a < /br> in the text, but it didn't work for some reason. I concluded it wasn't possible to embed html like that, but obviously I was wrong!

    It's a delight that there are people like you willing to help others like this. Thanks!

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Thumbs up

    Quote Originally Posted by larryj24 View Post
    That works!

    I had tried embedding a < /br> in the text, but it didn't work for some reason. I concluded it wasn't possible to embed html like that, but obviously I was wrong!

    It's a delight that there are people like you willing to help others like this. Thanks!
    You're most welcome.
    Happy to help!
    Good Luck!


    BTW: You only need the <br>, not the </br>. See example in array quote.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles