jQuery Get height of hidden element in jQuery

Question

I need to get height of an element that is within a div that is hidden  Right now I show the div  get the height  and hide the parent div  This seems a bit silly  Is there a better way   I m using jQuery 1 4 2    select show    optionHeight    firstOption height      we can only get height if its visible  select hide

User · Answer

You are confuising two CSS styles  the display style and the visibility style   If the element is hidden by setting the visibility css style  then you should be able to get the height regardless of whether or not the element is visible or not as the element still takes space on the page   If the element is hidden by changing the display css style to  none   then the element doesn t take space on the page  and you will have to give it a display style which will cause the element to render in some space  at which point  you can get the height

User · Answer

Following Nick Craver s solution  setting the element s visibility allows it to get accurate dimensions  I ve used this solution very very often  However  having to reset the styles manually  I ve come to find this cumbersome  given that modifying the element s initial positioning display in my css through development  I often forget to update the related javascript code  The following code doesn t reset the styles per say  but removes the inline styles added by javascript       myDiv    css       position     absolute       visibility   hidden       display      block       optionHeight       myDiv   height    optionWidth       myDiv   width         myDiv   attr  style          The only assumption here is that there can t be other inline styles or else they will be removed aswell  The benefit here  however  is that the element s styles are returned to what they were in the css stylesheet  As a consequence  you can write this up as a function where an element is passed through  and a height or width is returned   Another issue I ve found of setting the styles inline via js is that when dealing with transitions through css3  you become forced to adapt your style rules  weights to be stronger than an inline style  which can be frustrating sometimes

User · Answer

I ve actually resorted to a bit of trickery to deal with this at times   I developed a jQuery scrollbar widget where I encountered the problem that I don t know ahead of time if the scrollable content is a part of a hidden piece of markup or not   Here s what I did      try to grab the height of the elem if  this element height    gt  0        var scroller height   this element height        var scroller width   this element width        if height is zero  then we re dealing with a hidden element   else       var copied elem   this element clone                          attr  id   false                         css  visibility  hidden   display  block                                   position  absolute            body   append copied elem       var scroller height   copied elem height        var scroller width   copied elem width        copied elem remove        This works for the most part  but there s an obvious problem that can potentially come up   If the content you are cloning is styled with CSS that includes references to parent markup in their rules  the cloned content will not contain the appropriate styling  and will likely have slightly different measurements   To get around this  you can make sure that the markup you are cloning has CSS rules applied to it that do not include references to parent markup   Also  this didn t come up for me with my scroller widget  but to get the appropriate height of the cloned element  you ll need to set the width to the same width of the parent element   In my case  a CSS width was always applied to the actual element  so I didn t have to worry about this  however  if the element doesn t have a width applied to it  you may need to do some kind of recursive traversal of the element s DOM ancestry to find the appropriate parent element s width

User · Answer

Building further on Nick s answer       myDiv   css   position   absolute   visibility   hidden    display   block     optionHeight       myDiv   height        myDiv   css   position   static   visibility   visible    display   none       I found it s better to do this       myDiv   css   position   absolute   visibility   hidden    display   block     optionHeight       myDiv   height        myDiv   removeAttr  style      Setting CSS attributes will insert them inline  which will overwrite any other attributes you have in your CSS file  By removing the style attribute on the HTML element  everything is back to normal and still hidden  since it was hidden in the first place

User · Answer

Here s a script I wrote to handle all of jQuery s dimension methods for hidden elements  even descendants of hidden parents  Note that  of course  there s a performance hit using this      Correctly calculate dimensions of hidden elements  function          var originals               keys                  width                height                innerWidth                innerHeight                outerWidth                outerHeight                offset                scrollTop                scrollLeft                     isVisible   function el                el     el               el data  hidden                     var visible   true                  parents   el parents                    hiddenData   el data  hidden                 if  el is   visible                      visible   false                  hiddenData hiddenData length    el                             parents each function i  parent                    parent     parent                   if  parent is   visible                          visible   false                      hiddenData hiddenData length    parent                                                return visible                    each keys  function i  dimension            originals dimension      fn dimension              fn dimension    function size                var el     this 0                 if                                        size     undefined  amp  amp                                                  dimension     outerHeight                                  dimension     outerWidth    amp  amp                           size     true    size     false                                                             isVisible el                                  return originals dimension  call this  size                              var hiddenData   el data  hidden                    topHidden   hiddenData hiddenData length - 1                   topHiddenClone   topHidden clone true                   topHiddenDescendants   topHidden find      andSelf                    topHiddenCloneDescendants   topHiddenClone find      andSelf                    elIndex   topHiddenDescendants index el 0                    clone   topHiddenCloneDescendants elIndex                   ret                 each hiddenData  function i  hidden                    var index   topHiddenDescendants index hidden                     topHiddenCloneDescendants index   show                                topHidden before topHiddenClone                if dimension     outerHeight     dimension     outerWidth                     ret     clone  dimension  size   true   false                 else                   ret     clone  dimension                                topHiddenClone remove                return ret                        jQuery

