87162

How to get the min-height of the object when its parent is set to display none?

Why I can't get the min-height of an object when its <strong>parent</strong> is set to display: none, but I still can it the object's height if the min-height is <strong>not</strong> in use?

For instance,

css,

li { display:none; } .object { display:block; width:100px; border:1px solid #000; }

html,

<li><a href="#" class="object" style="height:200px;"><img class="element" /></a></li> <li><a href="#" class="object" style="min-height:300px;"><img class="element" /></a></li>

jquery,

$(document).ready(function(){ $('.object img').each(function(){ alert($(this).parent().height()); }); });

jsfiddle

How can I still get the min-height of the object even though its parent is set to display none?

Answer1:

When an element isn't displayed, it has no height or width.

You can extract the CSS attribute, though:

alert($(this).parent().css('min-height'));

http://jsfiddle.net/R5SDY/1/

Note that this now returns a string with "px" at the end, instead of a number like height() does. You may need to parse it as an integer:

alert( parseInt($(this).parent().css('min-height'),10) );

Obviously if there's no min-height set in CSS, this won't work. Depending on what you want the number for, you may need to add some programmatic logic that extracts .css('height') if there's no min-height returned.

$(document).ready(function(){ $('.object img').each(function(){ var h = parseInt($(this).parent().css('min-height'),10) || parseInt($(this).parent().css('height'),10); alert(h); }); }); ​

http://jsfiddle.net/R5SDY/2/

Finally, remember that the values you're getting from .css aren't necessarily what the height will be when the element is finally displayed -- they're only what you want the height to be.

Answer2:

$('.object img').each(function(){ alert($(this).parent().css("min-height")); });

that is just to get the css attribute, a hidden object has no height or width, so you'll need to display it, get the measurments and hide it.

something like the following: http://jsfiddle.net/c2vrr/

please note that aslong as your DOM isn't 'huge' - it'll be instantanous, and you won't see the 'briefly displayed' elements.

Recommend

  • How to extract a number from a string [duplicate]
  • How to use the resource module to measure the running time of a function?
  • Python PIL to extract number from image
  • Google Places API - Find a company's CID and LRD
  • Outputting SharePoint Hyperlink Column as URL
  • Uncaught TypeError: $(…).select2 is not a function
  • Disable Kendo Autocomplete
  • Center align outputs in ipython notebook
  • Simulate click Geckofx vb,net
  • How to view images from protected folder with php?
  • Adjust width of select element according to selected option's width
  • Button click event not firing in jQuery
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Converting a WriteableBitmap image ToArray in UWP
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Jquery UI tool tip close icon
  • HTML download movie download link
  • Modifying destination and filename of gulp-svg-sprite
  • Change an a tag attribute in JavaScript based on screen width
  • Weird JavaScript statement, what does it mean?
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Unanticipated behavior
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Change div Background jquery
  • unknown Exception android
  • Django query for large number of relationships
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app