Search code examples
javascriptcsshtmlyui

In YUI, what is the difference between clientHeight, winHeight, and docHeight?

In a code snippet, I saw lines like this:

  var headerHeight = Y.one('#header').get('clientHeight');
  var $body = Y.one('body');

  this.viewportH = $body.get('winHeight');
  this.docHeight = $body.get('docHeight');

As I understand, clientHeight is the same as winHeight, while scrollHeight is the same as docHeight. Is it true? If so, why does YUI gives them different names?

Does anyone have ideas about this? Thanks!

Solution

  • winHeight Returns the inner height of the viewport - exludes scrollbar. it's your browser size (if you resize the browser there will be different values)

    docHeight Returns the current height of the document, it's not what appears on screen, but all the page size.

    Take a look here and click where is requiring:

    http://www.wfimc.org/public/js/yui/3.0.0/examples/node/node-screen_clean.html

    clientHeight Return the size of your frame exclude scroolbar: Take a look on this event: document.getElementById("client").onclick = function(){whatis('client');} at: http://jsfiddle.net/shibualexis/yVhgM/3/