• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

238
Views
How to make only text that is bigger than the container/element scroll

I have a marquee element in html displaying output from an API, but I only want to make the text scroll if the text itself would be bigger than the container width it is in, else it should just stay stationary. I've done some research and can't figure out how I would achieve this?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RadioWay >> Splash</title>
    
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="music-player">
        
     <marquee id="title" behavior="scroll" direction="left"></marquee>
     <marquee id="artist" behavior="scroll" direction="left"></marquee>

    </div>
</html>

$.getJSON(
  "https://derrick.xonosho.st/api/nowplaying/1",
  function (data) {
    // artist name, song title, URL album
    var song_title = data["now_playing"]["song"]["title"];
    var artist_name = data["now_playing"]["song"]["artist"];
    var album_URL = data["now_playing"]["song"]["art"];

    $(".disk").css("background-image", `url("${album_URL}")`);
    $("#title").html(
      `${song_title}`
    );
    $("#artist").html(
      `${artist_name}`
    );
  }
);
almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error