This code is cross-browser compatible and checks the dimensions of the viewport, the screen resolution and the mouseposition which can be quite helpful to perform some checks with JavaScript.
<script type="text/javascript">
function getViewportWidth()
{
if (window.innerWidth)
{
return window.innerWidth;
}
else if (document.body && document.body.offsetWidth)
{
return document.body.offsetWidth;
}
else
{
return 0;
}
}
function getViewportHeight()
{
if (window.innerHeight)
{
return window.innerHeight;
}
else if (document.body && document.body.offsetHeight)
{
return document.body.offsetHeight;
}
else
{
return 0;
}
}
var tellMeTheSizes=function()
{
document.getElementById("viewportwidth").innerHTML = getViewportWidth() + "px";
document.getElementById("viewportheight").innerHTML = getViewportHeight() + "px";
document.getElementById("resolutionheight").innerHTML = screen.height + "px";
document.getElementById("resolutionwidth").innerHTML = screen.width + "px";
}
window.onload=function()
{
tellMeTheSizes();
}
window.onresize=function()
{
tellMeTheSizes();
}
window.onmousemove=function(event)
{
ev = event || window.event;
document.getElementById("mousetop").innerHTML = ev.pageY + "px";
document.getElementById("mouseleft").innerHTML = ev.pageX + "px";
}
</script>
Hullo,
The reference URL is 404.
Cheers,
J.
Hey, check the typo “Mouse Postition”. I think it should be “Mouse Position”. Cheers.
Mouse Prostitution
We have created a demo on http://jsbin.com/apeveq/
Munawar, that is a great demo.
Munawar! There’s a very little mistake I didn’t wanted to mention but I thought I should tell you. The Mouse Position Y and X are printing wrong. i.e. The X is printing position Y and Y is printing position X. Actually I looked at the code too. The top is loading Y position and left is loading X position, which is correct but they are printing under wrong label. By the way demo is awesome. To CSS Tricks too, the whole snippet is awesome. I just wanted to ask one thing. How can I use this data to fix the CSS issues that occurs at different screen resolutions. I want a Javascript solution rather than CSS3 solution as I know the trick with media queries. Hope that I will get my answer soon. Thank you..