javascript horizontal scroll text

Question

I want horizontal scroll on my app. there are multiple example, but I found one that fit my need. But when i try it it just don't work as it should. please look and tell me what the problem is:

<!DOCTYPE html>
<html>
<head>
<style>
div.marquee {
    white-space:no-wrap;
    overflow:hidden;
}
div.marquee > div.marquee-text {
    white-space:nowrap;
    display:inline;
    width:auto;
}
</style>
<script>
var marquee = $('div.marquee');
console.log(marquee);
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
</script>
</head>
<body>
<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

</body>
</html>

update There is no error in console:

@GavinThomas it's not 1998 ;) is [obsolete](http://caniuse.com/#search=marquee), don't use it — Brett Gregson, Jul 22 '16 at 13:29
1) Don't use `setInterval` for animations except for compatibility with old browsers, `requestAnimationFrame` and CSS animations are more reliable. 2) Looking up and setting properties like `text-indent` and `width` every frame is bad for performance, transforms are better. 3) Do you really need a marquee? ;) — gcampbell, Jul 22 '16 at 13:30
Yes a know but I want to display multiple texts so I want to use javascript to change div contain. — dmx, Jul 22 '16 at 13:31
What errors do you get in the console? And even if you are loading jQuery (which you appear not to be doing in your example), you're executing your JavaScript before the elements have been rendered to the page. You either would need to move your code to the end of the page or wrap in a loader like document.ready. Do that and it works fine https://jsfiddle.net/j08691/z01czdyg/ — j08691, Jul 22 '16 at 13:31
http://stackoverflow.com/questions/17417326/jquery-works-in-js-fiddle-but-not-on-my-website — j08691, Jul 22 '16 at 13:34

Dygestor · Accepted Answer · 2020-06-22T07:58:57.577

You forgot to include jQuery in your website. Otherwise, it works as expected (at least I think so).

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

div.marquee {
    white-space:no-wrap;
    overflow:hidden;
}
div.marquee > div.marquee-text {
    white-space:nowrap;
    display:inline;
    width:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

Edit: added $(document).ready() to ensure that elements will be loaded.

Edit2: if you want the text to scroll from left to right, use the following script:

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

@KamelLabiad I edited the answer and added a left to right script as well — Dygestor, Jun 22 '20 at 07:59

score 1 · Answer 2 · edited May 23 '17 at 11:46

Wait page load before execute script.

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

so see this question, and dont forget <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> in headers.

javascript horizontal scroll text

2 Answers2