Scrolling text which is too long with jquery

Question

I am trying to create a music player/centre online.

I have a player that plays the music and displays the current track:

As you can see from th title of the song it is too long for the div. What i would like to do is scroll the text and reset it an rescroll etc.

I have attempted this with the below code:

html:

<div id="top-bar">
<div id="player-container">
        <div id="player">
          <div id="level1">
            <div class="current-track"><h1><span id="title">Party All Night (Sleep All Day) -</span> Sean Kingston</h1></div>
            <div class="add-to-playlist"></div>
            <div class="share"></div>
          </div>
          <div class="clearfix"></div>
          <div id="level2">
            <div class="current-time">0:00</div>
            <div class="progress"><span id="slider"></span></div>
            <div class="total-time">3:43</div>
          </div>
        </div>
  </div>
</div>

Jquery:

$(function() {
    var scroll_text;
    $('div.current-track').hover(

    function() {
        var $elmt = $(this);
        scroll_text = setInterval(function() {
            scrollText($elmt);
        }, 5);
    }, function() {
        clearInterval(scroll_text);
        $(this).find('div.current-track h1').css({
            left: 0
        });
    });

    var scrollText = function($elmt) {
        var left = $elmt.find('div.current-track h1').position().left - 1;
        left = -left > $elmt.find('div.current-track h1').width() ? $elmt.find('div.current-track').width() : left;
        $elmt.find('div.current-track h1').css({
            left: left
        });
    };

});​​

Any pointer would be appriciated

Here is a jsfiddle for you guys: JSfiddle

UPDATE

Could anybody tell me:

1. How to make this happen automatically? Done
2. How to slow the scrolling? Done

Here is the updated jsfiddle for you guys: JSfiddle

Answer 1

I improved the answer of Holiday Mat a bit.

If you want to replace the text with other text dynamically (which is not too long), the scrolling will still keeps place. You have to reset the interval somehow.

Another problem you might run into is, too many intervals are set and the text scrolls faster and faster.

Here a snippet which shows how I handled this. (I used h5 instead of h1, which you probably use somewhere else.) :

$.fn.scrolltxt = function() {
  var options = $.extend({
speed: 28
  }, arguments[0] || {});

  return this.each(function() {
var $h5 = $(this);
var containerWidth = $h5.parent().width();
var textWidth = $h5.find('span').width();
var refreshIntervalId;

if (textWidth > containerWidth) {
  refreshIntervalId = setInterval(function() {
    scrollText();
  }, options.speed);

  $h5.data('refreshIntervalId', refreshIntervalId);
} else {
  refreshIntervalId = $h5.data('refreshIntervalId');

  if (refreshIntervalId != undefined) {
    window.clearInterval(refreshIntervalId);
    $h5.removeData('refreshIntervalId');
  }
}

var scrollText = function() {
  var textWidth = $h5.find('span').width();
  var left = $h5.position().left - 1;
  left = -left > textWidth ? $h5.width() : left;
  $h5.css({
    left: left
  });
};
  });
};

$('h5.scroll').scrolltxt();

#player {
  width: 500px;
  background: #000;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  margin: 10px;
  padding: 10px 20px;
}

.current-track {
  height: 100%;
  background: #333;
  color: #FFF;
  margin-right: 5px;
  width: 100%;
  font-size: 150%;
  border-radius: 5px;
  line-height: 30px;
  overflow: hidden;
  position: relative;
}

.current-track h5 {
  position: relative;
  white-space: nowrap;
  line-height: 1.5em;
  font-size: 1.5em;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="player">
  <div id="level1">
<div class="current-track">
  <h5 class="scroll"><span><strong>KAFKA (The artist formerly known as Prince)</strong></span></h5>
</div>
<br /><br /><br />
<div class="current-track">
  <h5 class="scroll"><span>The Most Beautiful Girl In The World (original 1995 version)</span></h5>
</div>
  </div>
</div>

Or see the CodePen: https://codepen.io/r-w-c/pen/dyKoKQX

Answer 2

A better way to animate the text (when the text is fully read => re-animate) :

JSFiddle update

$.fn.scrolltxt = function() {
    var options = $.extend({
        speed : 28
    }, arguments[0] || {});

    return this.each(function() {
        var el = $(this);

        if( el.find('span').width() > el.parent().width() ) {
            var scroll_text = setInterval(function() {
                scrollText();
            }, options.speed);
        };      

        var scrollText = function() {
            var width = el.find('span').width(),
                left = el.position().left - 1;
            left = -left > width ? el.width() : left;
            el.css({left: left});
        };
    });
};

$(function() {
    $('.current-track h1').scrolltxt();
});

Answer 3

Added check to see if text is long enough to require scrolling, removed the clear interval, and wrapped in plugin.

JSFiddle update

$.fn.scrolltxt = function() {
    var options = $.extend({
        speed : 28
    }, arguments[0] || {});

    return this.each(function() {
        var el = $(this);

        if( el.find('span').width() > el.parent().width() ) {
            var scroll_text = setInterval(function() {
                scrollText();
            }, options.speed);
        };      

        var scrollText = function() {
            var width = el.width(),                
                left = el.position().left - 1;
            left = -left > width ? width : left;
            el.css({left: left});
        };
    });    };

$('.current-track h1').scrolltxt();

Answer 4

I think you are misunderstanding how jquery .find() works:

$elmt.find('div.current-track h1')

should be:

$elmt.find('h1')

http://jsfiddle.net/Dn6jx/5/

edit: updated fiddle for comments

http://jsfiddle.net/Dn6jx/15/