PDA

View Full Version : Integrating a text fade script with a text display script



Jim Weinberg
10-09-2014, 07:18 PM
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:


<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:



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:



<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.

vwphillips
10-10-2014, 11:26 AM
<!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>

Jim Weinberg
10-10-2014, 01:24 PM
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

vwphillips
10-10-2014, 01:55 PM
also I missed the relevence of the spans


<!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.getElementBy Id(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>

Jim Weinberg
10-10-2014, 03:14 PM
Hi Vic.

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

Thanks again,
Jim

Jim Weinberg
10-10-2014, 03:30 PM
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

Jim Weinberg
10-10-2014, 03:42 PM
Vic.

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

Thanks again,
Jim