Always show text in a marquee

Question

My goal is to always show text on my tag marquee without spaces. A text should always appear showing in this usual animation.

My goal is to always display text on my tag marquee without spaces. A text should always appear showing in this usual animation. In my real project, I am constantly receiving tweets and I am putting them in the marquee, I delete the first one and then I make a .append as long as the amount is 5 (not a good solution, if 10 tweets arrive in a second, the User can not read the marquee well. I would like to have 5 span inside the marquee, at a certain point my web page starts to become slow by constantly performing a .append and having many span elements).

With the set interval I'm simulating as if receiving the tweets, but at one point the animation is not fluid, or restarts showing spaces. The only space I want to show is the initial, otherwise I do not want to show spaces.

I do not know how to solve this, or if there is an event or something I can do to detect when the first span leaves the container, in order to add a new element and can read the marquee well.

I have tried several libraries, but none suits my problem.

http://jsfiddle.net/fq2z6o99/

    <div id='container_marquee'>
     <marquee id='mymarquee' behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();">
               <span>first marquee text</span>
               <span>second marquee text</span>
               <span>third marquee text</span>
               <span>fourth marquee text</span>
               <span>fifth marquee text</span>
     </marquee>
    </div>

https://stackoverflow.com/questions/21427999/how-to-remove-trailing-space-from-marquee have you tried it? — Shubhranshu, Aug 31 '17 at 04:45
marquee tag is obsolete - you're better off writing code to do what marquee does, and then you can do it betterer — Jaromanda X, Aug 31 '17 at 04:57
@Shubhranshu http://jsfiddle.net/rt87hdv5/ I have recreated the solution, but I do not know how to add phrases like in my real example, maybe you can help me please. — yavg, Aug 31 '17 at 04:59
@JaromandaX That I have read, but I have seen several examples and libraries, but they do not solve my problem. — yavg, Aug 31 '17 at 05:03
@yvang, I made some additions to your second fiddle: http://jsfiddle.net/chiperific/h796qode/4/ — Chiperific, Aug 31 '17 at 05:43
@Chiperific http://i.imgur.com/GdlrA5s.jpg You almost made it! I still do not know how to fix it. But at the end the white space still appears, and then there is also a text under the container — yavg, Aug 31 '17 at 13:25
i have made some changes to my code, added sixth marquee text dynamically, try now with my code...! — Ganesh Putta, Sep 01 '17 at 05:09

score 0 · Answer 1 · edited Oct 01 '18 at 10:45

0

Use marquee behaviour = alternate.

edited Oct 01 '18 at 10:45

halfer

19,824
17
99
186

answered Aug 31 '17 at 04:58

Vishnu prasad

11
3

I have seen how it works but it does not solve my problem. – yavg Aug 31 '17 at 05:02
https://www.stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/ – Vishnu prasad Aug 31 '17 at 05:09
I have tried to report this as "not an answer" (since LQ was unavailable) and it was declined. I continue to believe this is not substantive enough for a Stack Overflow answer, and should have been a comment. – halfer Oct 01 '18 at 10:45

score 0 · Answer 2 · edited Oct 02 '18 at 13:29

I have added sixth marquee text dynamically. Try something like this:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>
<style>
.marquee {
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ccc;
}
.marquee span{
 margin:0 15px;
}
</style>
</head>
<body>
<div class="marquee">
 <span>first marquee text</span>
 <span>second marquee text</span>
 <span>third marquee text</span>
 <span>fourth marquee text</span>
 <span>fifth marquee text</span>
</div>
</body>
<script>
$('.marquee').marquee({
    //speed in milliseconds of the marquee
    duration: 5000,
    //gap in pixels between the tickers
    gap: 50,
    //time in milliseconds before the marquee will start animating
    delayBeforeStart: 100,
    //'left' or 'right'
    direction: 'left',
    //true or false - should the marquee be duplicated to show an effect of continues flow
    duplicated: true
});
$(".marquee span:last-child").after("<span>Sixth marquee text</span>");
</script>
</html>

I initially tried with this plugin. But if you achieve that when adding a text dynamically does not stop or restart the animation I select you as the best answer. — yavg, Aug 31 '17 at 13:21
this would be very useful, but as I say, I need to add a sentence without restarting the whole marquee — yavg, Sep 02 '17 at 19:41
I mean, the marquee reboots just before showing the new added sentence http://jsfiddle.net/pt4rwo35/ — yavg, Sep 02 '17 at 20:42

score 0 · Answer 3 · answered Aug 31 '17 at 10:10

You can write custom jQuery code to replace marquee tag.

Try below code may be it helps you:

<html>
<head>
<style>
* {
    margin:0; padding:0
}
div {
    background: white;
    width: 600px;
    height: 40px;
    border: 2px solid red;
}
div p {
    position: relative;
}
</style>
</head
<body>
<div>
    <p>Lorem ipsum dollar sit, lorem ipsum dollar</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var animation = function() {
    $('div p').animate({left: '320'}, 5000,

    function() {
        $('div p').animate({left: '0'}, 5000);
        animation();
    });
};

animation();

</script>
</body>
</html>

Always show text in a marquee

3 Answers3