Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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> 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers