Get dimensions of element located in hidden parent

Question

How do I get height, width, outerHeight, etc dimensions for elements located in a hidden parent?

I've looked at How get size of element with hidden parent? but it doesn't work.

Below is what I have tried along with the results.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="actual/jquery.actual.js" type="text/javascript"></script>
        <style type="text/css">
            .hidden{display:none;}
            a{border: 1px solid black;margin:4px;padding:2px;}
        </style> 
        <script type="text/javascript">
            function getDim_normal($t){
                var dim = {
                    outerWidth:$t.outerWidth(),
                    outerHeight:$t.outerHeight(),
                    width:$t.css('width'),
                    height:$t.css('height'),
                };
                return dim;
            } 
            function getDim_nick($t){
                //Based on https://stackoverflow.com/a/2345813/1032531
                var previousCss  = $t.attr("style");
                $t.css({
                    position:   'absolute',
                    visibility: 'hidden',
                    display:    'block'
                });
                var dim = {
                    outerWidth:$t.outerWidth(),
                    outerHeight:$t.outerHeight(),
                    width:$t.css('width'),
                    height:$t.css('height'),
                };
                $t.attr("style", previousCss ? previousCss : "");
                return dim;
            } 

            function getDim_actualPlugin($t){
                //Based on http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/
                dim={
                    outerWidth_actual:$t.actual('outerWidth'),
                    outerHeigh_actualt:$t.actual('outerHeight'),
                    width_actual:$t.actual('width'),
                    height_actual:$t.actual('height'),
                };
                return dim;
            } 

            $(function(){
                var o=[];
                $('a').each(function(i) {
                    var $t=$(this);
                    o[i]={
                        normal:getDim_normal($t),
                        nick:getDim_nick($t),
                        actualPlugin:getDim_actualPlugin($t),
                    };
                    }
                );
                console.log( JSON.stringify(o, null, 2) );
            });
        </script>
    </head>

    <body>
        <div><a href="#">hello</a></div>
        <div class="hidden"><a href="#">hello</a></div>
        <div><a href="#" class="hidden">hello</a></div>
    </body> 
</html>

Results:

[
  {
    "normal": {
      "outerWidth": 38,
      "outerHeight": 25,
      "width": "31.76666px",
      "height": "18.76666px"
    },
    "nick": {
      "outerWidth": 38,
      "outerHeight": 26,
      "width": "31.76666px",
      "height": "19.76666px"
    },
    "actual": {
      "outerWidth_actual": 38,
      "outerHeigh_actualt": 25,
      "width_actual": 31.76666,
      "height_actual": 18.76666
    }
  },
  {
    "normal": {
      "outerWidth": 6.23334,
      "outerHeight": 6.23334,
      "width": "0px",
      "height": "0px"
    },
    "nick": {
      "outerWidth": 6.23334,
      "outerHeight": 6.23334,
      "width": "0px",
      "height": "0px"
    },
    "actual": {
      "outerWidth_actual": 2120,
      "outerHeigh_actualt": 26,
      "width_actual": 2113.76666,
      "height_actual": 19.76666
    }
  },
  {
    "normal": {
      "outerWidth": 38,
      "outerHeight": 26,
      "width": "31.76666px",
      "height": "19.76666px"
    },
    "nick": {
      "outerWidth": 38,
      "outerHeight": 26,
      "width": "31.76666px",
      "height": "19.76666px"
    },
    "actual": {
      "outerWidth_actual": 2120,
      "outerHeigh_actualt": 26,
      "width_actual": 2113.76666,
      "height_actual": 19.76666
    }
  }
]

hidden elements don't have dimensions or offset values. Browser ignores them because it doesn't need to render them — charlietfl, Oct 25 '15 at 19:07
@charlietfl The element in question isn't hidden, only its ancestor. Will I be forced to traverse up the DOM all the way up to `body`, find any ancestors which are hidden, temporarily make them visible, get the dimensions, then hide the ancestors again? — user1032531, Oct 25 '15 at 19:11
an element is hidden if it's parents are ... so yes if you absolutely need those dimensions before element is shown you would need to do something like that — charlietfl, Oct 25 '15 at 19:12
@charlietfl Agreed. Is it possible to do what I asked? EDIT. Just read your edited comment. Bummer! What I will probably do is whenever the parent is made visible, get the dimensions then. Not ideal but probably best. — user1032531, Oct 25 '15 at 19:14
depends on what you are doing. Would change other elements dimensions also. Can loop through `parents()` and test each parent in a loop and break when you find the first visible one — charlietfl, Oct 25 '15 at 19:16
Using is(':visible')? I think it needs to go up the Dom each time? — user1032531, Oct 25 '15 at 19:24
yes that would work... if you do it inside `each` can `return false` to break the loop when you find `is(':visible')` — charlietfl, Oct 25 '15 at 19:27
@charlietfl Sorry, earlier response was from my phone, and wasn't clear. It appears that every time `is('visible')` is used, it traverses completely up the DOM. As such, it seems that it shouldn't be used, and I should just force the process once without using it. I will give it a try and post an answer if it works. — user1032531, Oct 25 '15 at 20:24
@charlietfl Please see my added answer as a possible solution. Thank you — user1032531, Oct 25 '15 at 23:29

score 0 · Answer 1 · answered Oct 26 '15 at 19:47

0

What you can do is to give to a parent element styles like:

.parent {
  opacity: 0;
  z-index: -1;
}

Then take a measure and remove styles. If you have only one such element then perfomance is not the issue. If you have a lot of them (for instance - 20) it might be problematic.

answered Oct 26 '15 at 19:47

sunpietro

2,059
4
24
42

