i want to make a function but i cant in JavaScript

Question

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.

you dont have an element with `class="chart_movement"` on the dom — Lawrence Cherone, Oct 24 '21 at 12:56
You might need to watch out, I didn't expect scrollwidth to work, but it seem it work in chrome when the class exist in the DOM. I found this: https://stackoverflow.com/questions/13226296/is-scrollwidth-property-of-a-span-not-working-on-chrome (it doesn't work the same way in all browser) You could use another approach: https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript since you seem to be using a fixed size in pixel. — Pascal, Oct 24 '21 at 13:01

score 1 · Answer 1 · 2021-10-24T13:51:29.260

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

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 24 '21 at 13:43

cssyphus · Accepted Answer · 2021-10-24T17:39:02.307

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.

// 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>

i want to make a function but i cant in JavaScript

2 Answers2