Path: csiph.com!weretis.net!feeder8.news.weretis.net!reader5.news.weretis.net!news.solani.org!.POSTED!not-for-mail From: Tuxedo Newsgroups: comp.lang.javascript Subject: Old-fashioned scrolling text Date: Fri, 10 Feb 2023 14:21:22 +0100 Lines: 82 Message-ID: Mime-Version: 1.0 Content-Type: text/plain; charset="ISO-8859-1" Content-Transfer-Encoding: 7Bit Injection-Date: Fri, 10 Feb 2023 12:31:02 -0000 (UTC) Injection-Info: solani.org; logging-data="774464"; mail-complaints-to="abuse@news.solani.org" User-Agent: KNode/4.14.10 Cancel-Lock: sha1:ZsIQDnH6T5WCRcJNk0vKA/wTkvA= X-User-ID: eJwFwYkBwCAIA8CV5Emk41gD+4/gHYLGu5NgYjD2hXd7nljXWdG0UqCN+lFHJkxMlnzt3PIHDYsQnw== Xref: csiph.com comp.lang.javascript:41188 This prints a plain text string one character at the time into a 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:

scrolling text

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 cluttered HTML parts. Or are there better JS/CSS methods to create this same type of effect? Many thanks for any ideas. Tuxedo