CODEWITHSUNDEEP
jqueryhtmlcss
Mr. Fontastic
Mr. Fontastic

Reputation: 302

Scroll text when it overflows container

I've searched for this but can't find the answer. I have a div showing "who's playing' for an online radio.

The div's width is 200px and when the artist+song title is long, the text gets cut off (overflow: hidden).

I would like to make the whole text scroll from left to right, so the right side of the text becomes visibile when the left side goes outside the div. Can someone put me on the right track?

Thanks.

<div class="radioco_song">EBTG - Driving (The Underdog Remix)</div>

and 

.radioco_song {
font-size: 16px !important;
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #ccc;
padding: 10px;
}

Upvotes: 0

Views: 3190

Answers (2)

Shantanu Bhuruk
Shantanu Bhuruk

Reputation: 23

Just change overflow: scroll . .radioco_song { font-size: 16px !important; white-space: nowrap; width: 200px; overflow: scroll; border: 1px solid #ccc; padding: 10px; }

Upvotes: 0

MajiD
MajiD

Reputation: 2575

i think this is what you want :

function startMarquee() {
  var menuItemWidth = $(this).width();
  var listItemWidth = $(this).parent().width();

  if (menuItemWidth > listItemWidth) {
    var scrollDistance = menuItemWidth - listItemWidth;
    var listItem = $(this).parent();
    listItem.stop();
    listItem.animate({
      scrollLeft: scrollDistance
    }, 3000, 'linear');
  }
}

function stopMarquee() {
  var listItem = $(this).parent();
  listItem.stop();
  listItem.animate({
    scrollLeft: 0
  }, 'medium', 'swing');
}

$('#menu a').hover(startMarquee, stopMarquee);
#menu {
  margin: 10px;
}

#menu > div {
  width: 100px;
  overflow: hidden;
  font-family: sans-serif;
}

#menu > div a {
  white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div><a href="#">Short</a></div>
  <div><a href="#">Some really long link text here...</a></div>
  <div><a href="#">Another really, really, really long piece of text here</a></div>
</div>

Fiddle by : bryanjamesross

Upvotes: 2

Related Questions