...

View Full Version : Changing text per every 5 minutes.



joonstar
11-03-2006, 10:38 PM
I like to make something like the following.


There are 3 texts, i.e. text1, text2, text3, in the page,

(1) When the page is loading, text1 will be shown.

(2) 5 seconds after loading,
text1 will be disappeared. At the same time text2 will be shown.

Or
text1 is moving upward and will be disappeared soon.
At the same time text2 is comging from the bottom of the area
and will be in the center of the area.

(3) another 5 seconds,
text2 will be disappeared. At the same time text3 will be shown.

Or
text2 is moving upward and will be disappeared soon.
At the same time text3 is comging from the bottom of the area
and will be in the center of the area.

(4) another 5 seconds,
text3 will be disappeared. At the same time text1 will be shown.

Or
text3 is moving upward and will be disappeared soon.
At the same time text1 is comging from the bottom of the area
and will be in the center of the area.

: :


Can I make it with your help?

brandonH
11-04-2006, 09:17 AM
<html>
<head><title></title></head>

<body onload="changeText();">
<div id=textRange></div><br>

<script type=text/javascript>
var delay="10"; //how many seconds you wnat the delay to be
var count='0';
var Texts=new Array();
Texts[0]="what text you want to be displpayed first";
Texts[1]="what text you want to be displayed second";
Texts[2]="what text you want to be displayed third";
function changeText(){
document.getElementById('textRange').innerHTML=Texts[count];
count++;
if(count==Texts.length){count='0';}
setTimeout("changeText()",delay*1000);
}

</script>



</body>
</html>



if you want a transition, you could use one of many filters you can put into the div's style. filters dont work on all browsers though, I.E. only i believe. but you could still have it do the filter and in any browser that doesnt support it, it'll just get ignored and the text will just change without a transition.

brandonH
11-04-2006, 10:49 AM
here is an example for you if you wish to use filter transitions:
this does it for 3 texts. it also changes the background color on each change. it is easy to add more text and background colors.
if you do not wnat it to change colors just put the same color value in each BGcol value.




<html>
<head></head>
<body onload="textToggle();">

<script type=text/javascript>
var bToggle = 0;
var delay="8"; //how many seconds you want the delay to be
var count='0'; //do not change this value
var Texts=new Array();
//to add more text items put them below as such :Texts[3]="whatever"; Texts[4]="whatever"; ect..........
// be sure that if you add a text item here that you also add a background color in the BGcols array.
Texts[0]="text for first display.";
Texts[1]="text for second display this one is going to be extremely long just for the heck of it";
Texts[2]="text for third display.";

var BGcols=new Array();
BGcols[0]="#7777ff";
BGcols[1]="#9999ff";
BGcols[2]="#bbbbff";


function textToggle() {
oDiv.filters[0].Apply();
oDiv.style.backgroundColor=BGcols[count];
oDiv.innerHTML=Texts[count];
oDiv.filters[0].Play();count++;

if(count==Texts.length){count='0';}
setTimeout("textToggle()",delay*1000);
}
</script>


<!-- This DIV is the target of the transition. -->
<DIV ID="oDiv" nowrap STYLE="height:20px; width:250px; font-size:14pt;background-color:#ffffff;
filter:progid:DXImageTransform.Microsoft.Wipe(GradientSize=0.5, wipeStyle=1, motion='reverse', duration=1)">
<span> </span>
</DIV>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum