Rocksolid Light

Welcome to RetroBBS

mail  files  register  newsreader  groups  login

Message-ID:  

Make it myself? But I'm a physical organic chemist!

devel / comp.lang.javascript / Re: Old-fashioned scrolling text

SubjectAuthor
* Old-fashioned scrolling textTuxedo
+* Re: Old-fashioned scrolling textJon Ribbens
|`- Re: Old-fashioned scrolling textTuxedo
+* Re: Old-fashioned scrolling textStefan Ram
|`- Re: Old-fashioned scrolling textJon Ribbens
+- Re: Old-fashioned scrolling textJulio Di Egidio
`- Re: Old-fashioned scrolling textMark-

1
Old-fashioned scrolling text

<ts5de5$nka0$1@solani.org>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18029&group=comp.lang.javascript#18029

  copy link   Newsgroups: comp.lang.javascript
Path: i2pn2.org!i2pn.org!weretis.net!feeder8.news.weretis.net!reader5.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: tuxedo@mailinator.net (Tuxedo)
Newsgroups: comp.lang.javascript
Subject: Old-fashioned scrolling text
Date: Fri, 10 Feb 2023 14:21:22 +0100
Lines: 82
Message-ID: <ts5de5$nka0$1@solani.org>
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==
 by: Tuxedo - Fri, 10 Feb 2023 13:21 UTC

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

Re: Old-fashioned scrolling text

<slrntuchrj.7rq.jon+usenet@raven.unequivocal.eu>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18030&group=comp.lang.javascript#18030

  copy link   Newsgroups: comp.lang.javascript
Path: i2pn2.org!i2pn.org!eternal-september.org!reader01.eternal-september.org!.POSTED!not-for-mail
From: jon+usenet@unequivocal.eu (Jon Ribbens)
Newsgroups: comp.lang.javascript
Subject: Re: Old-fashioned scrolling text
Date: Fri, 10 Feb 2023 13:32:35 -0000 (UTC)
Organization: A noiseless patient Spider
Lines: 124
Message-ID: <slrntuchrj.7rq.jon+usenet@raven.unequivocal.eu>
References: <ts5de5$nka0$1@solani.org>
Injection-Date: Fri, 10 Feb 2023 13:32:35 -0000 (UTC)
Injection-Info: reader01.eternal-september.org; posting-host="1ac027b7dca88fcc25858817b16200e0";
logging-data="1122534"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+agrh8cq9YIE0OKWZTG8GWjb1pA5PJplg="
User-Agent: slrn/1.0.3 (Linux)
Cancel-Lock: sha1:1Nk5DPQNKZICaKSn/WMfud1yIXk=
 by: Jon Ribbens - Fri, 10 Feb 2023 13:32 UTC

On 2023-02-10, Tuxedo <tuxedo@mailinator.net> 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.

Without wishing to condone the general terribleness of animated text,
I'd do something like the below perhaps:

* message is in the HTML as simple text
* doesn't use hundreds of tiny elements
* the browser calculates the necessary size of the message container
automatically, and it never changes
* wraps properly - words don't appear and then jump to the next line

<div id="scroll">
<span style="opacity: 0">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi a nisl quis erat viverra mollis at sit amet sapien.
Praesent felis dui, blandit sed urna sit amet, hendrerit
lobortis augue. Nulla eros nibh, efficitur ac elit et,
convallis sagittis eros. Donec accumsan varius dui eget
consectetur. Ut blandit vehicula lobortis. Donec commodo
lectus sollicitudin lectus ultricies, ornare posuere elit
rhoncus. Curabitur vehicula auctor eros, quis pellentesque
erat.
</span>
</div>
<script>
const message = document.getElementById('scroll').textContent.trim()
function scroll () {
const output = document.getElementById('scroll')
const length = output.firstChild.nodeType === 3
? output.firstChild.length + 1
: 1
if (length > message.length) return
output.textContent = message.substring(0, length)
if (length < message.length) {
const remaining = document.createElement('span')
remaining.style.opacity = '0'
remaining.textContent = message.substring(length)
output.appendChild(remaining)
}
setTimeout(scroll, 50)
}
scroll()
</script>

Re: Old-fashioned scrolling text

<size-20230210151439@ram.dialup.fu-berlin.de>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18031&group=comp.lang.javascript#18031

  copy link   Newsgroups: comp.lang.javascript
Path: i2pn2.org!i2pn.org!news.swapon.de!fu-berlin.de!uni-berlin.de!not-for-mail
From: ram@zedat.fu-berlin.de (Stefan Ram)
Newsgroups: comp.lang.javascript
Subject: Re: Old-fashioned scrolling text
Date: 10 Feb 2023 14:15:06 GMT
Organization: Stefan Ram
Lines: 9
Expires: 1 Jan 2024 11:59:58 GMT
Message-ID: <size-20230210151439@ram.dialup.fu-berlin.de>
References: <ts5de5$nka0$1@solani.org>
Mime-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
X-Trace: news.uni-berlin.de 1au0bAFBjPiB4CUG3WnADQLYaZLqI1DTBiLC+xO0FPeq7I
X-Copyright: (C) Copyright 2023 Stefan Ram. All rights reserved.
Distribution through any means other than regular usenet
channels is forbidden. It is forbidden to publish this
article in the Web, to change URIs of this article into links,
and to transfer the body without this notice, but quotations
of parts in other Usenet posts are allowed.
X-No-Archive: Yes
Archive: no
X-No-Archive-Readme: "X-No-Archive" is set, because this prevents some
services to mirror the article in the web. But the article may
be kept on a Usenet archive server with only NNTP access.
X-No-Html: yes
Content-Language: en-US
Accept-Language: de-DE, en-US, it, fr-FR
 by: Stefan Ram - Fri, 10 Feb 2023 14:15 UTC

Tuxedo <tuxedo@mailinator.net> writes:
>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.

If this repositioning is your main problem, I'd set the size of
the div to the maximum size the div can take during the process.

Re: Old-fashioned scrolling text

<slrntucl1p.7rq.jon+usenet@raven.unequivocal.eu>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18032&group=comp.lang.javascript#18032

  copy link   Newsgroups: comp.lang.javascript
Path: i2pn2.org!i2pn.org!eternal-september.org!reader01.eternal-september.org!.POSTED!not-for-mail
From: jon+usenet@unequivocal.eu (Jon Ribbens)
Newsgroups: comp.lang.javascript
Subject: Re: Old-fashioned scrolling text
Date: Fri, 10 Feb 2023 14:27:05 -0000 (UTC)
Organization: A noiseless patient Spider
Lines: 13
Message-ID: <slrntucl1p.7rq.jon+usenet@raven.unequivocal.eu>
References: <ts5de5$nka0$1@solani.org>
<size-20230210151439@ram.dialup.fu-berlin.de>
Injection-Date: Fri, 10 Feb 2023 14:27:05 -0000 (UTC)
Injection-Info: reader01.eternal-september.org; posting-host="1ac027b7dca88fcc25858817b16200e0";
logging-data="1132781"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1918P+oYxcAuSbV0XX+HybjJb1cWwqmCu8="
User-Agent: slrn/1.0.3 (Linux)
Cancel-Lock: sha1:6n3VcnHhvsn+p6fTnf/52AAWLpk=
 by: Jon Ribbens - Fri, 10 Feb 2023 14:27 UTC

On 2023-02-10, Stefan Ram <ram@zedat.fu-berlin.de> wrote:
> Tuxedo <tuxedo@mailinator.net> writes:
>>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.
>
> If this repositioning is your main problem, I'd set the size of
> the div to the maximum size the div can take during the process.

If I played the lottery I would simply choose the numbers that were
going to win.

You're also not considering word-wrapping.

Re: Old-fashioned scrolling text

<1dacc90c-7af3-49e1-966f-daabae43e6e3n@googlegroups.com>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18033&group=comp.lang.javascript#18033

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a37:511:0:b0:71d:9c4c:3ed2 with SMTP id 17-20020a370511000000b0071d9c4c3ed2mr1642915qkf.11.1676045448857;
Fri, 10 Feb 2023 08:10:48 -0800 (PST)
X-Received: by 2002:a05:6870:82a2:b0:163:4101:778a with SMTP id
q34-20020a05687082a200b001634101778amr1595890oae.160.1676045448448; Fri, 10
Feb 2023 08:10:48 -0800 (PST)
Path: i2pn2.org!i2pn.org!usenet.blueworldhosting.com!feed1.usenet.blueworldhosting.com!peer02.iad!feed-me.highwinds-media.com!news.highwinds-media.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Fri, 10 Feb 2023 08:10:48 -0800 (PST)
In-Reply-To: <ts5de5$nka0$1@solani.org>
Injection-Info: google-groups.googlegroups.com; posting-host=93.41.99.66; posting-account=F3H0JAgAAADcYVukktnHx7hFG5stjWse
NNTP-Posting-Host: 93.41.99.66
References: <ts5de5$nka0$1@solani.org>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <1dacc90c-7af3-49e1-966f-daabae43e6e3n@googlegroups.com>
Subject: Re: Old-fashioned scrolling text
From: julio@diegidio.name (Julio Di Egidio)
Injection-Date: Fri, 10 Feb 2023 16:10:48 +0000
Content-Type: text/plain; charset="UTF-8"
X-Received-Bytes: 2128
 by: Julio Di Egidio - Fri, 10 Feb 2023 16:10 UTC

On Friday, 10 February 2023 at 13:31:09 UTC+1, Tuxedo wrote:

> Can Javascript extract the total number of characters in a div and
> thereafter assign sequential IDs to each character within?

You can read the innerText property of the container
div and that gives you the plain text. Then here it is
in some detail:

For each character in the text, create a span element
with the character as content, a progressive id, and
possibly a class attribute for initial transparency.
Keep in an array a reference to these span elements.

Then (or contextually to the above, if one prefers),
after setting the innerHTML property of the container
div to the empty string, to clear it, append the created
span elements to the container.

Now, via the array created initially, any logic can be
run against the span elements.

> If so, running the transparent to non-transparent
> conversion loop could be done without the
> <span> cluttered HTML parts.

Indeed, not in the source code, but it is what JS will do
after load.

HTH,

Julio

Re: Old-fashioned scrolling text

<ts74e9$1apn0$1@dont-email.me>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18034&group=comp.lang.javascript#18034

  copy link   Newsgroups: comp.lang.javascript
Path: i2pn2.org!i2pn.org!eternal-september.org!reader01.eternal-september.org!.POSTED!not-for-mail
From: nospam@mapson.xyz (Mark-)
Newsgroups: comp.lang.javascript
Subject: Re: Old-fashioned scrolling text
Date: Sat, 11 Feb 2023 04:09:45 -0000 (UTC)
Organization: A noiseless patient Spider
Lines: 89
Message-ID: <ts74e9$1apn0$1@dont-email.me>
References: <ts5de5$nka0$1@solani.org>
MIME-Version: 1.0
Content-Type: text/plain; charset=iso-8859-1
Content-Transfer-Encoding: 7bit
Injection-Date: Sat, 11 Feb 2023 04:09:45 -0000 (UTC)
Injection-Info: reader01.eternal-september.org; posting-host="b79de935e8be4b2a88abfe56f0ff0b08";
logging-data="1402592"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1/YdyTwhf3xrVHVVo/csuJG82Tp2/Syky8="
User-Agent: XanaNews/1.21-f3fb89f (x86; Portable ISpell)
Cancel-Lock: sha1:7r4EaqhzlUjaiSmn54SL5RRIeww=
 by: Mark- - Sat, 11 Feb 2023 04:09 UTC

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

Re: Old-fashioned scrolling text

<tse32q$s2sf$1@solani.org>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=18037&group=comp.lang.javascript#18037

  copy link   Newsgroups: comp.lang.javascript
Path: i2pn2.org!i2pn.org!weretis.net!feeder8.news.weretis.net!reader5.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: tuxedo@mailinator.net (Tuxedo)
Newsgroups: comp.lang.javascript
Subject: Re: Old-fashioned scrolling text
Date: Mon, 13 Feb 2023 21:19:47 +0100
Lines: 53
Message-ID: <tse32q$s2sf$1@solani.org>
References: <ts5de5$nka0$1@solani.org> <slrntuchrj.7rq.jon+usenet@raven.unequivocal.eu>
Mime-Version: 1.0
Content-Type: text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding: 7Bit
Injection-Date: Mon, 13 Feb 2023 19:29:31 -0000 (UTC)
Injection-Info: solani.org;
logging-data="920463"; mail-complaints-to="abuse@news.solani.org"
User-Agent: KNode/4.14.10
Cancel-Lock: sha1:3lN1fiW+PF4a+KshpFcWAfSS/QA=
X-User-ID: eJwFwYEBwCAIA7CXRKDFcyas/59gkg5DM5CIVGpCvDIXznSPwK7kof2Oc4uzYLX21Ze1FXwrdxEk
 by: Tuxedo - Mon, 13 Feb 2023 20:19 UTC

Jon Ribbens wrote:

> On 2023-02-10, Tuxedo <tuxedo@mailinator.net> wrote:

[...]

> Without wishing to condone the general terribleness of animated text,
> I'd do something like the below perhaps:
>
> * message is in the HTML as simple text
> * doesn't use hundreds of tiny elements
> * the browser calculates the necessary size of the message container
> automatically, and it never changes
> * wraps properly - words don't appear and then jump to the next line
>
> <div id="scroll">
> <span style="opacity: 0">
> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
> Morbi a nisl quis erat viverra mollis at sit amet sapien.
> Praesent felis dui, blandit sed urna sit amet, hendrerit
> lobortis augue. Nulla eros nibh, efficitur ac elit et,
> convallis sagittis eros. Donec accumsan varius dui eget
> consectetur. Ut blandit vehicula lobortis. Donec commodo
> lectus sollicitudin lectus ultricies, ornare posuere elit
> rhoncus. Curabitur vehicula auctor eros, quis pellentesque
> erat.
> </span>
> </div>
> <script>
> const message = document.getElementById('scroll').textContent.trim()
> function scroll () {
> const output = document.getElementById('scroll')
> const length = output.firstChild.nodeType === 3
> ? output.firstChild.length + 1
> : 1
> if (length > message.length) return
> output.textContent = message.substring(0, length)
> if (length < message.length) {
> const remaining = document.createElement('span')
> remaining.style.opacity = '0'
> remaining.textContent = message.substring(length)
> output.appendChild(remaining)
> }
> setTimeout(scroll, 50)
> }
> scroll()
> </script>

It works perfectly while a window is more or less idle, so running scroll()
onload once all other objects have fully loaded, texts can scroll smoothly.

Thank you for sharing this pure vanilla Javascript magic!

Tuxedo

1
server_pubkey.txt

rocksolid light 0.9.8
clearnet tor