1

I'm trying to create a script that finds the coordinates of the top-left and the bottom-right corners of the window viewport depending on the scrolling.

To achieve this I need the total page height/width and the amount of vertical/horizontal scrolling.

My problem is that there are so many different properties that can be applied to window, document, body, ...etc. I'm not event talking about the different browsers.

So basically my question is the following :

  • Ho can I get the total page height/width, the viewport size and the amount of vertial/horizontal scrolling in a cross browser compatible way without jQuery ?

Thank you a lot in advance !

I started using the answer posted here : JavaScript get window X/Y position for scroll but it's just part of the whole answer I think.

Community
  • 1
  • 1
m_vdbeek
  • 3,704
  • 7
  • 46
  • 77
  • cross browser.. without jQuery.. umm you have much work ahead. – Nelson Nov 05 '12 at 18:32
  • Yes, I know that it's not a really good idea to do cross browser without jQuery, but I thought that if it's only for 3-4 properties the code would remain relatively short ... – m_vdbeek Nov 05 '12 at 18:34
  • Can't really help you in plain javascript, but you can look at the source of http://www.appelsiini.net/projects/viewport and for the jQuery calls you have the source for that too. – Nelson Nov 05 '12 at 18:38

2 Answers2

2

This is what I have used in the past when I needed to use a non jQuery way of identifying the size of the end user's screen. It is far from perfect but I have found it hits the high spots and works on most browsers. It also won't get the exact size, but if you are just concerned about displaying everything on the screen this works for me.

// Function to get the height of the end user's window
function getWindowHeight() {
    var winHeight = 0;
    // Check for common mobile browser
    if ((screen.width < 300)||(screen.height < 300)) {
        if (( window.outerHeight != undefined )||( window.outerHeight > 100 )){
            winHeight = window.outerHeight;
        }
        else{
            winHeight = screen.Height;
        }
    }
    // If not, check to see what Browser is being used.
    else {
        if( typeof (window.innerWidth ) == 'number') {
            //Non-IE
            winHeight = window.innerHeight;
        } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight )) {
            //IE 6+ in 'standards compliant mode'
            winHeight = document.documentElement.clientHeight;
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight )) {
            //IE 4 compatible
                winHeight = document.body.clientHeight;
        } else if(screen.height == 'number'){
            //IE Mobile 6.0
            winHeight = screen.height;
        }
    }
    return winHeight;
}


// Function to get the width of the end user's window
function getWindowWidth() {
    var winWidth = 0;
    // Check for common mobile browser
    if (input == "yes"){
        if (( window.outerWidth != undefined )||( window.outerWidth > 100 )){
            winWidth = window.outerWidth;
        }
        else{
            winWidth = screen.width;
        }
    }
    // If not, check to see what Browser is being used. 
    else {          
        if( typeof (window.innerWidth ) == 'number') {
            //Non-IE
            winWidth = window.innerWidth;
        } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight )) {
            //IE 6+ in 'standards compliant mode'
            winWidth = document.documentElement.clientWidth;
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight )) {
            //IE 4 compatible
            winWidth = document.body.clientWidth;
        } else if(screen.width == 'number'){
            //IE Mobile 6.0
            winWidth = screen.width;
        }
    }
    return winWidth;
}

You'll need to add a lot more if you want it to encompass all of the options out there, but hopefully this will get you somewhere.

Matt
  • 653
  • 1
  • 8
  • 20
0

get the total page height/width

Just use document.documentElement.scrollWidth and scrollHeight

the viewport size

There're 2 sizes: with or without scrollbars. To get viewport size with scrollbars, use:

var viewportWidthWithScrollbars = window.innerWidth || document.documentElement.offsetWidth; (change to innerHeight and offsetHeight for height)

innerWidth is for W3C browsers and offsetWidth for IE in standard mode.

To get the viewport size without scrollbars (that is what you probably need), use:

var viewportWidthWithoutScrollbars = document.documentElement.clientWidth;

the amount of vertial/horizontal scrolling

This is the tricky part. All browsers except for Chrome use documentElement.scrollLeft and Chrome (and IE in quirks mode) uses document.body.scrollLeft, so we have to check both values:

var pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

I tested these methods in W3C-compatible browsers (Opera, FF, Chrome) and IE 8 with doctype (i.e. only in standard-compiant mode). I didn't test the code in quirks mode, but it's very bad idea to use quirks mode anyway. If you still want to use it, I guess you have to check properties for body instead of documentElement.

I took this page for reference: http://www.quirksmode.org/dom/w3c_cssom.html

You can use this page for testing in any other browser: http://jsbin.com/obewib/1

Egorinsk
  • 53
  • 1
  • 3