Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Screentool: Short self-invoking function to check on screen width and height as well as device dimensions and touch support. Add it to your development enivironment.
(function(){
var wWidth = document.body.clientWidth,
wHeight = window.innerHeight,
sWidth = screen.width,
sHeight = screen.height,
touch = 'ontouchstart' in window || 'onmsgesturechange' in window,
html = '<div id="stopen" style="line-height: 1em; font-weight: bold; padding: 10px;">?</div>' +
'<div id="ststats" style="display: none; width: 140px; padding: 10px;">' +
'Browser Width: <strong id="stwwidth">' + wWidth + '</strong><br>' +
'Browser Height: <strong id="stwheight">' + wHeight + '</strong><br>' +
'Device Width: <strong id="stswidth">' + sWidth + '</strong><br>' +
'Device Height: <strong id="stsheight">' + sHeight + '</strong><br>' +
'Touch: <strong id="sttouch">' + touch + '</strong>' +
'</div>';
var $el = document.createElement('div');
$el.setAttribute('id','st');
$el.setAttribute('style','cursor: pointer; position: fixed; bottom: 0; z-index: 5000; right: 0; color: #fff; background: rgba(0,0,0,.8); border-top: 1px solid rgba(0,0,0,.5); border-left: 1px solid rgba(0,0,0,.5); box-shadow: 1px 1px 5px rgba(0,0,0,.3); font-size: 12px; font-family: arial, sans; text-align: right;');
$el.innerHTML = html;
document.body.appendChild($el);
window.onresize=function(){
wWidth = document.body.clientWidth,
wHeight = window.innerHeight,
sWidth = screen.width,
sHeight = screen.height;
document.getElementById('stwwidth').innerHTML = wWidth;
document.getElementById('stwheight').innerHTML = wHeight;
document.getElementById('stswidth').innerHTML = sWidth;
document.getElementById('stsheight').innerHTML = sHeight;
};
var $stOpen = document.getElementById('stopen'),
$stStats = document.getElementById('ststats');
if (!window.addEventListener) {
$stOpen.attachEvent("onclick", function(){
$stStats.style.display = 'block';
$stOpen.style.display = 'none';
}, false);
$stStats.attachEvent("onclick", function(){
$stStats.style.display = 'none';
$stOpen.style.display = 'block';
}, false);
}
else {
$stOpen.addEventListener("click", function(){
$stStats.style.display = 'block';
$stOpen.style.display = 'none';
}, false);
$stStats.addEventListener("click", function(){
$stStats.style.display = 'none';
$stOpen.style.display = 'block';
}, false);
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment