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

up vote 4 down vote accepted

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.

  • Thanks Richard I needed the document ready in before. I'll certainly have a look at the pure css option aswell. – Dtorr1981 Oct 20 '17 at 8:00

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.