I have a div called .A coded as height:auto that has a height rendered based on the text contained within. I have another div on the page called .B that I need to animate down using jQuery based on the height of the first div, .A.
I have attempted using the following jQuery function, without much luck. The idea was to have jQuery ascertain the height of .B then apply a padding to .B, however it is not grabbing the correct height. I have also tried using 'marginTop'
jQuery('div.A').animate({'paddingTop': jQuery('div.B').height()},500);
Desparate for help! Will pay with up-votes and generous compliments.
I think you need .outerHeight(true):
jQuery('div.A').animate({ paddingTop : jQuery('div.B').outerHeight(true)},500);
Description for .outerHeight() from docs
Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns an integer (without "px") representation of the value or null if called on an empty set of elements.
Note:
The top and bottom padding and border are always included in the .outerHeight() calculation; if the includeMargin argument is set to true, the margin (top and bottom) is also included.
Related
I have a problem getting the width of a div's content (of the content, not the div itself).
The usual approach would be Javascript's scrollWidth property, I think.
The problem: within this div, another div is positioned absolute and has a negative right value (-350px). I can't change this (it's a menu, sliding in when you click a button, overlapping other elements. It needs to be positioned like that).
The scrollWidth returns the width of the outer div's content PLUS the negative right-value (in Chrome, didn't test other browsers).
Here's a short example:
/* ... */
http://jsfiddle.net/R4Cs5/12/
But I need the content's width that is accessible by scrollbars.
Any ideas?
Please use Jquery, no plain Javascript.
Thanks in advance.
I see that your jsfiddle doesn't import any jQuery library, while you wanted to use it. Anyway, with jQuery you can use .width to get an element's width see here: jsfiddle.
I have a div where it nest text, images that is changed more often and so the height of the div changes accordingly..
I need to get the height of div.
I have tried the jquery $("div#ID").height(); but it always returns a value smaller than the actual height, any help please?
May be you should try,
$("#divID").outerHeight();
$("#divID").outerHeight(true); //includes margin of element
JS Fiddle: http://jsfiddle.net/meYnS/3/
Lets say I have an element .outer with 100px width and position:relative;. It has an inner element which has position:absolute; and left:95px;. I.e. the child element exceeds the width of the parent element.
Now, in JQUery, if I try to get the width of the parent using $('.outer').outerWidth(); it return 100.
But how can I get the full width of the outer element (which is obviously greater than 100, because of the absolutely positioned child element)?
Is there a built-in way or do I have to do a manual calculation (i.e. adding each child width to parent width to figure out the full width)?
You can use the properties scrollWidth, scrollHeight.
If you are using jQuery,
$('.outer').get(0).scrollWidth
You've set the width at 100px and the child element is positioned absolute, so it will not affect the width of the its parent. The parent's width is still truly 100px.
jQuery does not provide an access to the javascript property scrollWidth, so you have to access a DOM element using jQuery.
jQuery.get() is a method for you to achieve a DOM element.
therefore, the solution using jQuery is $('.outer').get(0).scrollWidth
If you use origin javascript, the solution would be document.getElementsByClassName('outer')[0].scrollWidth
I have a DIV with some text inside. But the height of the DIV starts at 0px, it also has an 'overflow:hidden'. After that i'm using an animation system to increase the height of the DIV. But i can't give the DIV a fixed height because the length of the text inside the DIV varies.
Is there a way to tell what the height of the DIV will be when its big enough to fit all content inside it?
I have done a horrible hack but see if this is good enough.
Basically you get the content height by setting the height to auto, then resetting it to zero and finally using your animation function, like this :
var tempHeight = $(".sample").css({"height" : "auto"}).height();
$(".sample").css({"height" : "0px"}).animate({
height : tempHeight
},1000);
Where .sample is the reference to the div with the variable text content. Check out the demo for a better understanding.
Pure Javascript Version :
document.getElementById("sample").style.height = "auto"; //The id of this div is 'sample'
var tempheight = document.getElementById("sample").offsetHeight;
document.getElementById("sample").style.height = "0px";
/*
Custom Animation function, Use tempheight to get the full content
*/
DEMO For The Jquery Version
Maybe you can try this:
Put the text inside another DIV like...
<div>
<div>some text</div>
</div>
Then animate the outer div (which as an hidden overflow) according to the height of the inner div (which has not an hidden overflow).
Hope this helps
Depending on what you're doing/using you don't need to know the height because setting it to "auto" will ensure it expands to fill the content.
However, you could also not set the heights to 0 until you know the height by using javascript to get it. For example in jQuery:
$("div").each(function()
{
$(this).attr("data-height", $(this).height()).css({"height": "0", "overflow": "hidden");
});
Now each div has an attribute called "data-height" that has the value of it's original height. You can then use this to expand the div when you need to.
Just before animating the showing of the div, clone the div and get rid of the height:0px constraint (change the height to auto, for example). Then grab the height of that cloned div for use in your animation.
In jQuery, this would look something like:
var myDiv = $('div');
var myDivClone = div.clone().insertAfter(myDiv).css('height','auto');
var myDivHeight = myDivClone.outerHeight();
myDivClone.remove();
myDiv.animate({height: myDivHeight}, 250);
Note the importance of actually cloning the element in question as opposed to just creating a new one and filling it with the same contents. You need to recreate the element exactly (other than the height modification you do afterwards), including classes, etc.
ALSO note the importance of injecting it into the DOM immediately after myDiv. This is so that the same CSS will affect it as affects myDiv at time of height calculation. The only potential exception to this is if you're using a :last-child selector in your CSS, and the clone ends up becoming the last child of the parent element. But that kind of issue should be easy enough to get around.
how about dropping the text in a off screen div first and getting the dimensions from that?
if(el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth)
{
//keep making element bigger
el.style.height = parseInt(el.style.height) + 2 + "px"
}
You could stick this snippet inside some sort of recursive function or while loop. Essentially you are checking to see if there is more content outside of the viewable area that a scroll-bar would show.
Scenario: You have a div with some text, this div has no css width, no jquery width, no width attribute assigned to it in any way. However it has a width due to the content that is inside it, this is undefined, reports as "null" in jQuery. My question is: is there any way to retireve the width of this div?
$(element).width() should give you the actual width. With $(element).outerWidth(includeMargin) you can even get the width including padding, border, and, if desired, the margin.
with jquery you can do below
$('#id').width()