Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2003
    Location
    Seoul, Korea
    Posts
    329
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing text per every 5 minutes.

    I like to make something like the following.

    Code:
    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?
    Get my greedy up

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    Code:
    <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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.


    Code:
    <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>
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

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