Ways to make all elements appear darker with the exception of one specific element

Question

Ways to make all elements appear darker with the exception of one specific element

I am currently developing a Google Chrome extension and working on the right side, specifically in my friend's stories section. I am looking for a particular friend's story by searching for their name entered in the input field after clicking the button. I want to dim or darken all elements within the black border in the picture except for the one that matches the search until the user presses the X button.

I am struggling to figure out how to target all other elements except for one! :(

Here is the picture:

javascript jquery css facebook google-chrome-extension

Answer 1

Answer №1

My treasure trove of code has been discovered! Behold as a canvas is summoned forth on the screen, meticulously carving out the area surrounding the chosen element. All it takes is to beckon openOverlay(elem), where elem symbolizes the very object you wish to illuminate.

var padding = 5;  //A buffer of space around the canvas
var animDelay = 250;  //Time delay utilized in CSS animation and transition for canvas.highlight

var divs = document.getElementsByTagName("div");

for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener("click", function() {
    openOverlay(this);
  }, true);
}

function openOverlay(elem) {
  var loc = elem.getBoundingClientRect();
  var canvas = document.createElement("canvas");
  canvas.className = "highlight";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.clearRect(loc.left - padding, loc.top - padding, loc.width + padding * 2, loc.height + padding * 2);
  document.body.appendChild(canvas);
  window.overlayCanvas = canvas;
  canvas.onclick = closeOverlay;
}

function closeOverlay() {
  delete window.overlayCanvas;
  this.style.opacity = 0;
  var self = this;
  setTimeout(function() {
    self.parentNode.removeChild(self);
  }, animDelay);
}

//Hit X to exit?
window.addEventListener("keypress", function(e) {
  //120 denotes X
  if (e.which === 120 && window.overlayCanvas) closeOverlay.call(overlayCanvas);
}, false);

/* Vital Component */
canvas.highlight {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.5;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  -webkit-animation: canvasFade 250ms ease;
  animation: canvasFade 250ms ease;
}
@-webkit-keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}
@keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

/* Miscellaneous Styling */
div {
  margin: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  background: green;
  cursor: pointer;
}
div.funky {
  padding: 3px 8px;
  margin-top: 5.2px;
  border-bottom: 10px solid red;
}

<div>One</div>
<div>One</div>
<div class="funky">One</div>
<div>One</div>

Answer 2

My treasure trove of code has been discovered! Behold as a canvas is summoned forth on the screen, meticulously carving out the area surrounding the chosen element. All it takes is to beckon openOverlay(elem), where elem symbolizes the very object you wish to illuminate.

var padding = 5;  //A buffer of space around the canvas
var animDelay = 250;  //Time delay utilized in CSS animation and transition for canvas.highlight

var divs = document.getElementsByTagName("div");

for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener("click", function() {
    openOverlay(this);
  }, true);
}

function openOverlay(elem) {
  var loc = elem.getBoundingClientRect();
  var canvas = document.createElement("canvas");
  canvas.className = "highlight";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext("2d");
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.clearRect(loc.left - padding, loc.top - padding, loc.width + padding * 2, loc.height + padding * 2);
  document.body.appendChild(canvas);
  window.overlayCanvas = canvas;
  canvas.onclick = closeOverlay;
}

function closeOverlay() {
  delete window.overlayCanvas;
  this.style.opacity = 0;
  var self = this;
  setTimeout(function() {
    self.parentNode.removeChild(self);
  }, animDelay);
}

//Hit X to exit?
window.addEventListener("keypress", function(e) {
  //120 denotes X
  if (e.which === 120 && window.overlayCanvas) closeOverlay.call(overlayCanvas);
}, false);

/* Vital Component */
canvas.highlight {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  opacity: 0.5;
  -webkit-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
  -webkit-animation: canvasFade 250ms ease;
  animation: canvasFade 250ms ease;
}
@-webkit-keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}
@keyframes canvasFade {
  from { opacity: 0; }
  to { opacity: 0.5; }
}

/* Miscellaneous Styling */
div {
  margin: 10px;
  width: 100px;
  height: 100px;
  display: inline-block;
  background: green;
  cursor: pointer;
}
div.funky {
  padding: 3px 8px;
  margin-top: 5.2px;
  border-bottom: 10px solid red;
}

<div>One</div>
<div>One</div>
<div class="funky">One</div>
<div>One</div>

Ways to make all elements appear darker with the exception of one specific element

Answer №1

Similar questions

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

jQuery Mobile: issue with positioning an external panel on the right side

Best practice for displaying image data from PHP for use in Jquery

Enhance and expand an array that is deeply nested within an object

Creating a list in React and adding a delay using setTimeout() method

Having trouble getting an HTML form to function with Ajax and PHP?

What is the best way to expand my navigation bar to fill the entire width of my div?

Tips for expanding the boundary of a Font Awesome icon

Guide for manually initiating the mouseleave event on a smartphone or tablet

Scrolling horizontally using the WinJS list view

How can we develop a NodeJS function that returns a query result using a callback method?

Error encountered while using jQuery Ajax - unable to properly handle the error

Searching for a specific element using Python and Selenium

The anchor tag <a> is configured for inline display but is unexpectedly occupying the entire space

When attempting to make a JSONP call to Instagram's website, an error was encountered stating "Uncaught Syntax

What is the method for shifting a value within an array using Jquery?

What is the process for loading a .x model in Three.js?

Personalized tooltip for React ChartJs

If someone installs our chat widget on their website using an <iframe> script, I would like the widget to be deactivated when our website is experiencing downtime

Tips on passing a variable into a controller using jQuery AJAX from the URL