I'm getting data from an API and I would want to display it on a table. However, this table has a marquee scrolling feature.
The contents should display up as shown on the sample code. That works very well.
The challenge is the scroll delay, I would like to display the records, then delay for say 3 seconds then start the loop again.
At the moment, the delay starts after around 80 seconds, guess it's the default?
Hold on, I know marquee is Deprecated, however, it works for this case.
Does anyone know how to go about it?
var response = [
{
"collected_received": 805,
"tested": 526,
"perc_less_1000": 0.8768267,
"rejected": 1
},
{
"collected_received": 788,
"tested": 1933,
"perc_less_1000": 0.9077469,
"rejected": 0
},
{
"collected_received": 114,
"tested": 2342,
"perc_less_1000": 0.9503951,
"rejected": 16
},
{
"collected_received": 492,
"tested": 767,
"perc_less_1000": 0.8912732,
"rejected": 7
},
{
"collected_received": 186,
"tested": 909,
"perc_less_1000": 0.9170404,
"rejected": 1
},
{
"collected_received": 115,
"tested": 378,
"perc_less_1000": 0.931694,
"rejected": 1
},
{
"collected_received": 26,
"tested": 368,
"perc_less_1000": 0.9466292,
"rejected": 0
}
];
var trHTML = '';
$.each(response, function (i, item) {
trHTML += '<tr><td width="130px"><div style="width: 35px;border-radius: 0.1vw; text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.collected_received + '</div></td><td width="90px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.tested + '</div></td><td width="130px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.perc_less_1000.toFixed(1) + '</div></td><td width="90px"><div style="width: 35px;border-radius: 0.1vw;text-align:center; border: 0.1vw rgba(255,255,255,.7) solid;font-size: 0.8em; margin: 0.1vw; padding:0px 0px 0px 0px;">' + item.rejected + '</div></td></tr>';
});
$('#records_table').append(trHTML);.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 140s linear 0s infinite;
}
.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
top: 40em
}
100% {
top: -300em
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row contain"
style="background-color: rgba(0,0,0,.15); margin:2px; height:150vh; max-height:94vh;border-radius: 0.9vw;">
<div class="table-responsive">
<table class="table table-condensed table-striped table-sm" style="color: white;"
id="table_fixed">
<thead>
<tr>
<th width="130px">Received</th>
<th width="90px"> Tested </th>
<th width="130px">Total (%)</th>
<th width="90px">Rejected </th>
</tr>
</thead>
</table>
</div>
<div class="table-responsive" id="contain">
<table class="marquee table table-condensed table-striped table-sm" style="color: white;truespeed:10;"
id="records_table">
<tbody>
</tbody>
</table>
</div>Actually, there is no option to set the delay of next iteration but we can manage it through the small changes in CSS as below, please try with this CSS
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 20s linear 0s infinite;
}
.marquee:hover {
animation-play-state: paused;
}
@keyframes marquee {
0% {
top: 30em;
}
100% {
top: -30em;
}
}