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 :
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With