Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #41188

Old-fashioned scrolling text

Show all headers | View raw

This prints a plain text string one character at the time into a div:

<script>
var msg_i = 0;
var msg_txt = 'Scrolling text';

function message() {
if (msg_i < msg_txt.length) {
document.getElementById("message").innerHTML += msg_txt.charAt(msg_i);
msg_i++;
setTimeout(message, 50);
}
}
window.onload = function(){
message();
}
</script>

<div id="message"></div>

The dimensions of the div gradually expand while other elements reposition 
themselves into how the final document is arranged, which depending on the 
display, is not necessarily ideal.

Secondly, the text is a JS string, while it better belongs as typed text 
within the document's body.

Another scrolling text version below has the text string in the body with an 
(almost) transparent message div, whereby each character is enclosed in 
individually numbered ID spans:

<style>
#message > span{
opacity:0.1;
}
</style>

<script>
var msg_i = 0;
var msg_txt = 13;

function message() {
if (msg_i < msg_txt) {
document.getElementById(msg_i).style.opacity="1";
msg_i++;
setTimeout(message, 50);
}
}
window.onload = function(){
message();
}
</script>

</head><body>

<div id="message">

<span id="0">s</span><span id="1">c</span><span id="2">r</span><span 
id="3">o</span><span id="4">l</span><span id="5">l</span><span 
id="6">i</span><span id="7">n</span><span id="8">g</span>

<span id="9">t</span><span id="10">e</span><span id="11">x</span><span 
id="12">t</span>

</div>

By initially displaying transparent text, the dimensions of the div and text 
segment are known as the document first loads and so everything else on the 
page remains unchanged while each letter becomes fully visible.

However, with all the spans and IDs in the message segment, it's not 
maintenance friendly for anything except short text strings.

Can Javascript extract the total number of characters in a div and 
thereafter assign sequential IDs to each character within? If so, running 
the transparent to non-transparent conversion loop could be done without the 
<span> cluttered HTML parts. 

Or are there better JS/CSS methods to create this same type of effect?

Many thanks for any ideas.

Tuxedo

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Old-fashioned scrolling text Tuxedo <tuxedo@mailinator.net> - 2023-02-10 14:21 +0100
  Re: Old-fashioned scrolling text Jon Ribbens <jon+usenet@unequivocal.eu> - 2023-02-10 13:32 +0000
    Re: Old-fashioned scrolling text Tuxedo <tuxedo@mailinator.net> - 2023-02-13 21:19 +0100
  Re: Old-fashioned scrolling text Jon Ribbens <jon+usenet@unequivocal.eu> - 2023-02-10 14:27 +0000
  Re: Old-fashioned scrolling text Julio Di Egidio <julio@diegidio.name> - 2023-02-10 08:10 -0800
  Re: Old-fashioned scrolling text "Mark-" <nospam@mapson.xyz> - 2023-02-11 04:09 +0000

csiph-web