CODEWITHSUNDEEP
jquerymarqueeticker
user433351
user433351

Reputation: 225

Seamless JQuery marquee/ticker

I found code posted by a user on here for a seamless jQuery marquee/ticker. I've modified it to start and stop when scrolled over/scrolled out of, but it often lags once the user scrolls out. It never completely stops, but the speed at which the ticker scrolls is sometimes 1/10 of its original speed. I've sped it up so it's easier to see this lagging. Anyway, if someone has any idea of how to fix this, I would greatly appreciate it.

jQuery

 $(function() {
  var marquee = $("#scroller");
  marquee.css({"overflow": "hidden", "width": "100%"});

  // wrap "My Text" with a span (IE doesn't like divs inline-block)
   marquee.wrapInner("<span>");
  marquee.find("span").css({ "width": "49%", "display": "inline-block", "text-align":"center", "padding-right":"1%" });
  marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"

   marquee.wrapInner("<div class='scrolling'>");
  marquee.find("div").css("width", "200%");

  var reset = function() {
       $(this).css({"margin-left":"0%"});
       $(this).animate({ "margin-left": "-100%" }, 500, 'linear', reset);
  };

  reset.call(marquee.find("div"));

  marquee.find("div").bind({
mouseenter: function () {
 $(this).stop();
 if($(this).css("margin-left") == "-"+$("#scroller").width() + "px") $(this).css("margin-left", "0%");
},
mouseleave: function() {
 $(this).stop().animate({ "margin-left": "-100%" }, 500, 'linear', reset);
}
});
});

HTML

<div id="scroller">
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
 </div>

Thanks,

Greg

Upvotes: 1

Views: 3573

Answers (2)

Jon Mifsud
Jon Mifsud

Reputation: 183

glad you found an adequate reply however it seems utterly complex and new users looking for a similar solution will most undoubtedly get confused unless they are fairly knowledgeable in javascript. A similar jQuery plugin with all the funcionality; ticker stop and start callbacks, automatic pause on mouse over to allow you reading clearly/clicking on the right item. And seamless transition with full control of direction and speed. You might want to look at the jQuery webTicker this is a free to use plugin so enjoy.

Upvotes: 1

Simon Young
Simon Young

Reputation: 281

It seems the answer lies in the way JQuery manages memory in the .clone() and .remove() calls. There's a very good discussion at:

jQuery memory leak with DOM removal

Further details and a workaround are available at:

http://forum.jquery.com/topic/severe-memory-leak-with-clone

Good luck!

Upvotes: 0

Related Questions