Category: JavaScript

Sometimes, we want to wait for dynamically loaded script with JavaScript.

In this article, we’ll look at how to wait for dynamically loaded script with JavaScript.

How to wait for dynamically loaded script with JavaScript?

To wait for dynamically loaded script with JavaScript, we listen to the script element’s load event.

For instance, we write

<script
  id="hljs"
  async
  src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"
></script>

to add a script tag.

Then we write

const script = document.querySelector("#hljs");

script.addEventListener("load", () => {
  hljs.initHighlightingOnLoad();
});

to select the script tag with querySelector.

And we call addEventListener to listen its load event.

The callback is called when the script is loaded.

Conclusion

To wait for dynamically loaded script with JavaScript, we listen to the script element’s load event.

Sometimes, we want to detect if user changes tab with JavaScript.

In this article, we’ll look at how to detect if user changes tab with JavaScript.

How to detect if user changes tab with JavaScript?

To detect if user changes tab with JavaScript, we listen to a few events.

For instance, we write

window.onfocus = (ev) => {
  console.log("gained focus");
};

window.onblur = (ev) => {
  console.log("lost focus");
};

to set window.onfocus to a function that’s called when the tab is in focus.

And we set window.onblur to a function that’s called when the tab loses focus.

Conclusion

To detect if user changes tab with JavaScript, we listen to a few events.

Sometimes, we want to set bar width with Chart.js 2 and JavaScript.

In this article, we’ll look at how to set bar width with Chart.js 2 and JavaScript.

How to set bar width with Chart.js 2 and JavaScript?

To set bar width with Chart.js 2 and JavaScript, we set the barThickness and maxBarThickness properties.

For instance, we write

const options = {
  type: "bar",
  data: [
    //...
  ],
  options: {
    scales: {
      xAxes: [
        {
          barThickness: 6,
          maxBarThickness: 8,
        },
      ],
    },
  },
};

to set the barThickness to the bar thickness in pixels.

And we set the maxBarThickness to the max bar thickness in pixels.

Conclusion

To set bar width with Chart.js 2 and JavaScript, we set the barThickness and maxBarThickness properties.

Sometimes, we want to truncate a string in JavaScript.

In this article, we’ll look at how to truncate a string in JavaScript.

How to truncate a string in JavaScript?

To truncate a string in JavaScript, we use the string substring method.

For instance, we write

const truncateString = (str, length) => {
  return str.length > length ? str.substring(0, length - 3) + "..." : str;
};

to define the truncateString function.

In it, we str.substring if str.length is bigger than length to return a truncated substring.

Otherwise, we return str.

Conclusion

To truncate a string in JavaScript, we use the string substring method.

Sometimes, we want to fix JavaScript scrollTo method doing nothing.

In this article, we’ll look at how to fix JavaScript scrollTo method doing nothing.

How to fix JavaScript scrollTo method doing nothing?

To fix JavaScript scrollTo method doing nothing, we put it in a setTimeout callback.

For instance, we write

setTimeout(() => {
  window.scrollTo(0, 300);
}, 2);

to call window.scrollTo in the setTimeout callback to delay the scrolling.

Conclusion

To fix JavaScript scrollTo method doing nothing, we put it in a setTimeout callback.