i want to make a function but i cant in JavaScript-CodePudding

I want to make a function like when inner text is more than the div size then inner text moving left to right autometically infinite.

what I have tried

// chart movement
var chartMove = $(".chart_movement").width();
var chartMovetext = $(".chart_movement")[0].scrollWidth;

if (chartMovetext > chartMove) {
  function chart_title_move() {
    $(".chart_movement_text")
      .animate({
          left: "-40px",
          right: "40px",
        },
        5000
      )
      .delay(1200);
    $(".chart_movement_text")
      .animate({
          left: "40px",
          right: "-40px",
        },
        5000,
        function() {
          chart_title_move();
        }
      )
      .delay(1200);
  }
  chart_title_move();
}

.innerTextMove {
  overflow: scroll;
  position: absolute;
  letter-spacing: 0.5px;
  position: absolute;
  width: auto;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 6px;
}

.chartTitleGuide {
  width: 185px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-start-3 col-span-3 grid justify-center items-center chartTitleGuide"><span class="chart_movement_text">name</span></div>
<div class="col-start-6 col-end-8 grid justify-center items-center chartTitleGuide"> <span class="chart_movement_text">Name</span></div>

problem is var chartMovetext = $(".chart_movement")[0].scrollWidth; returm 0 everytime .

hope I get some info on how to achieve it.

CodePudding user response：

I think we don't have .scrollWidth instead of that you can use .scrollLeft(). I mean:

var chartMove = $(".chart_movement").width();
var chartMovetext = $(".chart_movement")[0].scrollLeft();

and put the rest under it.

if (chartMovetext > chartMove) {
    function chart_title_move() {
      $(".chart_movement_text")
        .animate(
          {
            left: "-40px",
            right: "40px",
          },
          5000
        )
        .delay(1200);
      $(".chart_movement_text")
        .animate(
          {
            left: "40px",
            right: "-40px",
          },
          5000,
          function () {
            chart_title_move();
          }
        )
        .delay(1200);
    }
    chart_title_move();
  }

CodePudding user response：

I have a few observations about what you've done, but cannot give you a full solution because you haven't provided all necessary pieces to the puzzle. For example:

You haven't identified what is inner text OR div size. Do you mean the text inside the span, versus the size of the .chartTitleGuide container, or is it the .chart-movement container?
Your example html does not have a .chart-movement container, but your jQuery references it. Where should it go? I added one... but I was guessing. I shouldn't have to guess, the example should be clear
You are missing the .innerTextMove container - otherwise, remove that css from your example
The action that you want to happen on the page is really not clear. What does inner text moving left to right mean?
(Forgot to mention): You were getting a width of 0 for your chart_movement_text span because span elements are inline elements - you must convert them to block elements to get the scrollWidth value (you can see how I did that in the css).

Below, I created a slightly more improved example for you - but I was guessing. Please see what I did and fix it to be a more correct example.

Then, please choose a correct answer for this question (in order to close out this question), and ask a new question using the improved example and being much more clear with what you want the user to see happening on the page. Doing that will result in the quickest answer to your question.

Show code snippet

// chart movement
var chartMove = $(".chart-movement").width();
var chartTitleGuide = $(".chartTitleGuide").width();
var chartMoveText = $(".chart_movement_text")[0].scrollWidth;

console.log(`CM Width: ${chartMove}`);
console.log(`CTG Width: ${chartTitleGuide}`);
console.log(`CMT Width: ${chartMoveText}`);

if (chartMoveText > chartTitleGuide) {
  console.log('Yup in here');
  chart_title_move();
}

function chart_title_move() {
  $(".chart_movement_text")
    .animate({
        left: "-40px",
        right: "40px",
      },
      5000
    )
    .delay(1200);
  $(".chart_movement_text")
    .animate({
        left: "40px",
        right: "-40px",
      },
      5000,
      function() {
        chart_title_move();
      }
    )
    .delay(1200);
}

.innerTextMove {
  overflow: scroll;
  position: absolute;
  letter-spacing: 0.5px;
  position: absolute;
  width: auto;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 6px;
}

.chartTitleGuide {
  width: 185px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.chart_movement_text{
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chart-movement">
  <div class="col-start-3 col-span-3 grid justify-center items-center chartTitleGuide">
    <span class="chart_movement_text">name of an interesting and length text</span>
  </div>
  <div class="col-start-6 col-end-8 grid justify-center items-center chartTitleGuide">
    <span class="chart_movement_text">Name</span>
  </div>
</div>