Javascript only works once

I have a script that’s used to detect ellipsis. If there is an ellipsis, the text color will be red, and if not, blue. It works on Anki Desktop, but after updating to the newest mobile version, it doesn’t seem to work on AnkiMobile. The problem is that the script seems to work only once, e.g. upon opening the deck, after editing the card, etc.

Here is the screen record I took of my ipad.

Here is my script.

<script>
$(function() {
    $('.tab-parent').each(function(i) {
        if (isEllipsisActive(this)) {
             $(this).css({color: 'red'});
        } else {
            $(this).css({color: 'blue'});
        }
    });
});
function isEllipsisActive(e) {
     return ($(e).innerWidth() < $(e)[0].scrollWidth);
}
</script>

I guess it has something to do with inner workings of the jQuery functions you’re calling. You’re probably better off with vanilla JS:

<script>
(() => {
  for (let el of document.getElementsByClassName("tab-parent")) {
     el.classList.toggle("ellipsed", isEllipsed(el));
  }
})();

function isEllipsed(el) {
  return el.clientWidth < el.scrollWidth;
}
</script>

Then add this rule to your Style section:

.tab-parent {
  color: blue;
}
.tab-parent.ellipsed {
  color: red;
}
4 Likes

This works, however I’m sorry to trouble you again, but I have a script that has the same problem. I don’t know if it’s because it’s not written in vanilla javascript or not.

$(function() {
    $('.tab-parent').each(function(i) {
        if (isEllipsisActive(this)) {
            $(this).closest('.tab-label').find('span[data-target="#exampleModal"]').css({'visibility':'show'});
        } else {
            $(this).closest('.tab-label').find('span[data-target="#exampleModal"]').css({'visibility':'hidden'});
        }
    });
});
function isEllipsisActive(e) {
     return ($(e).innerWidth() < $(e)[0].scrollWidth);
}

Try changing

$(function () { ... });

to

(function () { ... })();
1 Like

It doesn’t seem to work. The problem remains that it only works the first time.

The second script uses the same logic as the first, so a slight modification to the one I posted above (+CSS changes) should suffice. I think it will be easiest if you send me a sample note via dm. I will then convert the scripts to pure JS.

2 Likes