33 users online (0 members and 33 guests)  


Page 6 of 7 First ... 2 3 4 5 6 7 Last
  Results 76 to 90 of 97

Related

  1. How to turn off magic quotes in PHP ?    Forum: PHP Forum
    Replies: 0
  2. Need html text script help    Forum: HTML Forum
    Replies: 2
  3. Rotating text load immediately?    Forum: Javascript Forum
    Replies: 4
  4. Rotating quotes script - help please    Forum: Website Scripts Forum
    Replies: 0
  1. #76
    massagegeek's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2012
    Posts
    2

    Smile Re: Rotating Text/Quotes Script?

    looking for an answer to ameliajune's question. I found some simple html to create fading quotes but it is not very smooth and i can't control the speed of the fade.

    this is what I have so far and it works just like I want it to, except for a fade transition.


    <html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title>Rotating Quotes</title>

    <style type="text/css">
    body {
    color:none;
    background-color:none;
    }
    #quotes {
    margin:0px auto;
    font-family:'trebuchet ms';
    font-size:13px;
    color:#46260b;
    width:560px;
    line-height:25px;
    border:none;
    background-color:none;
    text-align:center;
    }
    </style>

    <script type="text/javascript">

    var quote=[
    'This is quote number one', /* add as many quotes as you like!*/
    'This is quote number two',
    'This is quote number three',
    'This is quote number four',
    'This is quote number five',
    'This is quote number six',
    'This is quote number seven',
    'This is quote number eight',
    'This is quote number nine',
    'This is quote number ten'
    ];

    var speed=15000; /*this is the time in milliseconds adjust to suit*/
    var q;
    var obj;

    function init() {
    obj=document.getElementById("quotes").firstChild;
    rnd=Math.floor(Math.random()*quote.length)
    obj.nodeValue=quote[rnd];
    q=rnd+1;
    setTimeout('showQuote()',speed);
    }

    function showQuote() {
    if(q==quote.length) {
    q=0;
    }
    obj.nodeValue=quote[q];
    q++;
    setTimeout('showQuote()',speed);
    }

    if(window.addEventListener){
    window.addEventListener('load',init,false);
    }
    else {
    if(window.attachEvent){
    window.attachEvent('onload',init);
    }
    }
    </script>

    </head>
    <body>

    <div id="quotes">&nbsp;</div>

    </body>
    </html>

  2. #77
    massagegeek's Avatar
    New User

    Status
    Offline
    Join Date
    Apr 2012
    Posts
    2

    Re: Rotating Text/Quotes Script?

    I found some javascript from trinithis on coding forums dot com. It works great!

    I can't post links so message me if you would like the script. You can see the results here:

    massage geek dot com

  3. #78
    tobytwirl's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2013
    Posts
    4

    Re: Rotating Text/Quotes Script?

    Since I found this forum I have learned so much about HTML but perhaps I'm trying to be too clever?
    Using the Rotating Text posted much earlier, I'd like to include some formatting for the codes. Taking just quote[0] to save space, this is what I wanted to do:
    Note: the default alignment is set to left

    quote[0]="<b><i>Did you know...</b></i><br><div align="center">The most popular name for a pub is<br><p><font size="3" color="red">The Red Lion"

    Is this too ambitious? Can anyone suggest how this can be achieved, even if it means limiting the number of quotes

  4. #79
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Rotating Text/Quotes Script

    Hi there tobytwirl,

    and a warm welcome to these forums.

    This thread has certainly been very popular over the years.

    I would suggest that you experiment with this version....
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Did you know?</title>
    
    <style>
    body {
        background-color:rgb(241,241,241);
     }
    #quote {
        width:560px;
        padding:20px;
        border: 1px solid rgb(0,0,0);
        border-radius:10px;
        margin:auto;
        font-family:verdana,arial,helvetica,serif;
        color:rgb(0,0,0);
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 20px rgba(0,0,0,0.6),
                   10px 10px 10px rgba(0,0,0,0.6);
     }
    .text0 {
        font-weight:bold;
        font-style:italic;
     }
    .center {
        text-align:center;
     }
    .fs0 {
        font-size:26px;
        text-shadow:1px 1px 1px rgb(0,0,0);
     }
    .color0 {  color:rgb(255,0,0); }
    .color1 {  color:rgb(0,0,128); }
    .color2 {  color:rgb(255,128,0); }
    .color3 {  color:rgb(128,128,128); }
    .color4 {  color:rgb(0,128,0); }
    </style>
    
    <script>
    (function() {
       'use strict';
    
       var speed=4000;    /*this is the time in milliseconds adjust to suit*/
    
       var quotes=[
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The most popular name for a pub is</p>'+
         '<p class="center fs0 color0">The Red Lion</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The average person falls asleep in</p>'+
         '<p class="center fs0 color1">Seven Minutes</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Most lipsticks contain</p>'+
         '<p class="center fs0 color2">Fish Scales</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The 3 most common languages in the world are</p>'+
         '<p class="center fs0 color3">Mandarin Chinese, Spanish and English</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Grapes explode when you put them in the</p>'+
         '<p class="center fs0 color4">Microwave</p>' /* no trailing comma */
    
    
                 ];
    
       var c=0;
    
    function showQuote() {
       c++;
    if(c==quotes.length) {
       c=0;
     }
       document.getElementById('quote').innerHTML=quotes[c];
    
       setTimeout(function(){showQuote()},speed);
     }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){showQuote()},speed)},false):
       window.attachEvent('onload',function(){setTimeout(function(){showQuote()},speed)});
    })();
    </script>
    
    </head>
    <body>
    
    <div id="quote">
     <p class="text0">Did you know...</p>
     <p class="center">The most popular name for a pub is</p>
     <p class="center fs0 color0">The Red Lion</p>
    </div>
    
    </body>
    </html>
    Note:-
    All the styling is done in the CSS rather than in the "quotes array".
    This makes everything easier to maintain.

  5. #80
    tobytwirl's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2013
    Posts
    4

    Re: Rotating Text/Quotes Script

    Quote Originally Posted by coothead View Post
    Hi there tobytwirl,

    and a warm welcome to these forums.

    This thread has certainly been very popular over the years.

    I would suggest that you experiment with this version....
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Did you know?</title>
    
    <style>
    body {
        background-color:rgb(241,241,241);
     }
    #quote {
        width:560px;
        padding:20px;
        border: 1px solid rgb(0,0,0);
        border-radius:10px;
        margin:auto;
        font-family:verdana,arial,helvetica,serif;
        color:rgb(0,0,0);
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 20px rgba(0,0,0,0.6),
                   10px 10px 10px rgba(0,0,0,0.6);
     }
    .text0 {
        font-weight:bold;
        font-style:italic;
     }
    .center {
        text-align:center;
     }
    .fs0 {
        font-size:26px;
        text-shadow:1px 1px 1px rgb(0,0,0);
     }
    .color0 {  color:rgb(255,0,0); }
    .color1 {  color:rgb(0,0,128); }
    .color2 {  color:rgb(255,128,0); }
    .color3 {  color:rgb(128,128,128); }
    .color4 {  color:rgb(0,128,0); }
    </style>
    
    <script>
    (function() {
       'use strict';
    
       var speed=4000;    /*this is the time in milliseconds adjust to suit*/
    
       var quotes=[
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The most popular name for a pub is</p>'+
         '<p class="center fs0 color0">The Red Lion</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The average person falls asleep in</p>'+
         '<p class="center fs0 color1">Seven Minutes</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Most lipsticks contain</p>'+
         '<p class="center fs0 color2">Fish Scales</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The 3 most common languages in the world are</p>'+
         '<p class="center fs0 color3">Mandarin Chinese, Spanish and English</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Grapes explode when you put them in the</p>'+
         '<p class="center fs0 color4">Microwave</p>' /* no trailing comma */
    
    
                 ];
    
       var c=0;
    
    function showQuote() {
       c++;
    if(c==quotes.length) {
       c=0;
     }
       document.getElementById('quote').innerHTML=quotes[c];
    
       setTimeout(function(){showQuote()},speed);
     }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){showQuote()},speed)},false):
       window.attachEvent('onload',function(){setTimeout(function(){showQuote()},speed)});
    })();
    </script>
    
    </head>
    <body>
    
    <div id="quote">
     <p class="text0">Did you know...</p>
     <p class="center">The most popular name for a pub is</p>
     <p class="center fs0 color0">The Red Lion</p>
    </div>
    
    </body>
    </html>
    Note:-
    All the styling is done in the CSS rather than in the "quotes array".
    This makes everything easier to maintain.
    That is absolutely magnificent! Many thanks.
    Just to prove that my wild imagination is still very active, may I pose the following two questions:
    1. Is it possible to add the option to also change the colors of either the background or the border for each quote?
    2. This one might be a little difficult to explain.
    My website is hosted by Wix who have a 8100 character limit for html. This, of course, limits the number of quotes I can have. Is there a way of automatically changing one group of quotes to a second (or third, etc) without affecting this limit?

  6. #81
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Rotating Text/Quotes Script?

    Hi there tobytwirl,

    1. Code:
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
      
      <meta charset="utf-8">
      
      <title>Did you know?</title>
      
      <style>
      body {
          background-color:rgb(241,241,241);
       }
      #quote {
          width:560px;
          padding:20px;
          border:1px solid rgba(0,0,0,0.5);
          border-radius:12px;
          margin:auto;
          font-family:verdana,arial,helvetica,serif;
          color:rgb(0,0,0);
          background-color:rgb(255,255,255);
          box-shadow:inset 0 0 20px rgba(0,0,0,0.6),
                     10px 10px 10px rgba(0,0,0,0.6);
       }
      .text0 {
          font-weight:bold;
          font-style:italic;
       }
      .center {
          text-align:center;
       }
      .fs0 {
          font-size:26px;
          text-shadow:1px 1px 1px rgb(0,0,0);
       }
      .color0 {  color:rgb(255,0,0); }
      .color1 {  color:rgb(0,0,192); }
      .color2 {  color:rgb(255,192,64); }
      .color3 {  color:rgb(192,192,192); }
      .color4 {  color:rgb(0,192,0); }
      
      .bgc0 {  background:linear-gradient(to bottom,rgba(255,255,255,1.0),rgba(0,0,0,0.8)); }
      .bgc1 {  background:linear-gradient(to bottom,rgba(255,192,64,0.5),rgba(128,64,0,0.8)); }
      .bgc2 {  background:linear-gradient(to bottom,rgba(0,255,255,0.3),rgba(0,128,128,0.8)); }
      .bgc3 {  background:linear-gradient(to bottom,rgba(255,0,255,0.3),rgba(128,0,128,0.8)); }
      .bgc4 {  background:linear-gradient(to bottom,rgba(255,0,0,0.3),rgba(128,0,0,0.8)); }
      </style>
      
      <script>
      (function() {
         'use strict';
      
         var speed=4000;    /*this is the time in milliseconds adjust to suit*/
      
         var quotes=[
           '<p class="text0">Did you know...</p>'+
           '<p class="center">The most popular name for a pub is</p>'+
           '<p class="center fs0 color0">The Red Lion</p>',
      
           '<p class="text0">Did you know...</p>'+
           '<p class="center">The average person falls asleep in</p>'+
           '<p class="center fs0 color1">Seven Minutes</p>',
      
           '<p class="text0">Did you know...</p>'+
           '<p class="center">Most lipsticks contain</p>'+
           '<p class="center fs0 color2">Fish Scales</p>',
      
           '<p class="text0">Did you know...</p>'+
           '<p class="center">The 3 most common languages in the world are</p>'+
           '<p class="center fs0 color3">Mandarin Chinese, Spanish and English</p>',
      
           '<p class="text0">Did you know...</p>'+
           '<p class="center">Grapes explode when you put them in the</p>'+
           '<p class="center fs0 color4">Microwave</p>' /* no trailing comma */
      
      
                   ];
      
         var c=0;
      
      function showQuote() {
         c++;
      if(c==quotes.length) {
         c=0;
       }
         document.getElementById('quote').innerHTML=quotes[c];
         document.getElementById('quote').className='bgc'+c;
      
      
         setTimeout(function(){showQuote()},speed);
       }
         window.addEventListener?
         window.addEventListener('load',function(){setTimeout(function(){showQuote()},speed)},false):
         window.attachEvent('onload',function(){setTimeout(function(){showQuote()},speed)});
      })();
      </script>
      
      </head>
      <body>
      
      <div id="quote" class="bgc0">
       <p class="text0">Did you know...</p>
       <p class="center">The most popular name for a pub is</p>
       <p class="center fs0 color0">The Red Lion</p>
      </div>
      
      </body>
      </html>
    2. If your host has a "8100 character limit for html", then change your host.
      You can get a good host for about 50p/80cents a week.
      Thus is the host that I use...

  7. #82
    tobytwirl's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2013
    Posts
    4

    Re: Rotating Text/Quotes Script?

    [QUOTE=coothead;40668]Hi there tobytwirl,

    [list=1][*]
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Did you know?</title>
    
    <style>
    body {
        background-color:rgb(241,241,241);
     }
    #quote {
        width:560px;
        padding:20px;
        border:1px solid rgba(0,0,0,0.5);
        border-radius:12px;
        margin:auto;
        font-family:verdana,arial,helvetica,serif;
        color:rgb(0,0,0);
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 20px rgba(0,0,0,0.6),
                   10px 10px 10px rgba(0,0,0,0.6);
     }
    .text0 {
        font-weight:bold;
        font-style:italic;
     }
    .center {
        text-align:center;
     }
    .fs0 {
        font-size:26px;
        text-shadow:1px 1px 1px rgb(0,0,0);
     }
    .color0 {  color:rgb(255,0,0); }
    .color1 {  color:rgb(0,0,192); }
    .color2 {  color:rgb(255,192,64); }
    .color3 {  color:rgb(192,192,192); }
    .color4 {  color:rgb(0,192,0); }
    
    .bgc0 {  background:linear-gradient(to bottom,rgba(255,255,255,1.0),rgba(0,0,0,0.8)); }
    .bgc1 {  background:linear-gradient(to bottom,rgba(255,192,64,0.5),rgba(128,64,0,0.8)); }
    .bgc2 {  background:linear-gradient(to bottom,rgba(0,255,255,0.3),rgba(0,128,128,0.8)); }
    .bgc3 {  background:linear-gradient(to bottom,rgba(255,0,255,0.3),rgba(128,0,128,0.8)); }
    .bgc4 {  background:linear-gradient(to bottom,rgba(255,0,0,0.3),rgba(128,0,0,0.8)); }
    </style>
    
    <script>
    (function() {
       'use strict';
    
       var speed=4000;    /*this is the time in milliseconds adjust to suit*/
    
       var quotes=[
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The most popular name for a pub is</p>'+
         '<p class="center fs0 color0">The Red Lion</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The average person falls asleep in</p>'+
         '<p class="center fs0 color1">Seven Minutes</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Most lipsticks contain</p>'+
         '<p class="center fs0 color2">Fish Scales</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The 3 most common languages in the world are</p>'+
         '<p class="center fs0 color3">Mandarin Chinese, Spanish and English</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Grapes explode when you put them in the</p>'+
         '<p class="center fs0 color4">Microwave</p>' /* no trailing comma */
    
    
                 ];
    
       var c=0;
    
    function showQuote() {
       c++;
    if(c==quotes.length) {
       c=0;
     }
       document.getElementById('quote').innerHTML=quotes[c];
       document.getElementById('quote').className='bgc'+c;
    
    
       setTimeout(function(){showQuote()},speed);
     }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){showQuote()},speed)},false):
       window.attachEvent('onload',function(){setTimeout(function(){showQuote()},speed)});
    })();
    </script>
    
    </head>
    <body>
    
    <div id="quote" class="bgc0">
     <p class="text0">Did you know...</p>
     <p class="center">The most popular name for a pub is</p>
     <p class="center fs0 color0">The Red Lion</p>
    </div>
    
    </body>
    </html>

    This is absolutley magnificent. However, can I pose a couple of questions?
    1. The line after "Did you know..." seems to have a limit on the number of characters. How/where do you increase this? Can this incluude a<br>?
    2. Is it possible to add a line after <p class="center fs0 color0"> etc. ?

  8. #83
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Rotating Text/Quotes Script?

    Hi there tobytwirl,

    you may put anything you like - (HTML) - in the quotes array.

    Obviously, with a lot of content, reading it all could become rather difficult.

    With that in mind I have added a pause function to the script to overcome that problem.

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Did you know?</title>
    
    <style>
    body {
        background-color:rgb(241,241,241);
     }
    #quote {
        width:560px;
        padding:20px;
        border:1px solid rgba(0,0,0,0.5);
        border-radius:12px;
        margin:auto;
        font-family:verdana,arial,helvetica,serif;
        color:rgb(0,0,0);
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 20px rgba(0,0,0,0.6),
                   10px 10px 10px rgba(0,0,0,0.6);
        cursor:pointer;
     }
    .text0 {
        font-weight:bold;
        font-style:italic;
     }
    .center {
        text-align:center;
     }
    .left {
        text-align:left;
     }
    .fs0 {
        font-size:26px;
        text-shadow:1px 1px 1px rgb(0,0,0);
     }
    .color0 {  color:rgb(255,0,0); }
    .color1 {  color:rgb(0,0,192); }
    .color2 {  color:rgb(255,192,64); }
    .color3 {  color:rgb(192,192,192); }
    .color4 {  color:rgb(0,192,0); }
    .color5 {  color:rgb(192,192,0); }
    
    .bgc0 {  background:linear-gradient(to bottom,rgba(255,255,255,1.0),rgba(0,0,0,0.8)); }
    .bgc1 {  background:linear-gradient(to bottom,rgba(255,192,64,0.5),rgba(128,64,0,0.8)); }
    .bgc2 {  background:linear-gradient(to bottom,rgba(0,255,255,0.3),rgba(0,128,128,0.8)); }
    .bgc3 {  background:linear-gradient(to bottom,rgba(255,0,255,0.3),rgba(128,0,128,0.8)); }
    .bgc4 {  background:linear-gradient(to bottom,rgba(255,0,0,0.3),rgba(128,0,0,0.8)); }
    .bgc5 {  background:linear-gradient(to bottom,rgba(255,255,0,0.2),rgba(128,128,0,0.9)); }
    
    sup {    font-size:9px; }
    </style>
    
    <script>
    (function() {
       'use strict';
    
       var speed=3000;    /*this is the time in milliseconds adjust to suit*/
    
       var quotes=[
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The most popular name for a pub is</p>'+
         '<p class="center fs0 color0">The Red Lion</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The average person falls asleep in</p>'+
         '<p class="center fs0 color1">Seven Minutes</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Most lipsticks contain</p>'+
         '<p class="center fs0 color2">Fish Scales</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The 3 most common languages in the world are</p>'+
         '<p class="center fs0 color3">Mandarin Chinese, Spanish and English</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Grapes explode when you put them in the</p>'+
         '<p class="center fs0 color4">Microwave</p>',
    
         '<p class="text0">Did you know...</p>'+
    
         '<p class="left">It weighs only 0.035 oz (1 gram), is only 16 '+ 
         'square inches (0.01m<sup>2</sup>) in size and consists of cotton '+ 
         'and linen but those who do not have it would like to have it and '+ 
         'those who have it would like to have more of it. It is the world\'s '+ 
         'most popular currency. It is</p>'+
         '<p class="center fs0 color5">The United States dollar</p>'+
         '<p class="text0">Did You Know...</p>'+
         '<p class="left">Typing "do a barrel roll" on Google\'s search page '+ 
         'will cause the page to spin.</p>'+ 
         '<p class="text0">Did You Know...</p>'+
         '<p class="left">You can put as much, or as little, content as you '+ 
         'like for each quote</p>'                     /* no trailing comma */
    
    
                 ];
    
       var c=0;
       var obj;
       var sto;
    
    function showQuote() {
       c++;
    if(c==quotes.length) {
       c=0;
     }
    
       obj.innerHTML=quotes[c];
       obj.className='bgc'+c;
    
       sto=setTimeout(function(){showQuote()},speed);
     }
    function pause() {
       obj=document.getElementById('quote');
       obj.onmouseover=function() {
       clearTimeout(sto);
     }
       obj.onmouseout=function() {
       sto=setTimeout(function(){showQuote()},speed);
      }
     }
       window.addEventListener?
       window.addEventListener('load',function(){pause();setTimeout(function(){showQuote()},speed);},false):
       window.attachEvent('onload',function(){pause();setTimeout(function(){showQuote()},speed);});
    })();
    </script>
    
    </head>
    <body>
    
    <h2 class="center fs0 color3">Mouseover the quotes to pause the flow</h2>
    
    <div id="quote" class="bgc0">
     <p class="text0">Did you know...</p>
     <p class="center">The most popular name for a pub is</p>
     <p class="center fs0 color0">The Red Lion</p>
    </div>
    
    </body>
    </html>

  9. #84
    tobytwirl's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2013
    Posts
    4

    Re: Rotating Text/Quotes Script?

    Quote Originally Posted by coothead View Post
    Hi there tobytwirl,

    you may put anything you like - (HTML) - in the quotes array.

    Obviously, with a lot of content, reading it all could become rather difficult.

    With that in mind I have added a pause function to the script to overcome that problem.

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>Did you know?</title>
    
    <style>
    body {
        background-color:rgb(241,241,241);
     }
    #quote {
        width:560px;
        padding:20px;
        border:1px solid rgba(0,0,0,0.5);
        border-radius:12px;
        margin:auto;
        font-family:verdana,arial,helvetica,serif;
        color:rgb(0,0,0);
        background-color:rgb(255,255,255);
        box-shadow:inset 0 0 20px rgba(0,0,0,0.6),
                   10px 10px 10px rgba(0,0,0,0.6);
        cursor:pointer;
     }
    .text0 {
        font-weight:bold;
        font-style:italic;
     }
    .center {
        text-align:center;
     }
    .left {
        text-align:left;
     }
    .fs0 {
        font-size:26px;
        text-shadow:1px 1px 1px rgb(0,0,0);
     }
    .color0 {  color:rgb(255,0,0); }
    .color1 {  color:rgb(0,0,192); }
    .color2 {  color:rgb(255,192,64); }
    .color3 {  color:rgb(192,192,192); }
    .color4 {  color:rgb(0,192,0); }
    .color5 {  color:rgb(192,192,0); }
    
    .bgc0 {  background:linear-gradient(to bottom,rgba(255,255,255,1.0),rgba(0,0,0,0.8)); }
    .bgc1 {  background:linear-gradient(to bottom,rgba(255,192,64,0.5),rgba(128,64,0,0.8)); }
    .bgc2 {  background:linear-gradient(to bottom,rgba(0,255,255,0.3),rgba(0,128,128,0.8)); }
    .bgc3 {  background:linear-gradient(to bottom,rgba(255,0,255,0.3),rgba(128,0,128,0.8)); }
    .bgc4 {  background:linear-gradient(to bottom,rgba(255,0,0,0.3),rgba(128,0,0,0.8)); }
    .bgc5 {  background:linear-gradient(to bottom,rgba(255,255,0,0.2),rgba(128,128,0,0.9)); }
    
    sup {    font-size:9px; }
    </style>
    
    <script>
    (function() {
       'use strict';
    
       var speed=3000;    /*this is the time in milliseconds adjust to suit*/
    
       var quotes=[
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The most popular name for a pub is</p>'+
         '<p class="center fs0 color0">The Red Lion</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The average person falls asleep in</p>'+
         '<p class="center fs0 color1">Seven Minutes</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Most lipsticks contain</p>'+
         '<p class="center fs0 color2">Fish Scales</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">The 3 most common languages in the world are</p>'+
         '<p class="center fs0 color3">Mandarin Chinese, Spanish and English</p>',
    
         '<p class="text0">Did you know...</p>'+
         '<p class="center">Grapes explode when you put them in the</p>'+
         '<p class="center fs0 color4">Microwave</p>',
    
         '<p class="text0">Did you know...</p>'+
    
         '<p class="left">It weighs only 0.035 oz (1 gram), is only 16 '+ 
         'square inches (0.01m<sup>2</sup>) in size and consists of cotton '+ 
         'and linen but those who do not have it would like to have it and '+ 
         'those who have it would like to have more of it. It is the world\'s '+ 
         'most popular currency. It is</p>'+
         '<p class="center fs0 color5">The United States dollar</p>'+
         '<p class="text0">Did You Know...</p>'+
         '<p class="left">Typing "do a barrel roll" on Google\'s search page '+ 
         'will cause the page to spin.</p>'+ 
         '<p class="text0">Did You Know...</p>'+
         '<p class="left">You can put as much, or as little, content as you '+ 
         'like for each quote</p>'                     /* no trailing comma */
    
    
                 ];
    
       var c=0;
       var obj;
       var sto;
    
    function showQuote() {
       c++;
    if(c==quotes.length) {
       c=0;
     }
    
       obj.innerHTML=quotes[c];
       obj.className='bgc'+c;
    
       sto=setTimeout(function(){showQuote()},speed);
     }
    function pause() {
       obj=document.getElementById('quote');
       obj.onmouseover=function() {
       clearTimeout(sto);
     }
       obj.onmouseout=function() {
       sto=setTimeout(function(){showQuote()},speed);
      }
     }
       window.addEventListener?
       window.addEventListener('load',function(){pause();setTimeout(function(){showQuote()},speed);},false):
       window.attachEvent('onload',function(){pause();setTimeout(function(){showQuote()},speed);});
    })();
    </script>
    
    </head>
    <body>
    
    <h2 class="center fs0 color3">Mouseover the quotes to pause the flow</h2>
    
    <div id="quote" class="bgc0">
     <p class="text0">Did you know...</p>
     <p class="center">The most popular name for a pub is</p>
     <p class="center fs0 color0">The Red Lion</p>
    </div>
    
    </body>
    </html>


    This is super and, as you suggested, I have been experimenting with it - with mixed results.
    1. How do you change from rgba to # colors?
    2. I found a page showing all the background formatting possibilities and some work and others do not, eg I can get:
    background: linear-gradient(70deg, black, white);
    and variants to work but:
    background: linear-gradient(to bottom, blue, white 80%, orange);
    and variants won't ...
    I've considered the vagaries of the template but wondered whether you have any thoughts/solutions

  10. #85
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Rotating Text/Quotes Script?

    Hi there tobytwirl,

    I tend to use "rgb" more often than "#" now,
    as I like the transparency effect of "rgba".

    This tool...

    ...will show both hex and rgb values.

    Check out the attachment to see another useful tool that I use.

    I have no problems with...
    Code:
    
    background: linear-gradient(to bottom, blue, white 80%, orange);
    ...in my test browsers, IE11, Firefox 25.0, Chrome 31.0, Opera 12.6 and Opera 17.0.

    This was my test code...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    #box {
        width:324px;
        height:200px;
        margin:auto;
        background:linear-gradient(to bottom,blue,white 80%,orange);
     }
    </style>
    
    </head>
    <body>
    
    <div id="box"></div>
    
    </body>
    </html>
    Attached Files Attached Files
    Last edited by coothead; 11-23-2013 at 06:24 AM.

  11. #86
    Trapmac's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2014
    Posts
    3

    Re: Rotating Text/Quotes Script?

    Hello there!
    I have been trying to figure out a way to enter "Testimonials" from customers into my website with a scrolling feature and I am SOOOO close but I just cant figure a few things out here. I have taken this from a previous comment/edit and changed the first quote as I was playing with it and for some reason it stopped rotating and I cannot figure it out!

    <style type="text/css">
    #quote {
    position:relative;
    width:860px;
    height:168px;
    padding:20px 10px;
    border: 1px solid #ce6f0a;
    font-family:georgia,times,serif;
    }
    #text {
    margin:0 0 20px;
    font-style:italic;
    font-size:14px;
    color:#C0C0C0;
    }
    #name {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#cb6c07;
    }
    </style>

    <script type="text/javascript">

    var speed=1000; /*this is the time in milliseconds adjust to suit*/
    var c=0;

    function showQuote() {

    quotes=[

    '<p id="text">"When I first walked into CrossFit Remix to talk to the trainers I was very scared and didn\'t know what to '+
    'expect. They invited me to try it to see if it was something that I wanted to do, and after the first week I '+
    'was hooked! It is like having a personal trainer every day of the week. It has been 45 days and I'm down '+
    '8 inches total (3.5" in just my stomach!). I'm also eating better and my cholesterol is down 75 pts and my '+
    'triglycerides are down 187 pts. Thank you CrossFit Remix for pushing me so hard. And by the way I\'m"<\/p><p id="name">- John Doe<\/p>',

    '<p id="text">"TEST truly understands the media and works to deliver what we need, when we need it. I consider them '+
    'a premier PR agency for high-tech companies and don\'t hesitate to connect with them for stories, blogs, '+
    'or general industry updates."<\/p><p id="name">- John Doe<\/p>',

    '<p id="text">"It\'s important for PR firms to understand not just the technology but the market dynamics. I have '+
    'worked with TEST over the years and they understand who my readers are and what information is important '+
    'to them, bringing the right blend of technical detail and market expertise."<\/p><p id="name">- John Doe<\/p>'

    ];

    c++;
    if(c==quotes.length) {
    c=0;
    }
    document.getElementById('quote').innerHTML=quotes[c];

    setTimeout(function(){showQuote()},speed);
    }

    if(window.addEventListener){
    window.addEventListener('load',function(){setTimeout(function(){showQuote()},speed)},false);
    }
    else {
    if(window.attachEvent){
    window.attachEvent('onload',function(){setTimeout(function(){showQuote()},speed)});
    }
    }

    </script>

    </head>
    <body>

    <div id="quote">

    <p id="text">
    "When I first walked into CrossFit Remix to talk to the trainers I was very scared and didn't know what to
    expect. They invited me to try it to see if it was something that I wanted to do, and after the first week I
    was hooked! It is like having a personal trainer every day of the week. It has been 45 days and I'm down
    8" total (3.5" in just my stomach!). I'm also eating better and my cholesterol is down 75 pts and my
    triglycerides are down 187 pts. Thank you CrossFit Remix for pushing me so hard. And by the way I'm
    43yrs old."
    </p>

    <p id="name">- John Doe</p>

    </div>

    </body>
    </html>


    Ideally in the end I will have many different Testimonials and will continue to add them.
    Where am I going wrong when adding lines to the quote and adding additional quotes?

    Trapmac
    -Thank you in advance!

  12. #87
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Rotating Text/Quotes Script?

    Hi there Trapmac,

    and a warm welcome to these forums.

    Basically you missed a few required apostrophe escapements - (I'm needs to be I\'m).

    Here is the corrected code...
    Code:
    
    <!DOCTYPE html>
    <html  lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style media="screen">
    #quote {
        position:relative;
        width:860px;
        min-height:120px;
        padding:20px 10px;
        margin:auto;
        border:1px solid #ce6f0a;
        box-shadow:5px 5px 5px #999;
        font-family:georgia,times,serif;
     }
    #text {
        margin:0 0 20px;
        font-style:italic;
        font-size:14px;
        color:#c0c0c0;
    }
    #name {
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:12px;
        font-weight:bold;
        color:#cb6c07;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
       
       var speed=5000; /*this is the time in milliseconds adjust to suit*/
       var c=0;
       var quotes;
       
    function showQuote() {
    
       quotes=[
    
       '<p id="text">"When I first walked into CrossFit Remix to talk to the trainers I was very scared and didn\'t know what to '+
       'expect. They invited me to try it to see if it was something that I wanted to do, and after the first week I '+
       'was hooked! It is like having a personal trainer every day of the week. It has been 45 days and I\'m down '+
       '8 inches total (3.5" in just my stomach!). I\'m also eating better and my cholesterol is down 75 pts and my '+
       'triglycerides are down 187 pts. Thank you CrossFit Remix for pushing me so hard. And by the way I\'m"<\/p><p id="name">- John Doe<\/p>',
    
       '<p id="text">"TEST truly understands the media and works to deliver what we need, when we need it. I consider them '+
       'a premier PR agency for high-tech companies and don\'t hesitate to connect with them for stories, blogs, '+
       'or general industry updates."<\/p><p id="name">- John Doe<\/p>',
    
       '<p id="text">"It\'s important for PR firms to understand not just the technology but the market dynamics. I have '+
       'worked with TEST over the years and they understand who my readers are and what information is important '+
       'to them, bringing the right blend of technical detail and market expertise."<\/p><p id="name">- John Doe<\/p>'
    
              ];
    
       c++;
    if(c===quotes.length) {
       c=0;
     }
       document.getElementById('quote').innerHTML=quotes[c];
    
       setTimeout(function(){showQuote()},speed);
    }
       window.addEventListener?
       window.addEventListener('load',function(){setTimeout(function(){showQuote()},speed)},false):
       window.attachEvent('onload',function(){setTimeout(function(){showQuote()},speed)});
    })();
    </script>
    
    </head>
    <body>
    
    <div id="quote">
    <p id="text">"When I first walked into CrossFit Remix to talk to the trainers I was very scared and didn't know what to 
    expect. They invited me to try it to see if it was something that I wanted to do, and after the first week I
    was hooked! It is like having a personal trainer every day of the week. It has been 45 days and I'm down 
    8 inches total (3.5" in just my stomach!). I'm also eating better and my cholesterol is down 75 pts and my 
    triglycerides are down 187 pts. Thank you CrossFit Remix for pushing me so hard. And by the way I'm"
    </p>
    <p id="name">- John Doe</p>
    </div>
    
    </body>
    </html>

  13. #88
    Trapmac's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2014
    Posts
    3

    Re: Rotating Text/Quotes Script?

    Coothead,
    Thank you very much! It was driving me absolutely bonkers! I have 1 more question if you don't mind. Is there a way to define the outline as 1 size instead of a varying size? Currently the box is 860px by 120px. How would I keep it that height and just have the text inside of it change?

    Trapmac

  14. #89
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Rotating Text/Quotes Script?

    Hi there Trapmac,

    if you have a fixed height container, what do you want
    to happen when the content exceeds that height?

  15. #90
    Trapmac's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2014
    Posts
    3

    Re: Rotating Text/Quotes Script?

    Coothead,
    Ideally if the text exceeds the height I would like to see it just not be within the box as in below the "cut-off" line. I intend on adjusting the box height based on the testimonials so that the text does NOT exceed the box size.
    Trapmac



Page 6 of 7 First ... 2 3 4 5 6 7 Last

Tags for this Thread