Question

My Description

---

I have a website application that relies heavily on Javascript and JQuery. If the user has JS disabled in their browser settings, the website does not function as well as it should, although it still works.

I would like to stop people seeing my website that have JS disabled, but without redirecting them to a non-javascript page. I would like to alert my user that JS should be enabled in a well presented CSS method.

If JS is disabled, I would like to show a semi-transparent/white CSS layer, displayed on top of my webpage with a width of 100% and a height of 100%, with some kind words to describe the issue to my user, and possibly instructions to enable JS.

My Plan

---

• Have a semi-transparent CSS layer 100% x 100% to cover my webpage, on
  every page.
• Have an on-load Javascript function, that when the page loads, it
  removes the layer. So if there is no Javascript found, it won’t
  remove the layer.

My Question

---

Is this the best way to accomplish this? If it is, can you help me with the Javascript function that would close the CSS layer, on-load, or explain to me what the function should include to make this work? My Javascript sucks…

Answer 1

That sounds like a workable solution.

Hiding the layer is pretty simple.

$(function () {
    $("#layerId").hide();
});

Setting up the layer so it looks right is where the work really is.