User · Answer

I try to find working function for hidden element but I realize that CSS is much complex than everyone think  There are a lot of new layout techniques in CSS3 that might not work for all previous answers like flexible box  grid  column or even element inside complex parent element   flexibox example   I think the only sustainable  amp  simple solution is real-time rendering  At that time  browser should give you that correct element size    Sadly  JavaScript does not provide any direct event to notify when element is showed or hidden  However  I create some function based on DOM Attribute Modified API that will execute callback function when visibility of element is changed       selector    onVisibleChanged function e  isVisible        var realWidth       selector    width        var realHeight       selector    height            render or adjust something       For more information  Please visit at my project GitHub   https   github com Soul-Master visible event js  demo  http   jsbin com ETiGIre 7

User · Answer

If you ve already displayed the element on the page previously  you can simply take the height directly from the DOM element  reachable in jQuery with  get 0    since it is set even when the element is hidden       hidden-element   get 0  height    same for the width       hidden-element   get 0  width     thanks to Skeets O Reilly for correction

User · Answer

I ran into the same problem with getting hidden element width  so I wrote this plugin call jQuery Actual to fix it  Instead of using     some-element   height     use     some-element   actual  height     will give you the right value for hidden element or element has a hidden parent  Full documentation please see here  There is also a demo include in the page  Hope this help

User · Answer

Building further on user Nick s answer and user hitautodestruct s plugin on JSBin  I ve created a similar jQuery plugin which retrieves both width and height and returns an object containing these values   It can be found here  http   jsbin com ikogez 3   Update  I ve completely redesigned this tiny little plugin as it turned out that the previous version  mentioned above  wasn t really usable in real life environments where a lot of DOM manipulation was happening    This is working perfectly          getSize plugin    This plugin can be used to get the width and height from hidden elements in the DOM     It can be used on a jQuery element and will retun an object containing the width    and height of that element        Discussed at StackOverflow     http   stackoverflow com a 8839261 1146033        author Robin van Baalen  lt robin neverwoods com gt      version 1 1        CHANGELOG     1 0 - Initial release     1 1 - Completely revamped internal logic to be compatible with javascript-intense environments        return  object  The returned object is a native javascript object                      not jQuery  and therefore not chainable    that                     contains the width and height of the given element        fn getSize   function             var  wrap       lt div   gt    appendTo    body          wrap css            position      absolute  important            visibility    hidden  important            display       block  important                clone     this  clone   appendTo  wrap        sizes              width    clone width             height    clone height                wrap remove         return sizes

User · Answer

You could also position the hidden div off the screen with a negative margin rather than using display none  much like a the text indent image replacement technique   eg   position absolute  left   -2000px  top  0    This way the height   is still available

User · Answer

By definition  an element only has height if it s visible   Just curious  why do you need the height of a hidden element   One alternative is to effectively hide an element by putting it behind  using z-index  an overlay of some kind

User · Answer

In my circumstance I also had a hidden element stopping me from getting the height value  but it wasn t the element itself but rather one of it s parents    so I just put in a check for one of my plugins to see if it s hidden  else find the closest hidden element  Here s an example   var  content       content        contentHeight    content height        contentWidth    content width         closestHidden      styleAttrValue      limit   20    failsafe  if   contentHeight         closestHidden    content        if the main element itself isn t hidden then roll through the parents     if   closestHidden css  display        none              while   closestHidden css  display        none   amp  amp   closestHidden size    amp  amp  limit                 closestHidden    closestHidden parent   closest   hidden                limit--                      styleAttrValue    closestHidden attr  style         closestHidden css           position     absolute           visibility   hidden           display      block              contentHeight    content height        contentWidth    content width         if  styleAttrValue             closestHidden attr  style  styleAttrValue         else            closestHidden removeAttr  style              In fact  this is an amalgamation of Nick  Gregory and Eyelidlessness s responses to give you the use of Gregory s improved method  but utilises both methods in case there is supposed to be something in the style attribute that you want to put back  and looks for a parent element   My only gripe with my solution is that the loop through the parents isn t entirely efficient

User · Answer

You could do something like this  a bit hacky though  forget position if it s already absolute   var previousCss        myDiv   attr  style         myDiv   css       position     absolute      Optional if  myDiv is already absolute     visibility   hidden       display      block       optionHeight       myDiv   height         myDiv   attr  style   previousCss   previousCss

User · Answer

One workaround is to create a parent div outside the element you want to get the height of  apply a height of  0  and hide any overflow  Next  take the height of the child element and remove the overflow property of the parent    x000D   x000D  var height       child   height    x000D     Do something here x000D      parent   append height  removeClass  overflow-y-hidden    x000D   overflow-y-hidden   x000D    height  0px  x000D    overflow-y  hidden  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  parent  class  overflow-y-hidden  gt  x000D     lt div id  child  gt  x000D      This is some content I would like to get the height of  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] jQuery: Get height of hidden element in jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css