ASCII-animations
You CAN have more than one Javascript
ASCII-animation on a page.
revised February 2000, August 2008
This is the third part to this lesson in Javascript ASCII-animation: how to place more than one animation on one page. So far I only know that this multiple animations on one page aspect works for MSIE 4 and Netscape Navigator 3.04, but I'm assuming that it will work for anyone who can view JavaScript ASCII-animations.
Many thanks to CJRandall for writing the JavaScript code and miK for altering the line endings so that it can be viewed on most platforms.
I have just been doing some reading about JavaScript. Apparently some bozos have decided that <script language="JavaScript"> is deprecated. They prefer script type="text/javascript" language="javascript"> now. I have altered the template to reflect that change.
You'll see that while this bears similarities to the basic template, it is rather different.
<html>
<head>
<title>your title here</title>
</head>
<body bgcolor="#fff6e9" text="#660000" link="#3399ff" alink="llizard"
vlink="#3366cc" onload="animation()">
<script type="text/javascript" language="javascript">
<!--// ::: main ::: there's no real reason for the scripts to be separate
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf("mac") != -1) { var a="\r"; } else { var a="\n"; }
function animation()
{
tick_1();
tick_2();
}
//--></script>
<p><b>animation #1 title</b></p>
<script type="text/javascript">
<!--// ::: anim one ::: there's no real reason for the scripts to be separate
var max_1=0; // this is frame_max
var x_1=0; // this is frame_counter
function tick_1()
{
document.form_1.text_1.value="1st line (that remains identical)"+a+
tl_1[x_1]+
" 3rd line (that remains identical)"+a+
" 4th line (that remains identical)"+a+
" 5th line (that remains identical)"+a;
x_1++; if ( x_1 == max_1 ) x_1=0;
//if(confirm('continue?'))
setTimeout("tick_1()",70);
}
function tlist_1()
{
max_1=tlist_1.arguments.length;
for (i=0; i < max_1; i++) this[i]=tlist_1.arguments[i];
}
tl_1 = new tlist_1(
" 2nd line"+a,
" 2nd line"+a;
);
//--></script>
<form name="form_1" action="self"><textarea name="text_1" rows="6" cols="15">
</textarea></form>
<p><b>animation #2 title</b></p>
<script type="text/javascript" language="javascript">
<!--// ::: anim two ::: there's no real reason for the scripts to be separate
var max_2=0;
var x_2=0;
function tick_2()
{
document.form_2.text_2.value=tl_2[x_2]+
"4th line (that remains identical)"+a+
"5th line (that remains identical)"+a+
"6th line (that remains identical)"+a+
"7th line (that remains identical)"+a;
x_2++; if ( x_2 == max_2 ) x_2=0;
//if(confirm('continue?'))
setTimeout("tick_2()",250);
}
function tlist_2()
{
max_2=tlist_2.arguments.length;
for (i=0; i < max_2; i++) this[i]=tlist_2.arguments[i];
}
tl_2 = new tlist_2(
" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a,
" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a,
" 1st line"+a+
" 2nd line"+a+
" 3rd line"+a
);
//--></script>
<form name="form_2" action="self"><textarea name="text_2" rows="8" cols="27">
</textarea></form>
<p>Many thanks to <a href="http://www.shieldwolf.demon.co.uk/art-glry.htm#ascii-anim"
target="_top">CJRandall</a> for writing the Javascript code and miK for altering the
line endings so that it can be viewed on most platforms.</p>
<p><b>to <a href="https://llizardakaejm.wordpress.com/gallery/ascii-animations/">
llizard's Javascript ASCII-animations</a></b></p>
</body>
</html>
As you can see, you could continue on with a third, fourth, fifth, etc, etc. animation, if you wanted.
Please review the lesson on optimization if you are having trouble inserting your own animations into this template.
\
\,^^%---
<\/ \ See? It's easy when you know how....
>
>^^
/|
ejm | \
Oh, yes, and remember, Javascript animations can only be viewed with Netscape3, Opera 3.2b2 and Microsoft Explorer 4 (or higher) that have the Javascript enabled.
When you have made your Javascript ASCII-animation, please tell people about it. Put your animation onto your website and post the URL in the newsgroup alt.ascii-art.animation. Generally, Javascript ASCII-animations have a LOT of text so take up a tremendous amount of room in the newsgroup. Please do not post your whole animation there.