De antemano muchas gracias por su ayuda.
Código Javascript:
Ver original
var reload=false; function reloadMarquesina(){ console.log('reloadhMarquesina') loadMarquesina(); } function loadMarquesina(){ console.log('loadMarquesina') $( "#resumen" ).html(); var route = "<?=route('actividadResumen');?>"; $.getJSON( route, { format: "json" }) .done(function(res) { $( "#actividadResumen" ).show(); $.each(res, function( key, value ) { $( "#resumen" ).append("<span class='resumenContenedor'> <span class='"+value.tipo+"'> <img class='logoResumen' src="+value.logo+" /> </span> <span class='"+value.tipo+"'>"+value.empresa+" "+value.mensaje+ " </span> </span>"); }); setTimeout(function(){ console.log('reload=true'); reload = true; reloadMarquesina(); }, 5000); }) .fail(function( jqxhr, textStatus, error ) { $( "#actividadResumen" ).hide(); var err = textStatus + ", " + error; //console.log( "Request Failed: " + err ); }); }
Código CSS:
Ver original
.marqueeResumen { width: 100%; margin: 0 auto; overflow: hidden; white-space: nowrap; box-sizing: border-box; animation: marquee 50s linear infinite; } .marqueeResumen:hover { animation-play-state: paused } /* Make it move */ @keyframes marquee { 0% { text-indent: 27.5em } 100% { text-indent: -105em } } .resumenContenedor{ margin-right: 500px; } @media(max-width: 768px){ .resumenContenedor{ margin-right: 200px; } } .resumenpostulacion{ padding: 8px 5px 0px 5px; color: #97bc4d; } .resumencantidad{ padding: 8px 5px 0px 5px; } .logoResumen{ padding-top: 6px; width: 48px; }