CODEWITHSUNDEEP
javascripthtmlcss
w00
w00

Reputation: 26802

Get height of div dependent on text inside

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?

Upvotes: 1

Views: 7769

Answers (6)

Ashwin Krishnamurthy
Ashwin Krishnamurthy

Reputation: 3758

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

Upvotes: 6

AlexMA
AlexMA

Reputation: 10214

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.

Upvotes: 0

vector
vector

Reputation: 7576

how about dropping the text in a off screen div first and getting the dimensions from that?

Upvotes: 0

maxedison
maxedison

Reputation: 17573

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.

Upvotes: 0

Alex
Alex

Reputation: 7374

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.

Upvotes: 0

Mike Gleason jr Couturier
Mike Gleason jr Couturier

Reputation: 9186

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

Upvotes: 1

Related Questions