JS script working in designer but not in Player

[sp_etz]

Windows player v3 R310.1

Issue

What I’m trying to achive is that items from a dataset ticker are displayed one by one. The first item is displayed but if the content larger (height) than the region it start scrolling after a initial pause. If the last content is shown from an item another pause is taken to allow the reader to read the last lines.

I made a JS script that does exactly that and works fine in the designer mode. But after publishing to a windows player only the first item is shown and no scrolling takes place.

My code:

$(window).on("load", function () {

  // Laat items 1 voor 1 zien, met scrollen indien nodig
  var $items = $("#content .item");
  var startPause = 3000;
  var scrollSpeed = 50;
  var regionHeight = 897;
  var maxRetries = 3; // Maximaal aantal pogingen om hoogte correct te meten

  function getContentHeight($element) {
    var el = $element[0];
    // Laat alle items eerst laden (vooral belangrijk voor afbeeldingen) voordat we de scroll-logica starten
    // Forceer reflow zodat de browser de layout herberekent
    void el.offsetHeight;

    var height = el.scrollHeight;


    // Fallbacks als scrollHeight 0 of incorrect is
    if (!height || height === 0) {
      height = el.offsetHeight;
    }
    if (!height || height === 0) {
      height = el.getBoundingClientRect().height;
    }

    // Als het element children heeft, tel hun hoogte op als laatste fallback
    if ((!height || height < 50) && $element.children().length > 0) {
      var totalHeight = 0;
      $element.children().each(function () {
        totalHeight += $(this).outerHeight(true);
      });
      height = totalHeight;
    }

    return height;
  }

  function processItem(index, retryCount) {
    if (index >= $items.length) return;
    retryCount = retryCount || 0;

    var $element = $items.eq(index);

    // Toon element eerst (anders kan hoogte niet correct gemeten worden)
    $items.hide();
    $element.show();

    var contentHeight = getContentHeight($element);

    // Als hoogte verdacht/incorrect is (0 of heel klein), probeer opnieuw
    if ((!contentHeight || contentHeight < 50) && retryCount < maxRetries) {
      setTimeout(function () {
        processItem(index, retryCount + 1);
      }, 150); // Wacht 150ms en probeer opnieuw
      return;
    }

    // Bereken endPause: (contentHeight / 35 * 5) seconden, max 10 seconden
    var endPause = Math.min((contentHeight / 35) * 5 * 1000, 10000);

    // Als na alle retries de hoogte nog steeds incorrect is, sla item over
    if (!contentHeight || contentHeight < 50) {
      setTimeout(function () {
        processItem(index + 1, 0);
      }, 1000);
      return;
    }

    if (contentHeight > regionHeight) {
      $element.css({
        height: regionHeight + "px",
        overflow: "hidden",
        position: "relative",
      });

      var scrollDistance = contentHeight - regionHeight;
      var scrollDuration = (scrollDistance / scrollSpeed) * 1000;

      setTimeout(function () {
        $element.animate(
          {
            scrollTop: scrollDistance,
          },
          {
            duration: scrollDuration,
            easing: "linear",
            complete: function () {
              setTimeout(function () {
                processItem(index + 1, 0);
              }, endPause);
            },
          },
        );
      }, startPause);
    } else {
      var displayTime = startPause + endPause;

      setTimeout(function () {
        processItem(index + 1, 0);
      }, displayTime);
    }
  }

  // Extra kleine delay voor CSS transitions en fonts
  setTimeout(function () {
    processItem(0);
  }, 100);
});

Untill now every other script I used to manipulate the content worked well even in the player. I do not understand why this one fails!?