Animate height of dynamic div

Question

I'd like to make the height of a div animate depending on the dynamic ad that is served inside.

<div>
    // Dynamic Content
</div>

The div has a minimum height of 90px, however if the ad served into the div has a height of 300px, I want the div to animate (css3 transition preferably) to the new height of 300px.

Is this possible?

At the moment the div just jumps to the new height, and the main content of the page jumps down with it. I'd just like this to be a smooth transition.

What is the problem you are having? According to what you have told,it looks fine. Please show what you have tried so far. — Ravi Shankar Bharti, Aug 11 '16 at 05:37
So at the moment the div is jumping to the new height, I want the transition from 90px to 300px height to be smooth. All I've tried so far is adding 'transition:height .5s;' to the div — , Aug 11 '16 at 05:39

score 1 · Answer 1 · edited May 23 '17 at 12:32

1

You should use max-height instead of min-height. Use max-height value t something your height will never reach, or if you want to strict hieght to some value.

And use transition with max-height and ease-in.

See JSFiddle provided in another answer by Chris Jordan.

<div class="imagediv">
    // Dynamic Content
</div>
//CSS
#imageDiv {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}

edited May 23 '17 at 12:32

Community

1
1

answered Aug 11 '16 at 05:46

Ravi Shankar Bharti

8,922
5
28
52

This solution works if there is a :hover involved in the process, but if you just want the div to have transitional properties without hovering it does not work. – Aug 11 '16 at 05:57
It is just a way how you can achieve your result. you need not copy the same code. It was just to give you an idea of how you can achieve what you want. – Ravi Shankar Bharti Aug 11 '16 at 07:04
This is exactly what I want to happen, except I want the transition to happen when a bigger ad unit loads, not when I hover. So is that possible? – Aug 11 '16 at 23:36

score 0 · Answer 2 · answered Aug 11 '16 at 05:40

0

You try:

 div{
   height:auto
 }

answered Aug 11 '16 at 05:40

Văn Tuấn Phạm

657
4
10

Yes the div has height auto on it - the div is expanding to 300px fine - it's the transition to the new 300px height that I want to improve. – Aug 11 '16 at 05:42

score 0 · Answer 3 · answered Aug 11 '16 at 05:45

Create a new div dynamically with default display:none property. Append the ad to this new div and then append the new div to your original div. And you can show the new div with effect. Have a look below

$('button').click(function(){
   $('.content').append('<div id="new" style="display:none;">1<br>1<br>3<br>4<br>1<br>3<br>4<br>1<br>3<br>4</div>');
  $('#new').show(1000);
});

.content{
  min-height:90px;
  border:1px solid #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content"></div>
<button type="button">Click</button>

thepio · Accepted Answer · 2016-08-11T10:34:56.010

If you can catch the "ad loaded" event and add a class to your div accordingly you can try setting the max-height of the div instead of height.

function addElement() {

  var initialDiv = document.getElementsByClassName('yourDiv')[0];
  var newdiv = document.createElement('div');

  newdiv.setAttribute('style','height: 300px;');
  initialDiv.classList.add('loaded');

  newdiv.innerHTML = '<img src="http://placehold.it/300x300"/>';

  initialDiv.appendChild(newdiv);

}

setTimeout(function(){ 
 addElement();
}, 1000);

.yourDiv {
  min-height: 90px;
  width: 300px;
  background-color: grey;
  max-height: 90px;
  transition: max-height 500ms ease-in;
  overflow: hidden;
}

.yourDiv.loaded {
  max-height: 300px;
  transition: max-height 500ms ease-in;
}

<div class="yourDiv">

</div>

You can set the max-height to 300px or more, it doesn't really matter.

EDIT:

Based on your comment. There actually is an event you can listen to in GPT. You can simply add it when pushing the ads like this:

googletag.pubads().addEventListener('slotRenderEnded', function(event) {
  // slot has been rendered - do stuff
});

Now I'm not sure how you've done yours but I think you can implement this easily to your existing code.

A working example: https://jsfiddle.net/thepio/7tfdxw8f/

I'm dealing with DFP GPT in particular - do you know of the event I can use to do something like this? — , Aug 11 '16 at 05:59
I updated my answer with something that is hopefully useful to you. — thepio, Aug 11 '16 at 10:35
Awesome - the updated answer (with specific reference to GPT) is working exactly as I want. It uses CSS3 transitions and has minimal JS overhead. It might not work for everyone, but it's perfect for my situation. — , Aug 12 '16 at 00:42

Animate height of dynamic div

4 Answers4