Results 1 to 7 of 7

Thread: Integrating a text fade script with a text display script

  1. #1
    Join Date
    Jan 2006
    Posts
    170
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Integrating a text fade script with a text display script

    Hi all.

    I'm writing a page that displays lines of text, one at a time, with a 5 second delay between them. Here's the html code:
    Code:
        <table border=0 height=90px><tr><td>
        <span id="showWords" style="color:#000000; font-size:24px; font-style:italic"></span>
        <script src="Script_Files/Show_Words_1.js"></script>
        </td></tr></table>
    and here's what the javascript code looks like:

    Code:
    var quotes = new Array()
    quotes[0] = ["Things do not happen. Things are made to happen.","John F. Kennedy"]
    quotes[1] = ["If in doubt, leave it out.","NBS"]
    quotes[2] = ["All our dreams can come true, if we have the courage to pursue them.","Walt Disney"]
    quotes[3] = ["You are never too old to set another goal or to dream a new dream.","C. S. Lewis"]
    :
    :
    :
    :
    var timing = 5000;
    
    
    var i = -1;
    var t;
    wait(i)
    
    function wait() {
     clearTimeout(t);
     i++;
     if (quotes[i]){
      document.getElementById('showWords').innerHTML=quotes[i][0] + "<br><font style='color:#00000; font-size:24px; font-style:normal;float: right'>" + quotes[i][1];
      if (i == 0 && navigator.appName == "Microsoft Internet Explorer") timing = timing + 1000;
      t=window.setTimeout(function(){ wait1(); },timing);
     }
    }
    
    function wait1() {
     document.getElementById('showWords').innerHTML="";
       t=window.setTimeout(function(){ wait(); },timing);
    }
    It works fine. However, I now want the text lines to fade out. I found a set of code that does that, but I can't seem to integrate the two. Here's the code for the fade:

    Code:
    <head>
      <title> - jsFiddle demo by jfriend00</title>
      
      <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
      
        <style type='text/css'>
        .quotes {display: none;}
      </style>
      
    </head>
    <body>
      <h2 class="quotes">first quote</h2>
    <h2 class="quotes">second quote</h2>
     
    <script type='text/javascript'>//<![CDATA[ 
    
    (function() {
    
        var quotes = $(".quotes");
        var quoteIndex = -1;
        
        function showNextQuote() {
            ++quoteIndex;
            quotes.eq(quoteIndex % quotes.length)
                .fadeIn(0)
    //            .delay(2000)
                .fadeOut(2000, showNextQuote);
        }
        
        showNextQuote();
        
    })();
    //]]>  
    
    </script>
    
    </body>
    I know that the jquery link and css code needs to go in with my html code, but I need help integrating the javascript.

    Can someone please give me a hand with this.

    Thanks.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .test {
      width:300px;height:100px;background-Color:#FFFFCC;color:#000000;font-Size:20px;padding:5px
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Next"  onclick="zxcTextColor.Next('text1',1);" />
    <input type="button" name="" value="Back"  onclick="zxcTextColor.Next('text1',-1);" />
    <input type="button" name="" value="GoTo 0"  onclick="zxcTextColor.GoTo('text1',0);" />
    <input type="button" name="" value="GoTo 1"  onclick="zxcTextColor.GoTo('text1',1);" />
    <input type="button" name="" value="GoTo 2"  onclick="zxcTextColor.GoTo('text1',2);" />
    <input type="button" name="" value="GoTo 3"  onclick="zxcTextColor.GoTo('text1',3);" />
    
    <div id="text1" class="test" onmouseover="zxcTextColor.Pause('text1');" onmouseout="zxcTextColor.Auto('text1');"  >text</div>
    <br />
    <br />
    
    <div id="text2" class="test" onmouseover="zxcTextColor.Pause('text2');" onmouseout="zxcTextColor.Auto('text2');"  >text</div>
    
    
    
    
    <script type="text/javascript" >
    /*<![CDATA[*/
    // Text Color Fader (10-October-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcTextColor={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       o.txt[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Auto:function(id,h){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },h||200):null;
     },
    
     Pause:function(id,h){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ParentID,txt=o.Text,f=this.rgb(o.From),t=this.rgb(o.To),ms=o.Animate,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id);
      if (p&&txt instanceof Array){
       o.id=id;
       o.a=[p,f&&t?'color':'',f&&t?f:[100],f&&t?t:[0]];
       o.txt=txt;
       o.l=txt.length-1;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.h=typeof(h)=='number'&&h>100?h:o.ms*4;
       o.n=0;
       o.ud=1;
       p.innerHTML=txt[0];
       f&&t?p.style.color='rgb('+f[0]+','+f[1]+','+f[2]+')':this.opc(p,100);
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>20?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      o.auto=a===true;
      o.n=o.auto?o.n+o.ud:a;
      o.n=o.n<0?o.l:o.n>o.l?0:o.n;
      this.animate(o,o.a,o.a[2],o.a[3],new Date(),o.ms);
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=[],i=0;
      for (;i<f.length;i++){
       n[i]=(t[i]-f[i])/mS*ms+f[i];
       n[i]=isFinite(n[i])?n[i]:f[i];
      }
      a[1]?a[0].style.color='rgb('+n[0]+','+n[1]+','+n[2]+')':oop.opc(a[0],n[0]);
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       if (f==a[2]){
        a[0].innerHTML=o.txt[o.n];
        this.animate(o,o.a,o.a[3],o.a[2],new Date(),o.ms);
       }
       else {
        a[1]?a[0].style.color='rgb('+t[0]+','+t[1]+','+t[2]+')':oop.opc(a[0],t[0]);
        o.auto?oop.Auto(o.id,o.h):null;
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     rgb:function(c){
      return typeof(c)=='string'&&c.length==7?[parseInt(c.substring(1,3),16),parseInt(c.substring(3,5),16),parseInt(c.substring(5,7),16)]:false;
     }
    
    }
    
    zxcTextColor.Init({
     ParentID:'text1', // the unique ID name of the parent DIV.            (string)
     Text:[            // an array to statements to display.               (array)
      ["Things do not happen. Things are made to happen.","John F. Kennedy"],
      ["If in doubt, leave it out.","NBS"],
      ["All our dreams can come true, if we have the courage to pursue them.","Walt Disney"],
      ["You are never too old to set another goal or to dream a new dream.","C. S. Lewis"]
     ],
     From:'#000000',  //(optional) the fade in HEX color.                  (string, default = opacity =fade)
     To:'#FFFFCC',    //(optional) the fade out HEX color.                 (string, default = opacity =fade)
     Animate:1000,    //(optional) the animation duration in milliseconds. (number, default = 1000)
     AutoHold:2000,   //(optional) the auto 'hold' delay in milliseconds.  (number, default = Animate*4)
     AutoStart:2000   //(optional) the auto start delay in milliseconds.   (number, default = no auto start)
    });
    
    zxcTextColor.Init({
     ParentID:'text2', // the unique ID name of the parent DIV.            (string)
     Text:[            // an array to statements to display.               (array)
      ["Things do not happen. Things are made to happen.","John F. Kennedy"],
      ["If in doubt, leave it out.","NBS"],
      ["All our dreams can come true, if we have the courage to pursue them.","Walt Disney"],
      ["You are never too old to set another goal or to dream a new dream.","C. S. Lewis"]
     ],
     Animate:1000,    //(optional) the animation duration in milliseconds. (number, default = 1000)
     AutoHold:2000,   //(optional) the auto 'hold' delay in milliseconds.  (number, default = Animate*4)
     AutoStart:2000   //(optional) the auto start delay in milliseconds.   (number, default = no auto start)
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2006
    Posts
    170
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Hi Vic.

    Thanks for the response and the code. My initial reaction was that it's a bit over kill for what I'm trying to do. I need to be able to explain the code to others and this is beyond my abilities. That said, I checked it out and it will definitely work for me.

    One thing, I'd like to have about a 5 second delay from the time one phrase finishes fading and the next phrase displays. Any chance you could add that feature?

    Again, thanks for the help,
    Jim

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    also I missed the relevence of the spans

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .test {
      width:300px;height:100px;background-Color:#FFFFCC;color:#000000;font-Size:20px;padding:5px
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <input type="button" name="" value="Next"  onclick="zxcTextColor.Next('text1',1);" />
    <input type="button" name="" value="Back"  onclick="zxcTextColor.Next('text1',-1);" />
    <input type="button" name="" value="GoTo 0"  onclick="zxcTextColor.GoTo('text1',0);" />
    <input type="button" name="" value="GoTo 1"  onclick="zxcTextColor.GoTo('text1',1);" />
    <input type="button" name="" value="GoTo 2"  onclick="zxcTextColor.GoTo('text1',2);" />
    <input type="button" name="" value="GoTo 3"  onclick="zxcTextColor.GoTo('text1',3);" />
    
    <div id="text1" class="test" onmouseover="zxcTextColor.Pause('text1');" onmouseout="zxcTextColor.Auto('text1');"  >
     <span></span>
     <br />
     <span style="float:right;"></span>
    </div>
    <br />
    <br />
    
    <div id="text2" class="test" onmouseover="zxcTextColor.Pause('text2');" onmouseout="zxcTextColor.Auto('text2');"  >
     <span></span>
     <br />
     <span style="float:right;"></span>
    </div>
    
    
    
    
    <script type="text/javascript" >
    /*<![CDATA[*/
    // Text Color Fader (10-October-2014)
    // by Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcTextColor={
    
     Next:function(id,ud){
      var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       o.ud=ud;
       this.rotate(o,o.n+ud);
      }
     },
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o){
       this.Pause(id);
       o.txt[n]&&n!=o.n?this.rotate(o,n):null;
      }
     },
    
     Auto:function(id,h){
      var oop=this,o=oop['zxc'+id];
      o?o.to=setTimeout(function(){ oop.rotate(o,true); },h||200):null;
     },
    
     Pause:function(id,h){
      var o=this['zxc'+id];
      if (o){
       clearTimeout(o.to);
       o.auto=false;
      }
     },
    
     Init:function(o){
      var id=o.ParentID,txt=o.Text,f=this.rgb(o.From),t=this.rgb(o.To),mso=o.AnimateOut,msi=o.AnimateIn,fi=o.FadeInHold,h=o.AutoHold,s=o.AutoStart,p=document.getElementById(id),sp=p.getElementsByTagName('SPAN'),i=0;
      if (p&&txt instanceof Array&&sp[0]){
       o.id=id;
       o.a=[p,f&&t?'color':'',f&&t?f:[100],f&&t?t:[0]];
       o.txt=txt;
       o.l=txt.length-1;
       o.mso=typeof(mso)=='number'&&mso>20?mso:1000;
       o.msi=typeof(msi)=='number'&&msi>20?msi:o.mso;
       o.h=typeof(h)=='number'&&h>100?h:o.msi*4;
       o.fi=typeof(fi)=='number'&&fi>5?fi:5;
       o.s=sp;
       o.n=0;
       o.ud=1;
       for (;i<o.s.length;i++){
        if (o.txt[0][i]){
         o.s[i].innerHTML=o.txt[0][i];
        }
       }
       f&&t?this.col(p,f):this.opc(p,100);
       this['zxc'+id]=o;
       typeof(s)=='number'&&s>20?this.Auto(id,s):null;
      }
     },
    
     rotate:function(o,a){
      this.Pause(o.id);
      clearTimeout(o.fito);
      o.auto=a===true;
      o.n=o.auto?o.n+o.ud:a;
      o.n=o.n<0?o.l:o.n>o.l?0:o.n;
      this.animate(o,o.a,o.a[2],o.a[3],new Date(),o.mso);
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=[],i=0;
      for (;i<f.length;i++){
       n[i]=(t[i]-f[i])/mS*ms+f[i];
       n[i]=isFinite(n[i])?Math.round(n[i]):f[i];
      }
      a[1]?oop.col(a[0],n):oop.opc(a[0],n[0]);
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       if (f==a[2]){
       for (i=0;i<o.s.length;i++){
        if (o.txt[o.n][i]){
         o.s[i].innerHTML=o.txt[o.n][i];
        }
       }
        o.fito=setTimeout(function(){ oop.animate(o,o.a,o.a[3],o.a[2],new Date(),o.msi); },o.auto?o.fi:5);
       }
       else {
        a[1]?oop.col(a[0],t):oop.opc(a[0],t[0]);
        o.auto?oop.Auto(o.id,o.h):null;
       }
      }
     },
    
     col:function(o,n){
      o.style.color='rgb('+n[0]+','+n[1]+','+n[2]+')';
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     rgb:function(c){
      return typeof(c)=='string'&&c.length==7?[parseInt(c.substring(1,3),16),parseInt(c.substring(3,5),16),parseInt(c.substring(5,7),16)]:false;
     }
    
    }
    
    zxcTextColor.Init({
     ParentID:'text1', // the unique ID name of the parent DIV.               (string)
     Text:[            // an array to statements to display.                  (array)
      ["Things do not happen. Things are made to happen.","John F. Kennedy"],
      ["If in doubt, leave it out.","NBS"],
      ["All our dreams can come true, if we have the courage to pursue them.","Walt Disney"],
      ["You are never too old to set another goal or to dream a new dream.","C. S. Lewis"]
     ],
     From:'#000000',  //(optional) the fade in HEX color.                     (string, default = opacity = fade)
     To:'#FFFFCC',    //(optional) the fade out HEX color.                    (string, default = opacity = fade)
     AnimateOut:2000, //(optional) the fade out duration in milliseconds.     (number, default = 1000)
     AnimateIn:500,   //(optional) the fade in duration in milliseconds.      (number, default = AnimateOut)
     FadeInHold:5000, //(optional) the  delay before fade in in milliseconds. (number, default = 5
     AutoHold:2000,   //(optional) the auto 'hold' delay in milliseconds.     (number, default = AnimateIn*4)
     AutoStart:2000   //(optional) the auto start delay in milliseconds.      (number, default = no auto start)
    });
    
    zxcTextColor.Init({
     ParentID:'text2', // the unique ID name of the parent DIV.            (string)
     Text:[            // an array to statements to display.               (array)
      ["Things do not happen. Things are made to happen.","John F. Kennedy"],
      ["If in doubt, leave it out.","NBS"],
      ["All our dreams can come true, if we have the courage to pursue them.","Walt Disney"],
      ["You are never too old to set another goal or to dream a new dream.","C. S. Lewis"]
     ],
     AnimateOut:1000, //(optional) the animation duration in milliseconds. (number, default = 1000)
     AutoHold:2000,   //(optional) the auto 'hold' delay in milliseconds.  (number, default = Animate*4)
     AutoStart:2000   //(optional) the auto start delay in milliseconds.   (number, default = no auto start)
    });
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 10-11-2014 at 09:00 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jan 2006
    Posts
    170
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Hi Vic.

    Thanks for the mod. It works great. I think I can work with this.

    Thanks again,
    Jim
    Last edited by Jim Weinberg; 10-10-2014 at 03:20 PM.

  6. #6
    Join Date
    Jan 2006
    Posts
    170
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Hey Vic.

    One last favor, please. I'd like the second element of each phase (the author) to float to the right. I tried to modify the code myself, but could only get it to work for the first phrase.

    Thanks,
    Jim

  7. #7
    Join Date
    Jan 2006
    Posts
    170
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Vic.

    Disregard the above request. I can do what I need with the <span>s.

    Thanks again,
    Jim

Similar Threads

  1. Cross browser Marquee script- can I add text to display randomly?
    By a1000w in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-27-2010, 04:29 PM
  2. Cannot display pulled text from database in my rich text area
    By zeetec in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-16-2008, 09:36 AM
  3. Integrating text into a page with Omnislide
    By wanapitei in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-27-2008, 09:50 PM
  4. Linking to text to display within a script
    By ihmunro in forum Looking for such a script or service
    Replies: 2
    Last Post: 12-13-2007, 11:31 PM
  5. Script to display contents of a text file
    By CraigL in forum Looking for such a script or service
    Replies: 8
    Last Post: 04-12-2007, 05:37 AM

Bookmarks

Posting Permissions

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