Category: JavaScript

Sometimes, we want to check if a font (@font-face) has already been loaded with JavaScript.

In this article, we’ll look at how to check if a font (@font-face) has already been loaded with JavaScript.

How to check if a font (@font-face) has already been loaded with JavaScript?

To check if a font (@font-face) has already been loaded with JavaScript, we can listen to a few events emitted by document.fonts.

For instance, we write

document.fonts.onloading = () => {
  // ...
};

document.fonts.onloadingdone = () => {
  // ...
};

document.fonts.onloading = () => {
  // ...
};

to run the document.fonts.onloading function when fonts begin to download.

document.fonts.onloadingdone method runs when fonts are loaded completely.

And document.fonts.onloading runs when fonts failed to load.

We can also use await document.fonts.ready to wait for fonts to load.

Conclusion

To check if a font (@font-face) has already been loaded with JavaScript, we can listen to a few events emitted by document.fonts.

Sometimes, we want to get selected option text with JavaScript.

In this article, we’ll look at how to get selected option text with JavaScript.

How to get selected option text with JavaScript?

To get selected option text with JavaScript, we can use the text property of the selected option element.

For instance, we write

const onChange = (e) => {
  console.log(e.target.options[e.target.selectedIndex].text);
};

document.getElementById("box1").onchange = onChange;

to create the onChange function that gets the selected option with

e.target.options[e.target.selectedIndex]

And then we get the text of the selected option with text.

Then we set document.getElementById("box1").onchange to onChange to use that as the listener that runs when we change options.

Then we add the drop down with

<select id="box1">
  <option value="98">dog</option>
  <option value="7122">cat</option>
  <option value="142">bird</option>
</select>

Conclusion

To get selected option text with JavaScript, we can use the text property of the selected option element.

Sometimes, we want to restart animation in CSS3 and JavaScript.

In this article, we’ll look at how to restart animation in CSS3 and JavaScript.

How to restart animation in CSS3 and JavaScript?

To restart animation in CSS3 and JavaScript, we can get the offsetHeight property to trigger reflow.

For instance, we write

function resetAnimation() {
  const el = document.getElementById("animated");
  el.style.animation = "none";
  el.offsetHeight;
  el.style.animation = null;
}

const button = document.querySelector("button");
button.onclick = resetAnimation;

to create the resetAnimation function.

We get the element we want to animate with getElementById.

Then we get the offsetHeight to trigger reflow.

We clear el.style.animation by setting it to null.

Then we add our animation styles with

#animated {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: black;
  animation: bounce 3s ease-in-out infinite;
}

@keyframes bounce {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 50px);
  }
  100% {
    left: 0;
  }
}

to set the animation styles of the element with ID animated.

And we add the elements with

<div id="animated"></div>
<button>Reset</button>

Conclusion

To restart animation in CSS3 and JavaScript, we can get the offsetHeight property to trigger reflow.

Sometimes, we want to extract filename from a file input control with JavaScript.

In this article, we’ll look at how to extract filename from a file input control with JavaScript.

How to extract filename from a file input control with JavaScript?

To extract filename from a file input control with JavaScript, we can get the file name with the name property.

For instance, we write

document.getElementById("imgName").onchange = (e) => {
  const [file] = e.target.files;
  const filename = file.name;
  //...
};

to get the file input with

document.getElementById("imgName")

Then we assign the onchange property to a function that gets the files select with e.target.files.

And then we get the first file with destructuring.

Then we get the file’s name with file.name.

Conclusion

To extract filename from a file input control with JavaScript, we can get the file name with the name property.

Sometimes, we want to set HTML5 audio position with JavaScript.

In this article, we’ll look at how to set HTML5 audio position with JavaScript.

How to set HTML5 audio position with JavaScript?

To set HTML5 audio position with JavaScript, we can set the currentTime property.

For instance, we write

const element = document.getElementById("audioPlayer");
element.play();
element.currentTime = 226;

to get the audio element with getElementById.

And then we set the currentTime property to the position of the audio in seconds.

Conclusion

To set HTML5 audio position with JavaScript, we can set the currentTime property.