7

I'm building a google chrome extension , I'm doing some work on the right side (in my friend stories), in fact, I'm searching for a specific friend stories whose name appears in the input element after clicking the button. I need to dim/darken all other elements which appear in the black border in the picture except for the right element while searching until he presses X button

I've no idea how to reach all other elements except from one !! :(

the picture : Facebook page

3
  • use position and dimensions of target element to define mask of 4 elements that mask everything else
    – charlietfl
    Commented Feb 19, 2015 at 14:06
  • what to do with dimensions ?what is mask ? how to define mask !! I can't understand sorry Commented Feb 19, 2015 at 14:08
  • I've accomplished this in the past by covering the entire page with a canvas element, then clearing the part that covers the desired element. I don't have teh codez on me right now, but you get the location of the element you want to highlight and apply these coordinates to clearRect.
    – Scott
    Commented Feb 19, 2015 at 15:50

1 Answer 1

12

I found my codez! Puts a canvas on the screen and cuts out the part around the selected element. Just call openOverlay(elem) where elem is the element you want to highlight.

var padding = 5;  //Space around canvas
var animDelay = 250;  //Delay used 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);
}

//Press X to close?
window.addEventListener("keypress", function(e) {
  //120 is X
  if (e.which === 120 && window.overlayCanvas) closeOverlay.call(overlayCanvas);
}, false);
/* necessary part */
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; }
}

/* junk 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>

Not the answer you're looking for? Browse other questions tagged or ask your own question.