Cross Browser Dimensions

[john]

Add new cross browser methods like:

$(window).height(); $(window).width(); $(window).innerHeight(); $(window).innerWidth(); $(document).height(); $(document).width(); $(document).scrollTop(); $(document).scrollLeft();

[anonymous]

I use this rather often (shamelessly copied from Prototype):

$.fn.totalX = function() {
  var result = 0;
  var element = this.get(0);
  if (element.offsetParent) {
    while (element.offsetParent) {
      result += element.offsetLeft + (element.clientLeft || 0);
      element = element.offsetParent;
    }
  }
  else if (element.x) {
    result += element.x;
  }
  return result;
};

$.fn.totalY = function() {
  var result = 0;
  var element = this.get(0);
  if (element.offsetParent) {
    while (element.offsetParent) {
      result += element.offsetTop + (element.clientTop || 0);
      element = element.offsetParent;
      // Hack.. Seems it is a good idea to ignore forms in IE. Don't know why
      if (element.clientTop != null && element.tagName.toLowerCase() == "form") {
        element = element.offsetParent;
      }
    }
  }
  else if (element.y) {
    result += element.y;
  }
  return result;
};

[paul]

I added a new core plugin called dimensions.js, which has been added to the SVN trunk. Currently, it knows the functions height(), width(), innerHeight(), innerWidth(), outerHeight(), outerWidth, scrollLeft() and scrollTo().

Next features coming are the global offset functions!

[liquid@…]

to allow for this behavior without digging into the dom and therefore just relying in $().height()... would be useful to get added to this library:

    function resize_iframe() {
        $('iframe').each(function() {
            if ($(this).attr('scrolling') == 'no') {
                $(this).height(this.contentWindow.document.body.scrollHeight + 'px');
            }
        });

what i would like to see is $('iframe').contentHeight() to return cross browser compatible height of the content inside the iframe...

$('iframe').get(0).contentWindow.document.body.scrollHeight seems to work for that.

here is a patch:

--- dimensions.js.orig	2006-09-13 20:58:49.562500000 -0500
+++ dimensions.js	2006-09-13 21:08:20.656250000 -0500
@@ -163,3 +163,19 @@
 	}	

 	return this.get(0).scrollTop;

 }
 No newline at end of file
+
+/**
+ * Returns the real height of content
+ *
+ * @example $("#testiframe").contentHeight()
+ * @result [ 800px ]
+ * 
+ * @name contentHeight
+ * @type jQuery
+ * @cat Dimensions
+ */
+$.fn.contentHeight = function() {
+	if(this.get(0) == window || this.get(0) == document) return this.height();
+	return this.get(0).contentWindow.document.body.scrollHeight;
+}
+

more work will probably need to be done on this if its extended past iframes (to retun something for other elements with an error.. but you get the point)... thoughts?

[brandon.aaro]

I had some issues with the Position methods in prototype so I actually wrote a very comprehensive getOffset function that takes options and all. I don't think the options are really necessary and I think it could probably be optimized some but here it is: ​http://www.brandonaaron.net/articles/2006/08/10/prototype-extensions-element-getoffset

I wouldn't mind converting this to a jQuery plugin if anyone needs it. I already have used a simplified version of it in one of my own plugins.

[brandon]

The dimensions.js now has an offset method for getting the position of an element.

It seems that the proposed contentHeight method is a specialized case and should probably not be included into dimensions.js.

I'm going to close this as fixed. Feel free to re-open if any new features for dimensions.js come up or if anyone disagrees that the proposed contentHeight method shouldn't be included.