Have you noticed that by using jquery's slideDown(), even on elements with dynamic content, you always get the perfect height of the effected element. Which is, for me at least, impossible to do by simply animating the css height value. Mostly because there is no way for me to know how did the height of an element (with a display:none) changed, during a dynamic content (AJAX) update.
And since i've been working on some custom controls, i do need that capability to calculate things the way slideDown() does.
If you are inserting a new dinamically loaded content, it means you have that element in memory, so you can refer to it and know its height. You only have to read its height (or maybe outerHeight) and slide by that amount.
EDIT
Just give a height of 0 to the hiden item and overflow:hidden, so that the content inside it won't be sohwn, and it will retain its height.
http://jsfiddle.net/jgyLm/9/
You can try this after appending the dynamic content to the element.
$(element).height();
$(element).outerHeight();//if you need margin to be included pass true to outerHeight method
Related
How do I get the height of the following statement - angular.element('content') ?
I don't want to place it on the DOM, just get the height. Can I do this?
If I have to place it on the DOM first, how would I then get it?
I don't want to place it on the DOM, just get the height.
You see, this is a thing, we can't talk about height of the content independently of DOM, because what gives text a dimensions is the fact that it is a part of DOM, with some styles applied, being affected by other elements maybe, etc.
So if you need to get a height of the text you need to do following:
create empty element, e.g. div and append text content in it:
var div = angular.element('<div>content</div>');
append this element into DOM, probably setting styles which makes it "invisible"
div[0].style.cssText = 'position: absolute; top: -1000px;';
document.body.appendChild(div[0]);
calculate height
var height = div[0].offsetHeight;
remove element if you don't need it anymore.
document.body.removeChild(div[0]);
angular.element is just an alias for the jQuery function. So to answer your question, no, you cannot get the height of an element without placing it in the DOM. You can't even get the height of an element, if you add it to the DOM but don't show it.
If you want to get the height of an element, you can simply add it to the DOM, get the height and remove it again. This proccess happens so fast users won't notice it.
I just need to get the height of the content of an object tag when assuming the object is a webpage(on the same site.)
I appreciate any help in advance.
Thanks guys! I know there's a way to do it.
EDIT
<object id="blogs-and-stuff" data="blog/index.php" class="blog-stuff" type="text/html" style="width:900px; margin-left:50%;">
I want the height of index.php in the preceeding, not the height of ".blog-stuff".
$(".blog-stuff").height() //does not return what I need.
EDIT EDIT
Im trying to grab the height of the webpage inside the object tag and apply it to the object tag. This would increase the size of the object to show the entire webpage its holding rather than using scroll bars. Overflow is not working as planned.
This screen shot shows only the object with the webpage in it
Sorry for the confusion guys.
Access the content of Object
The real challenge seem to be how to access the content of the Object element. The solution I found is to use the contentDocument property of the object element. I put together a small test case where you log the height of the object content.
document.getElementById("object_id").contentDocument.body
Make sure the object content is loaded before you try and access its height.
<object id="test" data="test.html" ></object>
<button id="button">Log height</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#button").click(function() {
console.log(document.getElementById("test").contentDocument.body.getBoundingClientRect().height)
});
</script>
However, you will run into problem if try to load an external URL in your object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript
Then there are a few different methods that will get the height of an HTML element.
Pure JavaScript options:
element.style.height
document.getElementById("input_id_here").style.height;
Description:
The height CSS property specifies the height of the content area of an
element. The content area is inside the padding, border, and margin of
the element.
https://developer.mozilla.org/en-US/docs/Web/CSS/height
element.getBoundingClientRect().height
element.getBoundingClientRect().height
Description:
Returns a text rectangle object that encloses a group of text
rectangles.
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
element.clientHeight
element.clientHeight;
Description:
Returns the inner height of an element in pixels, including padding
but not the horizontal scrollbar height, border, or margin.
clientHeight can be calculated as CSS height + CSS padding - height of
horizontal scrollbar (if present).
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
HTMLelement.offsetHeight
document.getElementById("input_id_here").offsetHeight;
Description:
Height of an element relative to the element's offsetParent.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
jQuery options
*height("input_selector_here")*
$("input_selector_here").height()
Description:
Get the current computed height for the first element in
the set of matched elements.
https://api.jquery.com/height/
outerHeight()
$("input_selector_here").outerHeight()
Description:
Get the current computed height for the first element in
the set of matched elements, including padding, border, and optionally
margin. Returns a number (without "px") representation of the value or
null if called on an empty set of elements.
https://api.jquery.com/outerHeight/
innerHeight()
$("input_selector_here").innerHeight()
Description:
Get the current computed height for the first element in
the set of matched elements, including padding but not border.
https://api.jquery.com/innerHeight/
I do not like jQuery so my answer will use native javascript....
document.getElementById('your-object-id').getBoundingClientRect().height;
document.getElementsById("object").style.height
This should be the fastest solution, as it does not rely on an extra function call like the other jQuery solutions.
I'm trying to get the height of an initially hidden div element in Netscape and Firefox using javascript (it works fine in IE). I have tried using MyElement.scrollHeight, MyElement.offetHeight, MyElement.style.height and many different ways of setting the element initially visible, getting the height and then hiding it again. I keep getting a value of 0. Any thoughts?
Correct me if I'm wrong (Which I may be), but from doing some research, elements with display: none have no height.
To get the height, you would need to unhide them, get the height, then rehide them. Issues like this have popped up in the past like so:
jQuery: height()/width() and "display:none"
jQuery: Get height of hidden element in jQuery
(Both jQuery examples, but you get the point)
Hidden elements in Netscape is not accessible.
you can set that position with styling hole of div out of your screen. for example move it to -9999 on top left. then you can access that's attributes like height and width.
you can also visible that element and get your attribute and hide it again, but it is not usual because your element will be show a little bit of the second and user maybe feel jumping on screen.
you should position it by setting style to "absolute" and "top" to -9999px or more (depend of your project height) and then get your element height and width with DOM and anythings that you want ...
Consider:
$("#PlotPlace").append('<div style="position:absolute;left:200px;top:40px;font-size:smaller">Hello world!</div>');
I need to execute that line only if the width of the resultant text would be less than 60px. How can I check the width before placing the object?
Unfortunately, the div will only have a width value once it is rendered into the DOM.
I would append that content to an inconspicuous area of the document, perhaps even absolutely positioned so that no flow disruption occurs, and make sure that it is set to "visibility:hidden". That way it will be inserted into the DOM and be rendered, but be invisible to the viewer.
You can then check the width on it, and move it into position and set it to "visibility:visible" at that point. Otherwise, you can remove it from the document.
Maybe you can append it invisible, then check it's width, and then consider to show or hide.
$("#PlotPlace").append('<div style="position:absolute;left:9001px;top:40px;font-size:smaller">Hello world!</div>');
var div = $('#PlotPlace').children("div");
if(div.width() < 60)
div.css({left:200})
Sounds like something you'd have to hack. I don't believe the JavaScript runtime in any browser has an event you can hook into in between calculating the layout and displaying the element, so you can add it in a way that it can't be seen and doesn't affect the height (doesn't cause additional scrolling), and then show/hide it based on the width at this point. It's hacky and ugly, but because you don't have many event hooks it might be the only way to do it.
You can´t. At least not so easy. The text you insert is written in a specific font, which must be rendered by the browser, then you know the width of the element. By the Way, what exactly do you want to insert, with such a restriction? Wouldn´t it be simpler to cut the text within the output parameters?
I am currently trying to modify a Javascript function that "slides in" a <div>. The script as it is requires you to define the height of the div, so it is mostly useless in dynamically filled <div>s. I found some text on the clientHeight property in javascript, but it would appear that it doesn't support <div>s with display set to none (which is the method used to slide the div in). That makes sense, as the height of that div in the client window is nothing.
Basically I was wondering what other methods you all know of, or if there's a way to get around the clientHeight = 0 when display: none.
Thanks!
Oh, and here's the function I'm using:
function getDivHeight(objName) {
return boxHeight = document.getElementById(objName).clientHeight;
}
A simple solution is to set it's visibility to "hidden" and it's display to "block" and measure it. However, some modern browsers will manage to update the page layout during this short time and you will get a nasty flicker. The easiest way to overcome this is to place the element in an absolutely positioned container with overflow set to "hidden".
I've had luck cloning the element, moving it offscreen, then displaying it to get the client height:
var original = document.getElementById(some_id);
var new_item = original.cloneNode(true);
document.body.appendChild(new_item); // item already hidden, so it won't show yet.
// you may wish to validate it is hidden first
new_item.style.position = "absolute";
new_item.style.left = "-1000px";
new_item.style.display = "block";
var height = new_item.clientHeight;
EDIT: Looking through the jQuery code, they do exactly what Tsvetomir Tsonev suggests. jQuery temporarily sets the style to "display: block; position: absolute; visibility: none", and then measures the height, swapping the properties back after the measurement.
So, it looks like you're stuck with having to do something hackish, whether it's cloning the node or risking having it flicker in some browsers... I like Tsvetomir's suggestion better than my initial hack as it, at least, doesn't involve cloning a node into the DOM that you don't need. Either way, the element must not be set to "display: none" in order to measure it's height. Isn't the DOM wonderful? :-)
EDIT 2: Also worth noting that, after jQuery gathers the height, it adds allowances for padding, margin and border sizes, so you may need to as well.
Yes, an element that is not displayed on the page has no dimensions.
It kind of makes sense. Consider an element that has been created and filled with a bunch of text, but not yet added to the document tree. How high is it? Depends on font-size. How big is font-size? Depends where in the document that div is inserted; its parent font-size would inherit through.
Similarly for an element with “display: none”. It's not rendered, so it has no dimensions. Couldn't we ask “how high would this be if it were ‘display: block’”? Turns out no, because if it were displayed, that in itself could change the dimensions of its parent block, and then the dimension of displayed elements would be inconsistent with the dimensions of non-displayed elements!
The typical solution is to unset “display: none”, measure the height of the element, and then immediately re-set “display: none”. The browser won't redraw in the middle of a bit of JavaScript, so you won't see a flicker on the page.
I nkow you guys solved this a long time ago but I thought I should share this since it quite tricky to get the height of a hidden div tag.
heres what I did after reading your post,
I placed the div i want to slide inside a 1px height div with overflow set to hidden.
you dont even need to set the display of the inner div to none since it is already there and if you use offsetHeight it should return the proper height for all browsers and you can use that height to slide your div up an down.
PEACE!!!
In IE you could try scrollHeight, but I'm not sure if it will work or if it is cross browser.