A real challenge for JavaScript magicians!

[Jan van Erp]

I wonder if anybody of you is able to help me out.
For some time now, I have been working on a rather ambitious project, my PANTACYCLOPEDIA - I'll refer to it as P from here on.
P is... will be... a huge book-like structure on what I call 'Panta', short for 'the whole of reality': the part of the Universe that we humans know of PLUS everything that still belongs to the realm of the unknown - and yes, the Greek philosopher Heraklitos (the 'Panta rhei' guy) is one of my inspirators.
I originally intended P to be a (rahter huge) book, 2000 pages or so, but in the process of writing it, again and again I discovered that ordinary language simply is too 'one-dimensional' to allow adequate (and hopefully even some true) statements describing Panta. That is why I have invented a new instrument, 2-language: this is a way to get somewhat closer to Panta without losing touch with what ordinary human beings (such as myself) are able to understand.
However, 2-language has one major drawback: printing 2-text is practically impossible. That is because 2-language, among other things (I won't bother you with 2-grammar now) is largely based on the use of 2-words: words that express two (or more) aspects of a certain piece of Panta at the same time, thereby allowing seemingly paradoxical expressions in a relatively effortless manner. Take, for example, the wave-particicle duality well-known from quantum physics, in which a certain natural phenomenon isn't either a wave or a particle; no, it is BOTH, simulaneously. So a word to decribe such a 'two-ness' would have to be something like pa-w-rt-a-i-v-cl-e-e. Or 'wave' plus 'particle' printed on top of each other, or something like a word fraction consisting of a superscript plus a subscript term.
Or...
Indeed, in the last twenty years or so, I have done quite a lot of experimenting. I've tried all kinds of printing techniques; I've tried some calligraphy (in some cases, you can actually write a word in such a way that it 'is' two words at the same time), and finally, I have tried using small (word-sized) GIF animations - you can see a few examples of those on my still very dudimentary Panta test site, http://members.ams.chello.nl/j.van.erp/English.htm. But so far, I did not find a really workable, esthetically satisfying solution - and then I thought of JavaScript.

So: <B>is any of you clever enough to write a (preferably short) script for me that allows me to use 2-words in my Panta project?</B> These are the minimum requirements:
- I would like to have a script that puts word A on the screen, then (after an adjustable interval) replaces it with word B, then brings back A again - or a word C, to be followed with a word D, etc. - and repeats this cycle a number of times (also adjustable, of course!), and stops/starts this word cycling after a MouseOver event.
- These dynamic words should of course be in the same font face, size etc. as the surrounding text - they should <i>look</I> like ordinary words, only <I>behave</I> differently.
- On certain pages of my 'book' I plan to use quite a lot of 2-words (I think my present record is about 50 of them on a single page).
- It would be very nice if I could give my reader the opportunity to switch this rather dazzling feature on and off.
- Preferably, the 2-script I would like to see works on all platforms, with all browsers, with or without CSS.

Of course, the author of My Ideal 2-Script will live on forever: he or she will be credited extensively in PANTACYCLOPEDIA. (Oh, you'd rather get some money. Too bad. I do not have any.)

Well?

[David Harrison]

I've been away for a week and just got back today. I was browsing the forums and found this thread with no reply. I don't know if you've already got a solution but if you haven't then is this any good:

[Jan van Erp]

Thanks a lot, Lavalamp! I'm looking forward to testing your script.

[David Harrison]

I hope it works for you.

[Jan van Erp]

Thanks, Lavalamp.

Your Panta script is almost perfect: it indeed does put words on my screen that, after an adjustable interval, 'change' into other words - 'know' becomes 'live', for instance. These dynamic words have the same font face, size etc. as the surrounding text; I can even set the 'cycle speed'! Also I found that your script even allows the use of more-than-two-words: in my test text, I was able to put a 4-word consisting of the terms 'black', 'white', ýellow' and 'blue'. So I really can start using 2-words in earnest now; great.
However, my main remaining problem is, and I hope that either you or anybody else will be able to help me out here: <B>how do I use different kinds of words on the same page - eight 2-words, two 3-words plus one 5-word, for example?</B> Simply copying the code of your 2-word solution doesn't work, of course, even after doing some amateurish editing to prevent duplicate variable names. So how do I get several working but slightly different Panta scripts on the samen page? (Layman's terms, please: I'm just a simple writer, not a programmer!)

But again, thanks!

[David Harrison]

Well I went downstairs and stroked the cat for a bit while I was thinking, then I had a great idea and came up with this little beauty. A masterpiece if I do say so myself.

The script is a little different than before so I've added a few concise instructions along the way, if the're a little too concise then let me know and I'll elaborate a bit.

Also you should note that I've changed the div tags into span tags, this is because div tags are block elements and will force themselves onto a new line of their own whereas span tags are inline and so will sit happily among other text.

[David Harrison]

Ok, variable names can only consist of the following characters :
* numbers
* letters
* the underscore "_"
* the dollar sign "$"

And varible names cannot start with a number.

Here is the updated Panta script, which not only allows you to control how long the gap is between the word rotation, but also allows you to assign upper and lower limits and the computer will calculate a random time between them.

I will, in another somewhat longer post, go through the script and highlight all of the variables, and if you want I'll also try and explain how the script works. Although between those two markers it does get very complicated and immensly confusing with all of the numbers and similar/identical array names.

WARNING: Keep the number of panta words on each page as low as possible, for each set of words an infinite loop is started and if there are too many then some computers may crash or slow down.

[David Harrison]

Oh, by the way. I forgot to mention, yes variable names are case sensitive.

I have gone through the script and highlighted where each variable has been created and I have also added a few comments here and there. I decided that it was too long to post in here though so I've attached it as a .txt file.

[AdamBrill]

You might want to take a look at this:<html>
<head>
<title>Panta</title>
<script type="text/javascript">
function word(the_words,min_wait,max_wait,id){
test = new Date();
this.the_words=the_words;
this.min_wait=min_wait;
this.max_wait=max_wait;
this.id=id;
this.current=-1;
this.time=test.getTime();
}
words = new Array();
//format: words[words.length] = new word(Array("any","number","of","words"),min_wait_time,max_wait_time,id_of_span);
words[words.length] = new word(Array("1","2"),1000,1000,1);
words[words.length] = new word(Array("3","4","5"),2000,2000,2);
words[words.length] = new word(Array("6","7"),1000,1000,3);
words[words.length] = new word(Array("8","9","10"),1500,1500,4);
function start(){
setInterval("run()",100);
}
function run(){
test = new Date();
for(x=0; x<words.length; x++){
if(words[x].time<test.getTime()){
words[x].time=words[x].min_wait+test.getTime()+Math.floor(Math.random()*(words[x].max_wait-words[x].min_wait));
words[x].current++;
if(words[x].current>=words[x].the_words.length){
words[x].current=0;
}
document.getElementById(words[x].id).innerHTML=words[x].the_words[words[x].current];
}
}
}
</script>
</head>
<body onload="start()">
<span id=1></span>&nbsp;<span id=2></span>&nbsp;<span id=3></span>&nbsp;<span id=4></span>
</body>
</html>To add more words, just add more of these lines:

words[words.length] = new word(Array("1","2"),1000,1000,1);

The format is stated in the code, so you shouldn't have any problems with it.

This code is much simpler, easier to add more words, and easier on the computer, so you shouldn't have any problems with it. Any computer should be able to handle any number of words(unless you get rediculous), so...

[David Harrison]

That's quite clever I didn''t think of that, running the script every 1/10 th of a second to check up and see if any words need changing, although I must say that you should use numbers for id's. But you could easily change those to letters. Other than that it's pretty good.

Oh, actually I just spotted the dreaded word innerHTML.
You should really use:

document.getElementById("hi").replaceChild(document.createTextNode("Test"), document.getElementById("hi").firstChild);

[pyro]

Originally posted by lavalamp
Oh, actually I just spotted the dreaded word innerHTML.Just to point out... while innerHTML is not standard, it is nearly as well supported as javascript itself...

Also, I'm assuming you knew this, but numbers are perfectly valid characters in for ID's, as long as they are not used as the first character (so AdamBrill should change it a bit...)

[David Harrison]

Yeah I was rushing a bit, I should already be offline right now. You may or may not have noticed that I also missed the n't off shouldn't.

Question for next time though, why can't numbers be used at the start of variable names or id's???

[Jan van Erp]

Hmm, judging from your reactions, the (im)modest request I had for you all has turned out to be an even more interesting challenge than I expected it to be...
To everybody who contributed: thank you! Your collective effort has resulted in a Panta script that exactly suits my needs... though it would even be better if every individual cycling word could be turned on/off by a MouseOver event. But that really is too much to ask, I'm afraid.
Or isn't it?

Anyway, my first 'real live' PANTACYCLOPEDIA pages will start appearing on a Web address near to you in a few months from now. When exactly? I do not know yet, but at an appropriate time, I'll post an announcement in this JavaScript group, okay? Then you'll be able to see for yourself if all this really was worth the trouble you took. In the meantime, if I can return your favour in any way...

Again, thanks! You're great!

Jan van Erp

In Panta,
all roads REALLY are crossings!