I've been working on a new project - a chrome extension, and I'm looking to incorporate a feature that will dim the display or add a black transparent background over popular websites like Facebook and YouTube. Can someone guide me on how to achieve this using CSS and JavaScript?
To achieve this effect, CSS is more suitable than JavaScript.
In essence, you would design a div with the following styling:
<div id="overlay"></div>
<style>
#overlay{z-index:9999999;pointer-events:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.3);}
</style>
This code will generate a div that overlays your page content and darkens the entire page. (It's important to set the z-index of your overlay higher than other elements on the page, as different elements may have varying z-index values.)
Remember, the "a" value in rgba() represents opacity - a value of 0.3 allows seeing what lies beneath, colored black by the first three values 0,0,0.
If you were to accomplish this using only JavaScript, you can refer to this brief video demonstrating how to create HTML elements and add them to a page dynamically:
https://www.youtube.com/watch?v=VsXCK_2DJzA
A Challenge Arises (RESOLVED BELOW)
However, since the overlay div covers the page content, users might no longer interact with the content (i.e., cannot click fields or buttons). This is due to the elevated z-index placing the overlay between the cursor and the content. Every click registers on the overlay.
The solution, suggested by David Bailey in the comments, involves utilizing the css attribute pointer-events: none; on the overlay div. This instruction prompts CSS to disregard any clicks on the element and let them pass through to the underlying components.
/* Note: this is NOT jQuery - look carefully. */
const $ = document.querySelector.bind(document);
$('#mybutt').addEventListener("click", function() {
alert("You clicked me");
});
$('#mybutt2').addEventListener("click", function() {
$('#mybutt2').innerText = 'Try clicking buttons NOW';
$('#olay').classList.add("noPtrEvts");
});#olay{
pointer-events: none;
z-index:9999999;
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.3);
}
.noPtrEvts{
pointer-events: auto !important;
}<div id="olay"></div>
<h1>An Example Webpage</h1>
<div><img src="http://placekitten.com/300/150" /></div>
<button id="mybutt">Click me First</button>
<button id="mybutt2">Remove pointer-events CSS</button>To achieve this task solely using JavaScript is not possible, unless incorporating a CSS script. I have made adjustments to the tags in your post to involve the appropriate experts for assistance.
The process would involve something similar to the following:
body{
background-color: #302E2E;
}
Within the CSS code, it may be necessary to analyze the element classes and IDs to ensure consistent functionality across all platforms.
I have a unique challenge with an array of objects that I need to flatten into a new array of objects. The original structure is as follows: const points = [ { highlights: [ { title: 'Title 1', ...
I am currently working with react-native and I am trying to create a layout similar to the image provided below. I want the two divs to be equal in size until the right one ends, at which point the left one should take up the entire container. I initially ...
Looking for a solution: /browse/:type/:id? Is there a way to check if the value of :type is included in a predefined array of valid options? ...
I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...
For some time now, I've been using uplodify without any issues. Unfortunately, as of yesterday, it suddenly stopped working. I'm at a loss as to what might have caused this sudden change. Could someone please offer me some assistance? I've ...
I have been encountering an issue with saving uploaded files using their original names (with express-fileupload). Whenever I upload a file, it gets saved in the directory as [object Object]. Node: var express = require('express') var app = exp ...
I'm having some trouble with the jquery-confirm plugin from . Everything seems to be working fine, but when I try to delete an item, the jquery pops up an alert. However, when I click "okay", it doesn't actually delete the item. I can't figu ...
On my homepage, I have a carousel featuring multiple slides. However, when the third slide appears in the carousel, the positioning of the carousel buttons within the div class="rotator-controls" shifts downward due to the space taken up by the image. My o ...
Currently, I am receiving data from the server and storing it in 2 separate states. One state displays all the data received, while the other state presents the data in a paginated format. The data structure is defined as follows: type ArrayType = { nam ...
First of all, thank you for your assistance. I've been trying to load FullCalendar (https://fullcalendar.io/) on my development environments but it doesn't seem to be working. When I check the console in Chrome, it shows me the following error m ...
Looking for a way to optimize my code that contains the addRow() and deleteRow() functions. Currently, I have duplicated these functions for both radio buttons and checkboxes. Is there a more efficient way to achieve this? function addRow(tableID) { ...
I am struggling with positioning a div that contains an image and a caption. My goal is to make the caption break into a new line when it reaches 95% of the width of the image. Despite my efforts, I can't seem to achieve this. The text always pushes ...
I'm currently working on a project using Three.js and I have a set of 3D points in the form of (x, y, z) coordinates, as well as a series of faces. Each face consists of K points and can be either convex or concave in shape. Despite consulting the doc ...
In my React application, I have implemented a hook system. Each sub-hook that is generated within this main hook is assigned a unique ID automatically. This ID is incremented by 1 every time a new sub-hook is created, ensuring uniqueness. const App = ...
I am encountering an issue with the navbar toggle feature. It seems that my navbar toggle items are requiring two clicks to start working properly. I can provide you with any necessary code, but I am unsure what is causing this problem. <nav class="nav ...
I'm currently working on an app to explore the functionality of websockets in react native. I have successfully retrieved data from the websocket in JSON format and can output it to the console using console.log. However, my goal is to display a speci ...
As a novice full-stack web developer, I recently contributed to the creation of a game-cast app dedicated to ping-pong using the MEAN stack, SVG.js, and sockets. For those interested, here is the GitHub link: https://github.com/ChristopherRoySchneider/ping ...
During the development of my asp.net web app, I encountered a situation where I needed to automatically expand a select picker after a user clicks a button. This select picker is populated from a database and includes a search feature using bootstrap' ...
I am working with multiple relative positioned divs stacked on top of each other, each set to a height of 100% using jQuery upon loading. Within these relative positioned divs, there is a fixed div containing the content. Using skrollr, I have implemented ...
Looking to replace a Font Awesome icon with a background image using only CSS. Current Setup: https://i.sstatic.net/tkPXz.jpg .btn.btn-default.bootstrap-touchspin-up:before { font-family: Fontawesome; content: "\f067"; font-size: 14px; } ...