Hey everyone! Welcome to today’s tutorial. In this tutorial, we will learn how to detect if javascript is disabled. We will display a message if the browser does not support javascript or if the user has turned off javascript. To do this, we need just HTML. We will learn to use a special tag called .
Video Tutorial:
If you are interested to learn by coding along with a video tutorial rather than reading this blog post, please check out the video down below. I post new tips, tricks and tutorials related to web development on my youtube channel regularly.
So subscribe to my youtube channel, so you don’t miss out on these useful resources.
Project Folder Structure:
Before we start to code, let us take a look at the project folder structure. We create a project folder called – Detect If Javascript Is Disabled. Inside this folder, we have two files – index.html and style.css. The first file is the HTML document, while the second one is the stylesheet.
HTML:
Let us start with the HTML. First, copy the code provided to you below and paste it into your HTML document.
The HTML contains a div with the class name – wrapper. We have to wrap all the elements inside this wrapper. For the sake of the demo, I have just used only one h1 element. The h1 tag consists of the text – Javascript is Enabled. This text will help you recognize if our code is working.
Next, we use a tag called <noscript>. Many of you might have never heard about it or used it. So let us understand what is <noscript>. Basically <noscript> will define content that we need to display in case the user has turned off javascript.
Now we use a <style> tag in which we set the display of wrapper to none. What this means is – if the browser doesn’t support javascript or if javascript is turned off by the user then simply hide everything wrapper inside the wrapper element.
We now have to set a message to be displayed if the user disables javascript. For that, we use div with the class – “msg”. Inside this div, we have the text – Javascript is Disabled.
So when the user turns off javascript, the tag will hide all the elements on the page and will display a message informing the user has turned off javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Detect If Javascript Is Disabled</title>
<!-- Google Font-->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<h1>Javascript is <span>Enabled</span></h1>
</div>
<noscript>
<style>
.wrapper {
display: none;
}
</style>
<div class="msg">Javascript is <span>Disabled</span></div>
</noscript>
</body>
</html>
CSS:
Now for the CSS part. I have used CSS only to make the output a little bit attractive. It does not affect the functionality of the code in any way. So you can skip the CSS code. Since we do not require it, I won’t be explaining the CSS code.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.wrapper,
.msg {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
text-align: center;
font-weight: 600;
}
.wrapper h1,
.msg {
font-size: 60px;
}
.wrapper span,
.msg span {
color: #fc0167;
}
That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, if you have any queries, suggestions, or feedback drop them in the comments below.
Happy Coding!
