Last active
November 19, 2016 19:17
-
-
Save mrpapercut/7a004210306b62dcf813 to your computer and use it in GitHub Desktop.
Google Chrome 49 removed the Viewport Helper, an indicator that shows the dimensions of the current window. Especially useful when developing a responsive website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(() => { | |
const vpd = document.createElement('div'), | |
st = { | |
'position': 'fixed', | |
'right': '0', | |
'top': '0', | |
'border': '5px solid #ccc', | |
'background': '#ccc', | |
'font-family': 'Arial', | |
'font-size': '13px', | |
'box-shadow': '0px 1px 2px', | |
'z-index': '999999' | |
}, | |
getD = () => {const {clientWidth, clientHeight} = document.documentElement; vpd.innerHTML = [clientWidth, clientHeight].map(c => c+'px').join(' × ')}; | |
for(var i in st) { | |
vpd.style[i] = st[i] | |
} | |
getD(); | |
document.body.appendChild(vpd); | |
window.addEventListener('resize', getD); | |
let {left, right, top, bottom} = vpd.getBoundingClientRect(); | |
window.addEventListener('mousemove', ({clientX, clientY}) => { | |
if (clientX > left && clientX < right && clientY > top && clientY < bottom) { | |
vpd.style.top = 'auto'; | |
vpd.style.bottom = '0px'; | |
} else { | |
vpd.style.top = '0px'; | |
vpd.style.bottom = 'auto'; | |
} | |
}) | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Great thanks man!
I use it every day and was unpleasantly surprised when after update I'm not find it again.
PS: I find that It's still showing in Opera (WebKit/Chromium versions). Nevertheless Chrome is my primary browser.