javascript animate height while get new content

javascript animate height while get new content

By : crv
Date : November 19 2020, 12:41 AM
To fix this issue It's a tricky to animate to unknown height. I would try to make use of the combination of CSS transition and javascript helper function to calculate new width.
Of course you can still go with just animate but you will still need to calculate new height and animate to new height.
code :
var content = "content1<br/>content2<br/>";

var height = getHeight(content);
$("#detail").css('max-height', height).html(content);

setTimeout(function() {
    content += 'content3<br/>';
    var height = getHeight(content);
    $("#detail").css('max-height', height).html(content);
}, 1000);

function getHeight(str) {
    var $tmp = $("<div>").html(content).css({position: 'absolute', top: -1000}).appendTo('body'),
        height = $tmp.height() + 10 + 'px';
    return height;
#detail {
    background: #EEE;
    overflow: hidden;
    max-height: 0;
    transition: max-height 1s ease;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="detail"></div>

Share : facebook icon twitter icon
jquery - animate height to the new content's height

jquery - animate height to the new content's height

By : user2308859
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , jQuery can only animate numbers, but you're setting the style height to auto then you're trying to animate it to an integer, and jQuery doesn't know how to animate from the string auto as it means nothing.
Set the height to a number before animating
code :
$('.mainCont').css('height', '0px').animate({height: height}, 2000);
Animate div height to fit new content

Animate div height to fit new content

By : Vikas Kumar
Date : March 29 2020, 07:55 AM
Hope this helps You can use for the jQuery animate(). Please see the below demo.
and also i was looking on your below part of the code. please think of appending the new items alone ?
code :
            'row 1<br>row 2<br>row 3<br>row 4<br>row 5<br>row 6<br>'
var container = $('#container');
container.click(function(e) {
   var element = $(this);
   var height = element.height();
        'row 1<br>row 2<br>row 3<br>row 4<br>row 5<br>row 6<br>'
    ); // please think of appending the new items alone?
    var height2 = element.height();
    element.css({height : height});
    element.animate( {height : height2} , 500);
#container {
    border: 1px solid black;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    row 1<br>
    row 2<br>
    row 3<br>
How to animate width/height changes due to content changes?

How to animate width/height changes due to content changes?

By : Sue
Date : March 29 2020, 07:55 AM
may help you . You need to use a mask wrapper to the #content and apply the css transition to it and with Javascript change it's height. You need to get the new height from the #content everytime you append new content (height changes).
code :
var $contentMask = $('#contentMask');
var contentBoxId = '#content';
var currentHeight = getCurrentHeight(contentBoxId);
$contentMask.css('height', currentHeight);

$('#btn').on('click', function() {
  $(contentBoxId).append("<p>Ab atque aut cumque dolor exercitationem officia, perferendis quis vel. Autem deserunt ea maiores quaerat quos temporibus! Aperiam dolorem dolores, eaque ex ipsam laborum minima nesciunt nulla porro quaerat vel?</p>");
  currentHeight = getCurrentHeight(contentBoxId);
  $contentMask.css('height', currentHeight);

function getCurrentHeight(selector) {
 return $(selector).height();
#content {
  background-color: yellow;
#contentMask {
  overflow: hidden;
  transition: height 1s ease;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentMask">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab cupiditate debitis dolores dolorum ea, eligendi ex, expedita illum incidunt ipsum itaque neque optio quisquam quo vel veniam voluptatem voluptatibus, voluptatum.</p>

<button id="btn">click me</button>
Animate height of div with changing content?

Animate height of div with changing content?

By : Ryan Nelson
Date : March 29 2020, 07:55 AM
it helps some times Animate the height of the #testimonials with the displayed section height.
code :
(function() {
    var testimonials = $("#testimonials section");
    var testimonialIndex = -1;

    function showNextTestimonial() {
        var section = testimonials.eq(testimonialIndex % testimonials.length);


            height: section.outerHeight(true)
        }, 2000);

        section.fadeOut(2000, showNextTestimonial);

section {
    display: none;
    overflow: auto;
CSS/Javascript animate height expand and collapse for items with varying height

CSS/Javascript animate height expand and collapse for items with varying height

By : tardjien
Date : March 29 2020, 07:55 AM
I hope this helps you . Accordion
You can use JqueryUI Accordion and modify the interface with a custom css to look exactly the way you want it to look. this will save you time that you can invest in the rest of the project
code :
<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false
  } );
<div id="accordion">
  <h3>Section 1</h3>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  <h3>Section 2</h3>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
  <h3>Section 3</h3>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
  <h3>Section 4</h3>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
Related Posts Related Posts :
  • javascript - explanation request of a behaviour
  • Converting String into date format in JS
  • Choose element Angular
  • Display background grid by using image with CSS
  • Call function from another Controller in another file AngularJS
  • How to change texture in Gera library?
  • When trying to use windows.location.href , the values of $_POST[''] is lost
  • jQuery click action on appended item
  • NodeJS & Socket.IO: Emit a request event and get the response, when/where should I bind the listener?
  • 4-digit form on bootstrap modal
  • Prevent characters like quotation marks from input
  • Sign in option creation using jsp and oracle database
  • use socket.io in my controller with yeoman
  • What happens under the hood to prevent calling a bound method changing the this object?
  • issue with jquery .append function
  • Is it possible to EventHandle every GET request a page makes via Javascript?
  • How to select class with ng-if
  • Cannot communicate with websocket. Autobahn: received HELLO message, and session is not yet established
  • Socket.io - Cannot connect to client
  • Load Accordian Panel on click rather than page load
  • How to register async middleware module within express.js app?
  • JS / Cannot read property 'push' of undefined
  • how to make jquery plugin?
  • MATH reverting rotated coordinates
  • Add an expandable text box to every post
  • What was the rationale behind having the receiver in functions default to the global object?
  • JavaScript chaining many function
  • while loop over takes the each method
  • What are the difference between $(document).bind('ready', function) and $(document).ready(function() {})
  • cut the string in javascript
  • Tool tip not working on text area bootstrap
  • AngularJS: how to activate first non zero item in ngRepeat?
  • Pattern for "column total" of an array of arrays
  • Any selector using * failed in my case
  • Uncaught ReferenceError: app is not defined in Angularjs
  • Unit testing controller which has a $state.go method in controller
  • Use of Meteor-ui-progress-circle (accessing to Template variables created in the HTML)
  • JavaScript: Google maps mapOptions?
  • How do I track Universal Analytics events through Google Tag Manager?
  • Firefox Scrolling Bug When Changing :after Contents
  • Drop down list does not work
  • Display month and year specific datepicker in jquery
  • How to show BAr graph rather than line graph in High Stoch Chart
  • Accessing Angular $Scope in web workers
  • How to convert JavaScript(UnityScript) to C# and implement a low pass filter?
  • Need a logic to implement select button value via onchange event
  • redirect in codeigniter using ajax function
  • How to populate this form data and post it with jquery
  • Retrive value from array id in js function
  • angularjs $index when ng-hide with ng-repeat
  • ExtJS TaskRunner
  • Progress bar not hiding after fetching values via AJAX in JavaScript
  • Pop up window code fails
  • how to make dynamic javascript array with key and value group
  • Implement Facebook API login with reactjs
  • What is the meaning of sign ':' in javascript
  • Change all id's in HTMLDivElement using jQuery
  • load multiple pages from different domain in different divs using javascript
  • Could Not Resolve Host github.com
  • jQuery "Chosen" on-filter event?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org