CODEWITHSUNDEEP
javascripthtmlcss
dmx
dmx

Reputation: 1990

javascript horizontal scroll text

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: enter image description here

Upvotes: 1

Views: 9539

Answers (2)

Dygestor
Dygestor

Reputation: 1259

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));
    });
});

Upvotes: 4

dmx
dmx

Reputation: 1990

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.

Upvotes: 1

Related Questions