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