Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
HTML

How to detect if JavaScript is disabled with HTML?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect if JavaScript is disabled with HTML.

In this article, we’ll look at how to detect if JavaScript is disabled with HTML.

How to detect if JavaScript is disabled with HTML?

To detect if JavaScript is disabled with HTML, we add the noscript tag.

For instance, we write

<noscript>
  <style type="text/css">
    .pagecontainer {
      display: none;
    }
  </style>
  <div class="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>
</noscript>

to add the noscript tag with the content that’s displayed when JavaScript is disabled.

Conclusion

To detect if JavaScript is disabled with HTML, we add the noscript tag.

Categories
HTML

How to make HTML select read only?

Labrador retriever puppy walking on green grass

Sometimes, we want to make HTML select read only.

In this article, we’ll look at how to make HTML select read only.

How to make HTML select read only?

To make HTML select read only, we disable all the select’s options.

For instance, we write

<select>
  <option disabled>1</option>
  <option selected>2</option>
  <option disabled>3</option>
</select>

to disable the options we don’t want the user to select with the disabled attribute.

And we set the default option with the selected attribute.

Conclusion

To make HTML select read only, we disable all the select’s options.

Categories
JavaScript Answers

How to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to capture HTML Canvas as gif/jpg/png/pdf with JavaScript.

In this article, we’ll look at how to capture HTML Canvas as gif/jpg/png/pdf with JavaScript.

How to capture HTML Canvas as gif/jpg/png/pdf with JavaScript?

To capture HTML Canvas as gif/jpg/png/pdf with JavaScript, we call the toDataURL method.

For instance, we write

const canvas = document.getElementById("mycanvas");
const image = canvas.toDataURL("image/png");

to get the canvas with getElementById.

Then we call toDataURL with 'image/png' to return a base64 string with the canvas content in png format.

Conclusion

To capture HTML Canvas as gif/jpg/png/pdf with JavaScript, we call the toDataURL method.

Categories
JavaScript Answers

How to strip HTML from text with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to strip HTML from text with JavaScript

In this article, we’ll look at how to strip HTML from text with JavaScript.

How to strip HTML from text with JavaScript?

To strip HTML from text with JavaScript, we call parseFromString to parse the HTML string.

Then we get its text content.

For instance, we write

const strip = (html) => {
  const doc = new DOMParser().parseFromString(html, "text/html");
  return doc.body.textContent || "";
};

to define the strip function.

In it, we call parseFromString to parse the html string into a DOM object.

Then we get the text from the DOM object with textContent.

Conclusion

To strip HTML from text with JavaScript, we call parseFromString to parse the HTML string.

Then we get its text content.

Categories
JavaScript Answers

How to make JavaScript execute after page load?

Labrador retriever puppy walking on green grass

Sometimes, we want to make JavaScript execute after page load.

In this article, we’ll look at how to make JavaScript execute after page load.

How to make JavaScript execute after page load?

To make JavaScript execute after page load, we use the defer attribute.

For instance, we write

<script src="script.js" defer></script>

to add the defer attribute to the script tag to make script.js load after the page is loaded.

Conclusion

To make JavaScript execute after page load, we use the defer attribute.