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

Groups > comp.lang.javascript > #41188 > unrolled thread

Old-fashioned scrolling text

Back to article view | Back to comp.lang.javascript

Contents

  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

#41188 — Old-fashioned scrolling text

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

[toc] | [next] | [standalone]

#41189

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>

[toc] | [prev] | [next] | [standalone]

#41196

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

[toc] | [prev] | [next] | [standalone]

#41191

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.

[toc] | [prev] | [next] | [standalone]

#41192

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

[toc] | [prev] | [next] | [standalone]

#41193

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web