Home/ Questions/Q 8862299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T15:41:43+00:00

I want to create an marquee that start at first, but every 10 seconds,

  • 0

I want to create an marquee that start at first, but every 10 seconds, the marquee will stop for 5 seconds before the marquee start again.

How can I do that?

I only manage to create a timer that stop the marquee after 5 seconds : 

<script>
    function startLoop() {
    setInterval( "doSomething()", 5000 ); }
    function doSomething() {
    document.getElementById('myMarquee').stop(); }
</script>

HTML

<body onload="startLoop();">
   <marquee direction="right" id="myMarquee">This is a marquee.</marquee>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A few days ago I needed something similar to your problem. I soon figured out that marquee is not a standard element, so you can’t use it in cross-browser solutions.

    I have extracted the animation part, based on jQuery, I used in my solution, you can see the effect in this jsFiddle

    HTML

    <div id="container">
    <div id="mytext">
        this is a simple text to test custom marquee
    </div>
</div>​

    CSS

    #container
{
    display: inline-block;
    background-color: #cccccc;
    width: 100px;
    height: 100px;
    overflow: hidden;
}
#mytext
{
    display: inline-block;
    position: relative;
    white-space: nowrap;
}
​

    JavaScript

    $(function() {
    var txt = $("#mytext");
    txt.bind('scroll', function () {
        var el = $(this);
        // Scroll state machine
        var scrollState = el.data("scrollState") || 0;
        el.data("scrollState", (scrollState + 1) % 4);
        switch (scrollState) {
            case 0: // initial wait
                el.css({ left: 0 });
                el.show();
                window.setTimeout(function () {
                    el.trigger("scroll");
                }, 5000);
                break;
            case 1: // start scroll
                var delta = el.parent().width() - el.width();
                if (delta < 0) {
                    el.animate({ left: delta }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                }
                break;
            case 2: // delay before fade out
                window.setTimeout(function () {
                    el.trigger("scroll");
                }, 2000);
                break;
            case 3: // fade out
                el.fadeOut("slow", function () {
                    el.trigger("scroll");
                });
                break;
        }
    }).trigger("scroll");
});​

    It doesn’t do exaclty the same as your requirement, but if you read the code and make some changes to the state-machine, you will get it working 🙂

    • 0