Solved

jQuery: Animate height for dynamically added content

Posted on 2010-09-23
4
750 Views
Last Modified: 2012-05-10
I want to use jQuery to animate dynamically added content. The problem is that because the content is dynamic, I cannot set the pixel height for the animation.  


If you test the code below you will see the problem.  Each time you refresh the page, the size of the added content is different.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<style type="text/css">
#leadForm1 {height: 0; overflow: hidden; width: 700px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<script type="text/javascript">
/* <![CDATA[ */

function CreateText($min,max)
{
 var l= l = ('Lorem ipsum ');
 var validchars = "eir mod tem por invidunt ut lab ore dol ore magna aliqu yam erat sed diam voluptu ";
  var minsize, maxsize, count, actualsize;
  minsize = Math.floor(Math.random()*100);
  maxsize = Math.floor(Math.random()*9000);
  if (maxsize<(Math.ceil(maxsize * 1.5)))
  var str = (Math.ceil(maxsize * 1.5));
  actualsize = Math.floor(Math.random() * (maxsize - minsize + 1)) + minsize;
    for (count = 1; count<actualsize; count++)
    l=l+validchars.charAt(Math.floor(Math.random()* validchars.length));
  return l;
}

$(document).ready(function(){

$('#rq1').click(function() {
  $('#leadForm1').html(CreateText());
  $('#leadForm1').animate({height: '650px'}, 900);
  $(this).css( {visibility: "hidden"})
  return false;
});

});

/* ]]> */ 
</script> 

</head>
<body>

<p><a href="#" id="rq1">Click Here to create random text.</a></p>

<div id="leadForm1"></div>
<hr />
<h1>Hello World</h1>
</body>
</html>

Open in new window

0
Comment
Question by:hankknight
4 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 33752321
Try using slideDown() instead of animate(): http://api.jquery.com/slideDown/
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33752403
check this one also,
http://stackoverflow.com/questions/1263789/jquery-animate-slide-to-height-100

with the same logic you can find the innerheight of the element you want to vertically scroll, and set that as an option to the animate function of jquery
0
 
LVL 6

Expert Comment

by:mickey159
ID: 33752965
Do you really need the slide effect?
If not, try the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Demo</title>



<style type="text/css">

#leadForm1 {height: 0; overflow: hidden; width: 700px; height: auto;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>



<script type="text/javascript">

/* <![CDATA[ */



function CreateText($min,max)

{

 var l= l = ('Lorem ipsum ');

 var validchars = "eir mod tem por invidunt ut lab ore dol ore magna aliqu yam erat sed diam voluptu ";

  var minsize, maxsize, count, actualsize;

  minsize = Math.floor(Math.random()*100);

  maxsize = Math.floor(Math.random()*9000);

  if (maxsize<(Math.ceil(maxsize * 1.5)))

  var str = (Math.ceil(maxsize * 1.5));

  actualsize = Math.floor(Math.random() * (maxsize - minsize + 1)) + minsize;

    for (count = 1; count<actualsize; count++)

    l=l+validchars.charAt(Math.floor(Math.random()* validchars.length));

  return l;

}

$(document).ready(function(){

$('#rq1').click(function() {

  $('#leadForm1').html(CreateText());



  $(this).hide();

  return false;

});



});



/* ]]> */ 

</script> 



</head>

<body>



<p><a href="#" id="rq1">Click Here to create random text.</a></p>



<div id="leadForm1"></div>

<hr />

<h1>Hello World</h1>

</body>

</html>

Open in new window

0
 
LVL 16

Author Comment

by:hankknight
ID: 33752988
Thanks, slideDown does the job.  Here is the working code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>

<style type="text/css">
#leadForm1 {display: none; width: 700px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>

<p><a href="#" id="rq1">Click Here to create random text.</a></p>

<div id="leadForm1"></div>
<hr />
<h1>Footer</h1>

<script type="text/javascript">
/* <![CDATA[ */

function CreateText($min,max)
{
 var l= l = ('Lorem ipsum ');
 var validchars = "eir mod tem por invidunt ut lab ore dol ore magna aliqu yam erat sed diam voluptu ";
  var minsize, maxsize, count, actualsize;
  minsize = Math.floor(Math.random()*100);
  maxsize = Math.floor(Math.random()*9000);
  if (maxsize<(Math.ceil(maxsize * 1.5)))
  var str = (Math.ceil(maxsize * 1.5));
  actualsize = Math.floor(Math.random() * (maxsize - minsize + 1)) + minsize;
    for (count = 1; count<actualsize; count++)
    l=l+validchars.charAt(Math.floor(Math.random()* validchars.length));
  return l + '.';
}

$(document).ready(function(){
 $('#rq1').click(function() {
  $('#leadForm1').html(CreateText());
  $('#leadForm1').slideDown(500);
  $(this).css( {visibility: "hidden"})
  return false;
 });
});

/* ]]> */ 
</script> 

</body>
</html>

Open in new window

0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now