Member-only story
Let’s do a gimmicky little bit of JavaScript that will censor a website if the focus is lost. For this what we will make happen is to cover the screen in black if it loses focus. Losing focus could happen when another app is opened, causing the web browser to be in the background or simply when switching to another browser tab.
For this example we are going to cover the page from view, but you could use this also to be able to pause processing data or performing tasks while the user is not active on that page. This could be a good way to keep the user on the page, or simply to pause a browser based game automatically if something interrupts.
Let’s start with a basic HTML page.
<html>
<head>
<meta charset="utf-8">
<title>Javascript Censorship</title>
</head>
<body><h1 style="color:red;">Hello world.</h1></body>
</html>
As you can see, I’ve just got a very simple little HTML page to start with. I’ve hard coded in a style for the h1 tag (which is bad practice) but it’s just to demo this example.
Adding the CSS
First we need to add a css class that will style our censorship layer.
<style type="text/css">
.overlay{
background-color:#000;
position:fixed;
width:100%…
