I'm developing a monitoring system and need to pick up a text from a log file and display it on a monitoring screen. This text should move within textarea from top to bottom. Does anyone know how I should proceed?
I'm developing a monitoring system and need to pick up a text from a log file and display it on a monitoring screen. This text should move within textarea from top to bottom. Does anyone know how I should proceed?
You can use the marquee
tag for this purpose. For example:
<marquee direction="up" width="250" height="100" style="border:1px solid">
Texto rolando
</marquee>
However, it is not recommended because it is Deprecated by W3C. It seems that W3C is planning to create a direct element in CSS to achieve this effect, see here link . p>
It is also accused of having problems with performance, since it is old. There are some plugins that try to fix this problem, such as link
You can also use pure CSS, which is most recommended because you will not have browser compatibility issues. 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>