Display text in a scrolling manner once it exceeds the container's boundaries

Question

Display text in a scrolling manner once it exceeds the container's boundaries

I've been searching high and low for a solution to my problem. I have a div that displays the information about who's playing on an online radio station.

The width of the div is set to 200px, but when the artist and song title are too long, the text gets cut off due to overflow:hidden property being applied.

I am looking to create a scrolling effect where the entire text moves from left to right, allowing the right side of the text to become visible as the left side goes outside the boundaries of the div. Can someone please guide me in the right direction?

Thank you!

<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;
}

jquery html css

Answer 1

Answer №1

Here is a solution that may meet your needs:

function beginScrolling() {
  var itemWidth = $(this).width();
  var parentWidth = $(this).parent().width();

  if (itemWidth > parentWidth) {
    var distanceToScroll = itemWidth - parentWidth;
    var parentItem = $(this).parent();
    parentItem.stop();
    parentItem.animate({
      scrollLeft: distanceToScroll
    }, 3000, 'linear');
  }
}

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

$('#menu a').hover(beginScrolling, stopScrolling);

#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

Answer 2

Here is a solution that may meet your needs:

function beginScrolling() {
  var itemWidth = $(this).width();
  var parentWidth = $(this).parent().width();

  if (itemWidth > parentWidth) {
    var distanceToScroll = itemWidth - parentWidth;
    var parentItem = $(this).parent();
    parentItem.stop();
    parentItem.animate({
      scrollLeft: distanceToScroll
    }, 3000, 'linear');
  }
}

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

$('#menu a').hover(beginScrolling, stopScrolling);

#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

Answer 3

Answer №2

To modify it, simply update the overflow property to scroll: .

melodyjam_song { font-size: 14px !important; white-space: nowrap; width: 180px; overflow: scroll; border: 1px solid #888; padding: 8px; }

Answer 4

To modify it, simply update the overflow property to scroll: .

melodyjam_song { font-size: 14px !important; white-space: nowrap; width: 180px; overflow: scroll; border: 1px solid #888; padding: 8px; }

Display text in a scrolling manner once it exceeds the container's boundaries

Answer №1

Answer №2

Similar questions

What is the process for sending the selected checkbox text to an action result on a Razor page?

Learn how to retrieve the ID of an element with a simple click using PHP, jQuery, AJAX, and Javascript

Exploring the semantics of CSS documents

The functionality of HTML labels may be limited when used in conjunction with AJAX

Identifying and categorizing flip switches with jQuery without relying on div elements

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

Making jquery's one() function work effectively with duplicated classes

Easily move a div by dragging and dropping it from one location to another

When combining <a> with the class line-through, the line does not appear

Use JavaScript to generate an HTML element that has an attribute mirroring its text content

Tumblr post not automatically playing flash content

Is there a way to have a fixed width div positioned in the center of the screen, with two additional divs on either side

What was the recommended dimensions for CSS containers in 2018?

Enhancing the existing site with a new sidebar column in the HTML layout

Tips for Smoothing Out Your jQuery LavaLamp Effect

Tips for shifting a div to the left with AngularJS

What is the best way to target an input element with a specific ID using JQuery Mobile?

What is the best method for implementing free timeslots in fullcalendar using jquery?

Tips for adjusting the order in which styles load in NuxtJS

Utilizing HTML and CSS for Optimal Page Layouts