StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POScrolling text which is too long with jquery
primarykey
Id
10554660
data
AcceptedAnswerId
10554831
AnswerCount
3
ClosedDate
CommentCount
5
CommunityOwnedDate
CreationDate
2012-05-11T15:47:28.007
FavoriteCount
2
LastActivityDate
2014-12-29T21:09:20.197
LastEditDate
2012-05-11T16:18:10.003
LastEditorUserId
566127
OwnerUserId
566127
ParentId
0
PostTypeId
1
Score
3
ViewCount
4535
LastEditorDisplayName
text
Body
<p>I am trying to create a music player/centre online.</p> <p>I have a player that plays the music and displays the current track:</p> <p><img src="https://i.stack.imgur.com/Y1vY7.png" alt="The Player"></p> <p>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.</p> <p>I have attempted this with the below code:</p> <p>html:</p> <pre><code><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> </code></pre> <p>Jquery:</p> <pre><code>$(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 }); }; }); </code></pre> <p>Any pointer would be appriciated</p> <p>Here is a jsfiddle for you guys: <a href="http://jsfiddle.net/Dn6jx/1/" rel="nofollow noreferrer">JSfiddle</a></p> <p><strong>UPDATE</strong></p> <p>Could anybody tell me:</p> <ol> <li><em>How to make this happen automatically?</em> <strong>Done</strong></li> <li><em>How to slow the scrolling?</em> <strong>Done</strong></li> </ol> <p>Here is the updated jsfiddle for you guys: <a href="http://jsfiddle.net/Dn6jx/14/" rel="nofollow noreferrer">JSfiddle</a></p>
Tags
<javascript><jquery><html>
Title
Scrolling text which is too long with jquery
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USDavid Passmore
UserOwnerUserId
1. USDavid Passmore
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POScrolling text which is too long with jquery
  UserUserId
  USChrisE
  VoteTypeVoteTypeId
  VTFavorite
2. VO
  singulars
  PostPostId
  POScrolling text which is too long with jquery
  UserUserId
  USrivarolle
  VoteTypeVoteTypeId
  VTFavorite
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.