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:
2 answers
solution1
4 ACCPTED 2016-07-22 13:29:57
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));
});
});
solution2
1 2016-07-22 14:20:30
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.