Develop Reference

How to get height of a div tag if html is dynamically inserted?

I have a div tag on my page.
<div id="filterDropdowns"></div>
I made html markup in my javascript and then inserted into div.
var markup = "";
markup = //Here makup is created through some logic.
$("#filterDropdowns").html(markup); //Inserted html
Everything is working fine.After this, when i trying to get the height of "filterdropdown", it's always 0. I have tried many ways to get the height but i am unable to get the height. I have tried jquery method like innerheight,outerHeight and javascript method as well but it always zero. How i can get the height?

try this for get height via jQuery :
alert($("#filterDropdowns").find("div").height());

height: auto; wont work. The div created by your logic, add height:inherit; to that div and also give a constant height to you #filterDropdowns It needs a height. If parent is 0 the child cannot inherit the height. So either specify a height in your div created your logic or inherit the parents height.

This code will give you the height:
$("#filterDropdowns").height()
Simple as that. No matter how the content was inserted. Dynamically or not.
However, please consider the following:
1) Make sure you check the height of the element really after you had already inserted its content. If you check the height before adding the content then, well, an empty element's height is most likely 0 (unless it is styled somehow).
2) Make sure the element is visible at the time you are checking the height, otherwise the result of the height method might be at least inaccurate.
3) If the contents of the element is positioned absolutely or floating then the height of the element will actually remain 0.

<div id="filterDropdowns" style="height:auto"></div>
try this

Try to this solution
var currentHeight = 0;
$(window).load(function() {
currentHeight = $('#filterDropdowns').outerHeight();
console.log("set current height on load = " + currentHeight)
});

Try this
html:
<div id="filterDropdowns" style="display:inline-block;height:auto"></div>
js:
$("#filterDropdowns").height()

Try jquery's .attr() function.
then, Write $('#filterDropdowns').attr('height','yourvalue');

How to change the width/height element, which has settings in subclass

I've a trouble with the style of nav element in my web application.
As you're able to see, if to focus on element nav#menu.horizontal-menu - I can see the actual width/height of that element in Chrome.
BUT! When I try to obtain that element in JavaScript by the id - menu (as you can see the tag declaration of nav tag in the bottom part of screen):
There is no both width or height values of it...
I rather understand, that it may be because of:
`nav#menu.horizontal-menu` != `nav`
But, it's only my suggestion... I've tried then to use both functions:
getElementsByClassName()
querySelector()
But... also no success as you can see in screens, what's wrong and how to get so needed actual width and height options from element?
Thanks!

I think you are looking for this answer:
How do I retrieve an HTML element's actual width and height?
.style.width only checks what is filled in in the style attribute of the element. OffsetWidth would probably work...

That's because there are no width and height styles defined for it.
To calculate the rendered width and height, use a.offsetWidth and a.offsetHeight. Those are the values that DevTools are showing on hover.

Have you tried:
var width = document.getElementById('foo').offsetWidth;
var height = document.getElementById('foo').offsetHeight;
For cross-browser compatibility I'm recommending you to use jQuery

Is it possible to use jQuery to find height of a span of text with an undefined height?

I have a <span> of text that isn't defined by height. The text inside is inserted dynamically and varies from each instance of this span to the other. Is there any way to use jQuery to find the height of this span?
Here's what I've tried:
parseInt($('span.tag_title', container).outerHeight(true), 10)
But that doesn't return anything unless I define the span in CSS?
Anyone know how to fix this?

seems to work... you don't need to parse the value though. outerHeight returns an int. Here's a demo: http://jsfiddle.net/V6Gx6/show
Just resize the window.

Not including whitespace when detecting text width with `<span>` trick

I have implemented a jQuery pluggin to correct the width of <input/> elements depending on how much text they have, as shown:
$.fn.correctWidth = function () {
var tempSpan = $('<span>')
.html(this.val())
.css('font-size', this.css('font-size'))
.insertBefore(this);
this.width(tempSpan.width());
tempSpan.remove();
return this;
};
The problem is that, sometimes, the <span> element's width is much larger than the actual text width.
It seems that this occasional problem is because the detected width includes the whitespace between the end of the text and the end of the line.
How can I make sure that the whitespace is not included? Is there an alternative approach?

Try to change
this.width(tempSpan.width());
To
this.width(tempSpan.innerWidth());

You better set also the same font-family(the width of font usually differs).
Furthermore you should use
$('<pre style="display:inline;"/>')
...instead of the span.
Repeated whitespaces will be ignored in a span, but not in a text-input(and not inside pre)

Finding width of text in Javascript [duplicate]

This question already has answers here:
Calculate text width with JavaScript
(29 answers)
Closed 10 years ago.
Is there a way to find the width of text in Javascript (jQuery is used, so happy to take advantage of any functions they provide) for a hidden element?
I want to have a graph of nodes. Each node has text inside and I want the nodes to have a width that accommodates the text up to a limit. So I essentially create hidden <div>'s with some html inside. Then I use jQuery to display those <div>'s on the graph at the right spots. It's important that I know the correct width ahead of time so I can construct the graph properly.
UPDATE: Just to clarify, I need to know how wide some text is while it's hidden. Blender gave an answer below, I'm hoping there's a less tricky way?

What width do you mean? If you mean the <div> element's width, there's a handy function which does just what you need. Play with some of these:
$('#foo').width();
$('#foo').innerWidth();
$('#foo').outerWidth();
As for finding the width of a hidden element, I usually do this dirty trick:
var zIndex = $('#foo').css('z-index');
$('#foo').css('z-index', '-10');
$('#foo').css('position', 'absolute');
$('#foo').css('display', 'block');
var fooWidth = $('#foo').width();
$('#foo').css('display', 'none');
$('#foo').css('z-index', zIndex);
There must be a simpler way, though...

$('#txt').width()
http://jsfiddle.net/Detect/jk97D/

You can set the style of the divs to have no wrap white-space:nowrap (so, text is in one line) then get the width of each div, if more than the limit, set it to the limit and set the style to allow text wrapping `white-space:normal

Just throwing in a non-JQuery answer to this. Assume I have a work div with id myworkerdiv and i have put my text in already.
var myDiv document.getElementById('myworkerdiv'),
width = myDiv.clientWidth || myDiv.scrollWidth;
You can also find out height as well, if your so included (clientHeight || scrollHeight).

You could use something similar blender's method, but use the visibility css property rather than display. Visibility:hidden; keeps placement of the element, but just makes it invisible.