Author: John Au-Yeung

Sometimes, we want to simulate a hover with a touch in touch enabled browsers with JavaScript.

In this article, we’ll look at how to simulate a hover with a touch in touch enabled browsers with JavaScript.

How to simulate a hover with a touch in touch enabled browsers with JavaScript?

To simulate a hover with a touch in touch enabled browsers with JavaScript, we add a touchstart event listener and some styles.

For instance, we write

document.addEventListener("touchstart", () => {}, true);

to add a touchstart event listener to document.

Then we write

element:hover,
element:active {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

to set the touch highlight color with

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

And we disable context menu on long press on the element with

-webkit-touch-callout: none

Conclusion

To simulate a hover with a touch in touch enabled browsers with JavaScript, we add a touchstart event listener and some styles.

Sometimes, we want to find HTML label associated with a given input with JavaScript.

In this article, we’ll look at how to find HTML label associated with a given input with JavaScript.

How to find HTML label associated with a given input with JavaScript?

To find HTML label associated with a given input with JavaScript, we can select the label elements and then loop through them to find the one with the htmlFor property equally the ID of the input.

For instance, we write

const findLableForControl = (el) => {
  const idVal = el.id;
  const labels = document.getElementsByTagName("label");
  for (const label of labels) {
    if (label.htmlFor === idVal) {
      return label;
    }
  }
};

to define the findLableForControl function that takes the el input element.

In it, we get the id of the el element.

Then we select all the labels with getElementsByTagName.

Next we loop through the labels and find the one with the htmlFor property equaling idVal.

htmlFor has the value of the for attribute of the label.

Conclusion

To find HTML label associated with a given input with JavaScript, we can select the label elements and then loop through them to find the one with the htmlFor property equally the ID of the input.

Sometimes, we want to display loading message when an iFrame is loading with CSS.

In this article, we’ll look at how to display loading message when an iFrame is loading with CSS.

How to display loading message when an iFrame is loading with CSS?

To display loading message when an iFrame is loading with CSS, we add a background image behind the iframe.

For instance, we write

<div class="holds-the-iframe"><iframe here></iframe></div>

to add a div with an iframe inside.

Then we style the div by writing

.holds-the-iframe {
  background: url(../images/loader.gif) center center no-repeat;
}

to set the background image to the loader icon that’s displayed when we load the iframe.

Once the iframe is loaded, the background image will be covered.

Conclusion

To display loading message when an iFrame is loading with CSS, we add a background image behind the iframe.

Sometimes, we want to paste as plain text in execCommand with JavaScript.

In this article, we’ll look at how to paste as plain text in execCommand with JavaScript.

How to paste as plain text in execCommand with JavaScript?

To paste as plain text in execCommand with JavaScript, we can insrt plain text with execCommand.

For instance, we write

editor.addEventListener("paste", (e) => {
  e.preventDefault();
  const text = (e.originalEvent || e).clipboardData.getData("text/plain");
  document.execCommand("insertHTML", false, text);
});

to listen for the paste event on the editor element.

In the paste event handler, we call preventDefault to prevent the default paste action.

Then we get the pasted plain text data with clipboardData.getData with "text/plain".

Finally, we use document.execCommand("insertHTML", false, text); to paste the data we got.

Conclusion

To paste as plain text in execCommand with JavaScript, we can insrt plain text with execCommand.

Sometimes, we want to do something N times with JavaScript.

In this article, we’ll look at how to do something N times with JavaScript.

How to do something N times with JavaScript?

To do something N times with JavaScript, we use a for loop.

For instance, we write

const times = 10;

for (let i = 0; i < times; i++) {
  doSomething();
}

to use a for loop to loop i from 0 to 9.

We use i++ to increment i by 1 after each iteration.

And we call doSomething during each iteration.

Conclusion

To do something N times with JavaScript, we use a for loop.