CODEWITHSUNDEEP
javascriptjquery
yavg
yavg

Reputation: 3051

keep the text in a marquee

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

enter image description here

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, . The only space I want to show is the initial, otherwise I do not want to show spaces.

enter image description here

I am using this library: https://github.com/aamirafridi/jQuery.Marquee

my problem ocure when I try to add a new phrase, the animation ends prematurely. how can I solve that? the marquee reboots just before showing the new added sentence. Maybe I'm not doing it the right way.

http://jsfiddle.net/pt4rwo35/

<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>

$(".marquee span:last-child").after("<span> Sixth marquee text</span>");

I want it to be detected precisely when the text that is added dynamically ends. but for some reason the animation is restarted

Upvotes: 4

Views: 2167

Answers (3)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

After a short look at the documentation... I found:

  1. The append better occur when the finish event occurs, if you do not want a change to be visible. That is the time to destroy the instance, append new text, and re-instanciate.
  2. When it is first started, you want the text to start at the right side of the input...
    But on re-instantiation, it NEEDS to start at the left side.
    There is an option for this : startVisible true or false.
    But it needs version 1.4.0 and you were using 1.3.1

So... In the snippet below, I put the Marquee instantiation within a named function to be able to call it again later.

After first instantiation, the startVisible variable is changed to true.

Then, I used a setTimeout of 2 seconds to simulate some kind of an event like an Ajax response which would want to append a new string.

But I made it "wait" for the finish event to occur.
Timing, here, is important!

var startVisible = false;  // First instantiation will start at the right side.

function marqueeInit(){
  $('.marquee').marquee({
    duration: 5000,
    gap: 0,             //  <-- zero space between the string and the "duplicated" string.
    delayBeforeStart: 0,
    direction: 'left',
    duplicated: true,
    startVisible: startVisible
  });
  
  $('.marquee').on("finished", function(){
    console.log("Animation finished");
  });
}

// Onload init
marqueeInit();
startVisible = true;  // It has to start visible for all future instantiation.

setTimeout(function(){

  console.log("Ajax response! We have a new string to add!");

  $('.marquee').one("finished", function(){  // This function will be executed only once because of .one()
  
    // Destroy the previous instance.
    $(this).marquee("destroy");

    // Add a string
    $(".marquee span:last-child").after("<span>===Sixth marquee text===</span>");

    // Re-instanciate Marquee.
    marqueeInit();
    
    console.log("New string added!");
    
  })
},2000);   // <-- 2 seconds timeout JUST FOR THE DEMO. It simulate an "anytime" append.
          // That .one() function is what you should have in an Ajax success callback, for example.
          
.marquee {
  font-family:arial,sans-serif;
  width: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #ddd;
}
.vertikal {
    height:20px;width:200px;
}
.gambar {
     width:100%!important;
    height:auto!important;
    background:none!important;
    border:0px!important;
}
.gambar img {
    border:1px solid #eee;
    width:200px;
    height:125px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js"></script>
<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>

Upvotes: 0

bellabelle
bellabelle

Reputation: 926

You have to remove the gap in the JS for marquee. And in your CSS,

.js-marquee{ margin-right: 5px !important; }

The .js-marquee div element of each content box has a generated value that's why there were some spaces between the div that was duplicated.

Try, this work for me.

Upvotes: 0

Nick
Nick

Reputation: 16576

Would it be an option to call the marquee function after appending the new text? I think something happens when the marquee function is called that measures the current number of characters. If the text hasn't been added yet, those characters haven't been added yet.

$.when( $(".marquee span:last-child").after("<span>Sixth marquee text</span>") ).then(function() {
  $('.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')
    .bind('finished', function(){
        //Change text to something else after first loop finishes
        console.log('restart')
})

Upvotes: 1

Related Questions