How do you know which element to apply this to? – user1032531 Oct 26 '15 at 20:10

ducminh1903 · Answer 2 · 2016-07-04T13:42:06.127

You can try to add this tiny plugin to fix for JQuery. It worked in my projects :)

(function ($) {
$(function () {
    var styleSheet = document.styleSheets[0];
    if (!styleSheet) {
        styleSheet = $("<style></style>").appendTo("head")[0];
    }

    styleSheet.insertRule('.dim_mask_block{ display: block !important }', 0);

});

$.fn.scrollHeight = function () {
    return this[0] ? this[0].scrollHeight : undefined;
};

$.fn.scrollWidth = function () {
    return this[0] ? this[0].scrollWidth : undefined;
};

var dimensionMethods = ["width", "height", "outerWidth", "outerHeight", "innerWidth",
    "innerHeight", "scrollHeight", "scrollWidth"];

var methods = [];
for (var i = 0; i < dimensionMethods.length; i++) {
    methods[dimensionMethods[i]] = $.fn[dimensionMethods[i]];
}

function getRealDimension(elem, method) {
    var fns = $.isArray(method) ? method : [method];

    if (!elem)
        return undefined;

    var noneElems = [],
            node = elem;

    if (elem.offsetHeight == 0 && elem.offsetWidth == 0) {

        while (node && node.tagName != "BODY") {
            var $o = $(node);
            if ($o.css('display') == 'none') {

                noneElems.push(node);

                $o.addClass('dim_mask_block');

                var res = {}, visible = false;

                fns.forEach(function (mt) {
                    var x = methods[mt].call($(elem));
                    if (x) {
                        visible = true;
                    }
                    res[mt] = x;
                });

                if (visible) {
                    $(noneElems).removeClass('dim_mask_block');
                    return res;
                }

            }

            node = node.parentNode;
        }
    }

    var res = {};
    fns.forEach(function (mt) {
        res[mt] = methods[mt].call($(elem));
    });

    $(noneElems).removeClass('dim_mask_block');

    return res;
}

 $.each(dimensionMethods, function (i, fn) {
    $.fn[fn] = function () {
        if (arguments.length > 0) {
            var args = [];
            for (var i = 0; i < arguments.length; i++)
                args[i] = arguments[i];
            return methods[fn].apply(this, args);
        }
        if (!this[0])
            return;
        return getRealDimension(this[0], fn)[fn];

    };
});

})(jQuery);

Now, you can use all methods as "width", "height", "outerWidth","outerHeight", "innerWidth","innerHeight", "scrollHeight", "scrollWidth" in JQuery for invisible element. Good luck :)

score -1 · Accepted Answer · edited Oct 26 '15 at 19:39

Okay, here is what I am thinking. In theory, it should work for any element whether hidden or a child of one or more hidden ancestors. See https://jsbin.com/ruzudututo/edit?html,output for demo of the below script. Maybe not the right forum to request a review, but since started here, would appreciate any constructive criticism.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <style type="text/css">
            .hidden{display:none;}
            a{border: 1px solid black;margin:4px;padding:2px;}
        </style> 
        <script type="text/javascript">
            $.getDimensions=function (e,p)   {
                /*Since I am using jQuery to get element dimensions, make this a jQuery utility method.
                Consider not using jQuery!
                Future.  Allow user to pass those variables desired, and only return those to improve performance.
                Assumes BODY is never hidden
                */
                var hidden=[], style, $e=$(e);
                while(e.parentNode.tagName!='HTML') {
                    style=e.currentStyle?e.currentStyle:getComputedStyle(e,null);
                    if((style.display=='none')) {
                        hidden.push({'e':e,'position':style.position,'visibility':style.visibility,'display':style.display});
                        e.style.position='absolute';
                        e.style.visibility='hidden';
                        e.style.display='block';
                    }
                    e = e.parentNode;
                }
                /* Change to use native JavaScript.
                If changes to accept desired attributes instead of all, using the following:
                var results={}; for (var i = p.length; i > 0; --i) {results[p[i-1]]=this[p[i-1]]();}
                */
                var results={
                    width:$e.width(),
                    height:$e.height(),
                    innerWidth:$e.innerWidth(),
                    innerHeight:$e.innerHeight(),
                    outerWidth:$e.outerWidth(),
                    outerHeight:$e.outerHeight(),
                    outerWidthTrue:$e.outerWidth(true),
                    outerHeightTrue:$e.outerHeight(true),
                };

                //Set it back to what it was
                for (var i = hidden.length; i > 0; --i) {
                    hidden[i-1].e.style.position=hidden[i-1].position;
                    hidden[i-1].e.style.visibility=hidden[i-1].visibility;
                    hidden[i-1].e.style.display=hidden[i-1].display;
                }
                return results;
            }

            function getDimensionsNormal(e) {
                var $e=$(e);
                return {
                    width:$e.width(),
                    height:$e.height(),
                    innerWidth:$e.innerWidth(),
                    innerHeight:$e.innerHeight(),
                    outerWidth:$e.outerWidth(),
                    outerHeight:$e.outerHeight(),
                    outerWidthTrue:$e.outerWidth(true),
                    outerHeightTrue:$e.outerHeight(true),
                };
            }

            $(function(){
                console.log($.getDimensions(document.getElementById("a1")));
                console.log(getDimensionsNormal(document.getElementById("a2")));
            });
        </script>
    </head>

    <body>
        <div class="hidden"><div><p class="hidden"><span class="hidden"><a id="a1" href="#">hello</a></span></p></div></div>
        <div><div><p><span><a id="a2" href="#">hello</a></span></p></div></div>
    </body> 
</html>

Get dimensions of element located in hidden parent

3 Answers3