Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Modifying a typing text script. (easy question)

MoonsideMoonside Member Posts: 9
Hi there guys, I got this script that types out text and fades nicely into the sky but I wanted a variation on it and so I figured people around here could help me with it.

Here's the script:





.telestyle {
position:absolute;
visibility:visible;
font-size:8pt;
font-family:Arial;
font-weight:normal;
color:#000066;
top:80px;
left: 60px;
height: 32px;
width: 500px;
filter:alpha(opacity=100);
}


var message = " www.AceJS.com "
var character = 0;
var to_print = "";
var ypos = 80;
var next = 0 ;
var fade = 100 ;
var next_message = new Array() ;
next_message[0] = "The Free Script Directory"
next_message[1] = "AceJS.com takes it to the extreme"
next_message[2] = "Make sure to re-visit AceJS.com for new scripts"
function doText(text) {
if (document.all) {
if (character <= text.length - 1) {
to_print += text.charAt(character);
teletext.innerHTML = to_print;
character++;
}
else
scrollIt();
}
setTimeout("doText(message)", 100);
}
function scrollIt() {
if (ypos >= 40) {
ypos -= 1;
fade -= 4;
if (ypos < 45) {
teletext.innerHTML = "" ;
}
}
else {
ypos = 80;
character = 0;
to_print = "";
nextMessage();
fade = 100;
}
teletext.style.top = ypos;
teletext.filters.alpha.opacity = fade;
}
function nextMessage() {
message = next_message[next]
if (next == 4) {
next = 0;
}
else
next++;
}
// End -->


















So as you can see if you try it out, it fades nicely. But I don't know enough to modify it to simply fade out instead of fading upwards. So if anyone thinks that could be easy enough, I'd appreciate it a lot ^_^
One more thing if possible. Can the timing between messages be adjusted so that it waits after the text is done instead of going on right away? I changed it to 80 instead of 100 in the line

setTimeout("doText(message)", 100);

