No JS detection utility

Include this snippet directly in your <head> along with adding class .vf-no-js to your <html> (<html class="vf-no-js">).

github location npm version

Usage

If JS is enabled in a user's browser, .vf-no-js will be swapped to .vf-js.

This method allows using CSS to conditionally show content.

.vf-no-js .js-is-not-on {
  /* SHOW block that says you need js to use this site */
}
.vf-js .js-is-not-on {
  /* HIDE block that says you need js to use this site */
}

Variants

HTML 
<script>
  // Detect if JS is on and swap vf-no-js for vf-js on the html element
  (function(H) {
    H.className = H.className.replace(/\bvf-no-js\b/, 'vf-js')
  })(document.documentElement);
</script>

Examples

Changelog

Changelog

1.0.1

  • Classify as a utility component

1.0.0

  • Initial stable release

Assets


File system location: components/vf-no-js

Find an issue on this page? Propose a change or discuss it.