Skip to content

Instantly share code, notes, and snippets.

@fisherwebdev
Created July 8, 2012 04:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fisherwebdev/3069243 to your computer and use it in GitHub Desktop.
Save fisherwebdev/3069243 to your computer and use it in GitHub Desktop.
Putting this in the bottom of a HTML document's body tag will enable a developer to have the body's width available for reference. It could also be used for other real-time logging, as needed.
<!--
========================================================
LOGGER
I go in the bottom of the body!
https://gist.github.com/3069243
________________________________________________________
-->
<div id=logger></div>
<style>
#logger {
position:absolute;
bottom:10px;
left:10px;
padding:20px;
border-radius: 16px;
background:rgba(0, 0, 0, 0.2);
border:2px solid black;
color:black;
}
</style>
<script>
var logger = document.getElementById("logger"),
logData = function () {
/* Getting the offsetWidth of the body is
* useful for doing responsive web design work.
* Add more stuff here as needed.
*/
var width = document.body.offsetWidth;
if ("textContent" in logger) {
logger.textContent = width; // W3C
}
else if ("innerText" in logger) {
logger.innerText = width; // IE
}
};
if (logger.addEventListener) { // W3C
window.addEventListener("resize", logData);
}
else if (logger.attachEvent) { // IE
window.attachEvent("onresize", logData);
}
</script>
<!--
========================================================
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment