Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Viewport Size, Screen Resolution, Mouse Postition

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>

Comments

  1. Jack Dunstan
    Permalink to comment#

    Hullo,

    The reference URL is 404.

    Cheers,

    J.

  2. Giacomo
    Permalink to comment#

    Hey, check the typo “Mouse Postition”. I think it should be “Mouse Position”. Cheers.

  3. Munawar
    Permalink to comment#

    We have created a demo on http://jsbin.com/apeveq/

  4. Joe Liuzzi
    Permalink to comment#

    Munawar, that is a great demo.

  5. Tushar Srivastava
    Permalink to comment#

    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..

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```