Scroll text within a div in a module

Question

A little question here. A client wants a temporary notice placed on the site that scrolls horizontally inside a module. I have applied the basics of this fiddle, created a custom.js file that loads in the replaced the $ with Jquery but it still does not scroll. I am not receiving any JS errors in the console either? I have set 'Prepare content' to yes and it doesn't make a difference.

The html code itself is:

<div style="width: 100%;">
<div class="marquee" style="width: 50%; float: left; padding-top: 8px;"><span class="marquee-text"><strong><a href="/thurso" title="Thurso opening times changing">Thurso </a></strong>Late Opening times changing. As from Nov 6th we will shut at 6pm</span></div>
<div style="text-align: right; width: 50%; float: right;"><a href="index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=111"><strong>Thurso</strong></a>&nbsp;01847 892387 &nbsp; <a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=140"><strong>Wick</strong></a>&nbsp;01955&nbsp;602088&nbsp;&nbsp;&nbsp;<a href="https://www.facebook.com/DonaldSMcGregorPartners/" target="_blank" rel="noopener noreferrer"><i class="fa fa-facebook-official fa-2x"></i></a></div>
</div>

and the adapted js code is:

var marquee = jQuery('div.marquee');
marquee.each(function() {
    var mar = jQuery(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('span.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});

Any suggestions as to how I can get this to work? Thank you in advance. enter link description here

Answer 1

My guess would be that you are calling the javascript before the html.

Try wrapping it in jQuery( document ).ready so that it loads after the html, ie

jQuery( document ).ready(function() {
var marquee = jQuery('div.marquee');
marquee.each(function() {
    var mar = jQuery(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('span.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
});

If that doesn't work, can you expand your question to explain how and where you are adding your code, eg are you creating a bespoke module?

Also note that it is possible to make a marquee in pure css without the need for javascript.