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

Groups > comp.lang.javascript > #41193

Re: Old-fashioned scrolling text

Show all headers | View raw

Tuxedo wrote:

> 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

https://github.com/EverestSoftwareLLC/Marquee

Back to comp.lang.javascript | Previous | Next — Previous 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