Skip to content

Instantly share code, notes, and snippets.

@amitkhare
Created June 22, 2022 09:26
Show Gist options
  • Save amitkhare/68d738338cf2c0b06e81f1796a165459 to your computer and use it in GitHub Desktop.
Save amitkhare/68d738338cf2c0b06e81f1796a165459 to your computer and use it in GitHub Desktop.
Google Chrome -> DevTools -> Sources ➜ Snippets ➜ create a New snippet
const style = document.createElement('style');
style.textContent = '.app > div:not(:first-child) { visibility: hidden; }';
document.head.appendChild(style);
function addCustomEvent() {
const ADS_WIDTH = 320;
document.addEventListener('resizecanvas', (e) => {
// push the ads container outside of the viewport
window.innerWidth = document.documentElement.clientWidth + ADS_WIDTH;
});
}
// inject our custom event listener into the "main world"
document.documentElement.setAttribute('onreset', `(${addCustomEvent})()`);
document.documentElement.dispatchEvent(new CustomEvent('reset'));
document.documentElement.removeAttribute('onreset');
function resize(event = {}) {
if (!event.skip) {
document.dispatchEvent(new CustomEvent('resizecanvas'));
// trigger another resize event to update any listeners with the new window.innerWidth
const resizeEvent = new Event('resize');
resizeEvent.skip = true;
window.dispatchEvent(resizeEvent);
}
}
let debounce;
window.addEventListener('resize', event => {
clearTimeout(debounce);
debounce = setTimeout(() => resize(event), 100);
});
resize();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment