I am trying to use the following marquee code that I found on Stack-Overflow:
Javascript Marquee to replace <marquee> tags
The full source code example here:
https://www.sanwebcorner.com/2016/07/marquee-text-without-marquee-tag-using.html
I would like to convert the jQuery animate to pure JavaScript (I'm thinking JavaScript animate).
The jQuery code is as follows:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ right: -tw });
ob.animate({ right: ww }, 20000, 'linear', function() {
ob.trigger('marquee');
});
}).trigger('marquee');
});
</script>
<div class="scroll">
<div class="scrollingtext"> Flash message without marquee tag using javascript!</div>
</div>
The marquee works quite well, but I am trying to avoid the overhead of jQuery and use pure JavaScript.
I struggled with this problem before I posted the question, and I continued to work on it after I posted. I in fact tried the eventual solution before, but incorrectly. My CSS is a little more general then the M. Lak (sanwebcorner.com) example. I want to be able to define multiple marquees with different widths.
<style type='text/css'>
.gc-marquee {
min-height: 28px;
overflow: hidden;
position: relative;
}
.gc-marquee > .gc-scrollingtext {
white-space: nowrap;
position: absolute;
}
</style>
For rendering the marquee I wanted the duration/speed to be encoded, so I used a data attribute. The text can be any number of HTML tags.
<div class="gc-marquee" id="marq-1" style="height: 80px;background-color: black;color: #dddddd;">
<h3 class="gc-scrollingtext" data-millisec="16000" style="margin: 15px auto;font-weight: bold;">Short marquee text!</h3>
</div>
Finally, the real problem is the JavaScript. I was confused by pure CSS marquees. I eventually understood the problem and got beyond the syntax.
<script>
var marqueesToShowOnce = document.querySelectorAll( 'div.gc-marquee > .gc-scrollingtext' );
function gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth ) {
if( gc_marquee == undefined || gc_marquee == null || millisec < 1000 ) {
console.log( `gc_marquee_loop: ERROR, ${millisec} ${txtWidth} ${parWidth}` );
return;
}
setTimeout( function( ) {
gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
{ duration: millisec } );
gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
}, millisec );
}
if( marqueesToShowOnce.length > 0 ) {
Array.prototype.forEach.call(marqueesToShowOnce, function( gc_marquee ) {
var millisec = parseInt( gc_marquee.dataset.millisec );
var txtWidth = gc_marquee.offsetWidth;
var parWidth = gc_marquee.parentElement.offsetWidth;
gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
{ duration: millisec } );
gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
} );
}
</script>
The marquee works quite well, and now I can avoid the overhead of jQuery and use pure JavaScript.