Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
DevTools snippet that lets you focus on a single element during developement
(function() {
function hideEvertyhingAround($el) {
const $parent = $el.parentElement;
$parent.style.transition = 'background-color 150ms ease-in';
$parent.style.backgroundColor = 'white';
$parent.childNodes.forEach($child => {
if($child !== $el && $child.style) {
$child.style.transition = 'opacity 150ms ease-in';
$child.style.opacity = '0';
}
});
if($parent.parentElement) {
hideEvertyhingAround($parent);
}
}
function updatePosition() {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const fixX = (windowWidth/2 - elBCR.width/2) - elBCR.left;
const fixY = (windowHeight/2 - elBCR.height/2) - elBCR.top;
document.body.style.transition = 'transform 150ms 150ms ease-in';
document.body.style.transform = `translate3d(${fixX}px, ${fixY}px, 0)`;
}
const $el = $0;
const elBCR = $el.getBoundingClientRect();
document.body.style.height = '100vh';
document.body.style.width = '100vw';
document.body.style.overflow = 'hidden';
hideEvertyhingAround($el);
updatePosition();
window.addEventListener("resize", updatePosition);
})();
@kdzwinel

This comment has been minimized.

Copy link
Owner Author

commented Sep 21, 2016

script in action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.