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

Scrolling text which is too long with jquery

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

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

The Player

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:

How to make this happen automatically? Done
How to slow the scrolling? Done

Here is the updated jsfiddle for you guys: JSfiddle

Answer

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/

Advertisement

Answer