Scrolling text which is too long with jquery

html, javascript, jquery

Solution

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/

Problem

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: - How to make this happen automatically? Done - How to slow the scrolling? Done Here is the updated jsfiddle for you guys: JSfiddle

Original source