Skip to main content

Bug Tracker

Side navigation

#184 closed feature (fixed)

Opened September 07, 2006 09:49AM UTC

Closed October 08, 2006 02:10AM UTC

Last modified March 09, 2012 03:25AM UTC

Cross Browser Dimensions

Reported by: john Owned by:
Priority: major Milestone:
Component: core Version:
Keywords: Cc:
Blocked by: Blocking:

Add new cross browser methods like:









Attachments (0)
Change History (5)

Changed September 07, 2006 11:18AM UTC by anonymous comment:1

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;

Changed September 08, 2006 10:59AM UTC by paul comment:2

owner: paulanonymous
status: newassigned

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!

Changed September 14, 2006 02:11AM UTC by liquid@haveh comment:3

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?

Changed September 24, 2006 04:23AM UTC by brandon.aaro comment:4

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:

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.

Changed October 08, 2006 02:10AM UTC by brandon comment:5

resolution: → fixed
status: assignedclosed

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.