Moving text within a textarea

Asked

Viewed 805 times

-3

I am developing a monitoring system and need to take a text from a log file and show on a monitoring screen. This text should move within the top-down textarea. Does anyone know how to proceed?

javascript jquery html
  • 2

    It would be good to edit the question and for more details than you need to happen in practice. As it stands, it will depend on the power of divination of readers. Suggested reading for better use of the site: [Ask]. To add more details to the question, just use the link [Edit].

  • Thanks @Earendul. Solved. Is that I thought the 'marquee' was just right to left.

1 answer

7


You can use the tag marquee to that end. For example:

<marquee direction="up" width="250" height="100" style="border:1px solid">
   Texto rolando
</marquee>

However, it is not recommended as it is Deprecated by W3C. It seems that W3C is planning to create a direct element in CSS to achieve this effect, see here http://www.w3.org/TR/css3-marquee/.

It is also accused of having problems with performance, since it is old beem. There are some plugins that try to solve this problem, as the https://remysharp.com/2008/09/10/the-silky-smooth-marquee

You can also use pure CSS, which is more recommended as it will not have compatibility problems browser. An example:

.marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-animation: marquee 3s linear infinite;
    -moz-animation: marquee 3s linear infinite;
    -o-animation: marquee 3s linear infinite;
     animation: marquee 3s linear infinite;
}

@-webkit-keyframes marquee {
    0%   { margin-top: 100% }
    100% { margin-top: -10% }
}
@-moz-keyframes marquee {
    0%   { margin-top: 80% }
    100% { margin-top: -10% }
}
@-o-keyframes marquee {
    0%   { margin-top: 80% }
    100% { margin-top: -10% }
}
@keyframes marquee {
    0%   { margin-top: 80% }
    100% { margin-top: -10% }
}
.quadro {
  border: 1px solid;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
<div class="quadro">
  <p class="marquee">Testando</p>
</div>

  • 1

    Thank you. It worked.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.