ansaurus

Question

Answer 1

+1 A:

Maybe you could use a container around the content divs (with overflow hidden) and resize that one according to the height of the contents, thus achieving what you're trying to do?

nikc 2009-06-24 10:13:07

OK, but how would I go about animating the resize, thats the thing I really need to understand.

hfidgen 2009-06-24 14:11:45

Answer 2

A:

I agree with the answer above. You could apply the image as a background image to the container then animate the container. That way the background image will move down with the container (assuming you anchor it to the bottom that is!)

Nooshu 2009-06-24 13:16:57

Ah, I probably should have been more specific - I've put the code here showing an image, but sometimes it will need to be a flash file, so can't use the background: url() property.

hfidgen 2009-06-24 14:12:26

Answer 3

+2 A:

OK, I've just put together a very quick and dirty example.

Here's the HTML:

    <body>
        <a href="####" id="addContent">Add content</a>
        <div id="outerContainer">
            <div id="left" class="col">
                <p>Static content</p>
                <img src="images/innovation.gif" width="111px" height="20px">
            </div>
            <div id="right" class="col">
                <p>Ajax content</p>
            </div>
        </div>
    </body>

The jQuery used is here

    jQuery(function($){
    var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";

    $("#addContent").click(function(e){
        $("#right").append(addedHTML);
        var rightHeight = $("#right").height();

        //Animate the left column to this height
        $("#left").animate({
            height: rightHeight
        }, 1500);
    });});

And CSS:

    #outerContainer {
        border: 1px solid red;
        margin: 20px auto 0;
        overflow: hidden;
        width: 400px;}
    .col {
        float: left;
        width: 180px;
        display: inline;
        padding: 0 0 40px;}
    #left {
        border: 1px solid cyan;
        position: relative;}
    #left img {
        position: absolute;
        bottom: 0;
        left: 0;}
    #right {
        border: 1px solid green;}
    #addContent {
        text-align: center;
        width: 100px;
        margin: 20px auto 0;
        display: block;}

I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.

I hope this helps.

Nooshu 2009-06-24 15:17:43

you can provide a live demo to the OP by putting the code on http://jsbin.com and then linking to the saved public URL

Russ Cam 2009-06-24 15:19:10

Ah ok, thanks for the tip. That sounds much easier than what i did above :)

Nooshu 2009-06-24 15:54:14

Ok here is the jsbin version http://jsbin.com/uyoxi. I have attached an image to the bottom of the left column on my dev version, but you should see where the code is to edit that. phew!

Nooshu 2009-06-24 16:04:44

Thats quality! Thank you very much :)

hfidgen 2009-06-25 08:21:39

ansaurus

tags:

views:

answers:

JavaScript animate resizing div

related questions