and that typed out nicely, but it switched messages too quickly then :( Like maybe another setTimeout could be added there, after each message or something? Or even better, a way to wait for someone to click on it before proceeding :D

Hey thanks a lot for your time. Bye everyone!

Comments

  • suchaputzsuchaputz Member Posts: 15
    : Hi there guys, I got this script that types out text and fades nicely into the sky but I wanted a variation on it and so I figured people around here could help me with it.
    :
    : Here's the script:
    :
    :
    :
    :
    :
    : .telestyle {
    : position:absolute;
    : visibility:visible;
    : font-size:8pt;
    : font-family:Arial;
    : font-weight:normal;
    : color:#000066;
    : top:80px;
    : left: 60px;
    : height: 32px;
    : width: 500px;
    : filter:alpha(opacity=100);
    : }
    :
    :
    : var message = " www.AceJS.com "
    : var character = 0;
    : var to_print = "";
    : var ypos = 80;
    : var next = 0 ;
    : var fade = 100 ;
    : var next_message = new Array() ;
    : next_message[0] = "The Free Script Directory"
    : next_message[1] = "AceJS.com takes it to the extreme"
    : next_message[2] = "Make sure to re-visit AceJS.com for new scripts"
    : function doText(text) {
    : if (document.all) {
    : if (character <= text.length - 1) {
    : to_print += text.charAt(character);
    : teletext.innerHTML = to_print;
    : character++;
    : }
    : else
    : scrollIt();
    : }
    : setTimeout("doText(message)", 100);
    : }
    : function scrollIt() {
    : if (ypos >= 40) {
    : ypos -= 1;
    : fade -= 4;
    : if (ypos < 45) {
    : teletext.innerHTML = "" ;
    : }
    : }
    : else {
    : ypos = 80;
    : character = 0;
    : to_print = "";
    : nextMessage();
    : fade = 100;
    : }
    : teletext.style.top = ypos;
    : teletext.filters.alpha.opacity = fade;
    : }
    : function nextMessage() {
    : message = next_message[next]
    : if (next == 4) {
    : next = 0;
    : }
    : else
    : next++;
    : }
    : // End -->
    :
    :
    :
    :
    :
    :
    :
    :

    :

    :
    :
    :
    :
    :
    :
    :
    :
    :
    : So as you can see if you try it out, it fades nicely. But I don't know enough to modify it to simply fade out instead of fading upwards. So if anyone thinks that could be easy enough, I'd appreciate it a lot ^_^
    : One more thing if possible. Can the timing between messages be adjusted so that it waits after the text is done instead of going on right away? I changed it to 80 instead of 100 in the line
    :
    : setTimeout("doText(message)", 100);
    :
    : and that typed out nicely, but it switched messages too quickly then :( Like maybe another setTimeout could be added there, after each message or something? Or even better, a way to wait for someone to click on it before proceeding :D
    :
    : Hey thanks a lot for your time. Bye everyone!
    :
    Hi, you can keep the text from fading upwards (scrolling)
    by simply removing the line -- teletext.style.top = ypos; ---
    where ypos controls vertical placement of the text. In doing
    this, most of the scrollIt() function becomes useless code
    since its main purpose was to fade the text up (scroll).
    good luck, suchaputz
  • MoonsideMoonside Member Posts: 9
    Hey thanks! (See, I was thinking it would be that easy ;)

    Now I wanna find a way to make it wait at the end of a message. I tried a setTimeout but I couldn't get it to work. So I was thinking maybe calling the nextMessage function from an onClick event somewhere in the document. Problem is, it continues to repeat a message over and over if it can't go on to the next one. Anyone have an idea why that is?
    If I could get it to "wait" after it prints a message until I call on nextMessage() that would be great. Thanks for helping out!
  • suchaputzsuchaputz Member Posts: 15
    [b][red]This message was edited by suchaputz at 2003-1-1 4:3:32[/red][/b][hr]
    here have a look at the script this way. deleted the useless code that was there for the fade-up. tweaked some speeds and such to pause after its typed. and put in a button so you can manually call the next message. to revert back to auto next-message just delete the comment tags. changed name of scrollIt()to fadeIt. good luck, suchaputz




    .telestyle {
    position:absolute;
    visibility:visible;
    font-size:18pt;
    font-family:Arial;
    font-weight:normal;
    color:#000066;
    top:80px;
    left: 60px;
    height: 32px;
    width: 500px;
    filter:alpha(opacity=100);
    }


    var message = " http://www.AceJS.com "
    var character = 0;
    var to_print = "";
    var next = 0 ;
    var fade = 100 ;
    var next_message = new Array() ;
    next_message[0] = "The Free Script Directory"
    next_message[1] = "AceJS.com takes it to the extreme"
    next_message[2] = "Make sure to re-visit AceJS.com for new scripts"

    function doText(text)
    {
    if (document.all)
    {
    if(character <= text.length - 1)
    {
    to_print += message.charAt(character);
    teletext.innerHTML = to_print;
    character++;
    setTimeout("doText(message)", 100); //typed speed
    }
    else
    {
    setTimeout("fadeIt()",1500); //"wait" after typed

    }
    }
    }

    function nextMessage()
    {
    message = next_message[next]
    if (next == 4)
    {
    next = 0;
    }
    else
    next++;
    setTimeout("doText(message)", 800);
    }

    function fadeIt()
    {
    var fadeAmnt = 4
    fade -= fadeAmnt;
    teletext.filters.alpha.opacity=fade;
    if (fade >= fadeAmnt)
    {
    setTimeout("fadeIt()",70) // speed of fade
    }
    else
    {
    teletext.innerHTML=""
    character = 0;
    to_print = "";
    fade = 100;
    teletext.filters.alpha.opacity = fade;
    //// nextMessage(); /// delete tags to
    /// auto-call nxtMsg()
    }
    }

    // End -->
























    // call nextMessage() manually
















  • MoonsideMoonside Member Posts: 9
    It works very nicely ^_^ Thanks a whole lot! I'll show ya the modified script maybe later sometime. I made it so it fades away when you click on it, and also I made a button appear when it's done typing to let you know it's ready to go on :D Thanks again!
Sign In or Register to comment.