title: call jquery animation from external file
body: <p>my scenario is following. I want to check a mysql database every few seconds for new entries. If there is a new entry, I would like to call an animation to slide if the new database entry.</p>
  
  <p>For this I'm trying to combine two good tutorials I found.</p>
  
  <p><a href="http://www.aleixcortadellas.com/main/2009/02/15/automatically-query-mysql-and-output-results-with-ajax/" rel="nofollow">http://www.aleixcortadellas.com/main/2009/02/15/automatically-query-mysql-and-output-results-with-ajax/</a> (this one checks the database every five seconds)</p>
  
  <p><a href="http://www.fiveminuteargument.com/blog/scrolling-list" rel="nofollow">http://www.fiveminuteargument.com/blog/scrolling-list</a> (this one has a nice animation)</p>
  
  <p>The database refresh is working fine (boo.php), but I'm having troubles to call the animation or maybe it is just a logical problem.</p>
  
  <p>I think to call the animation, I need to echo out something like this from the boo.php file:</p>
  
  <p>echo " smoothAdd('u10', 'text');";</p>
  
  <p>I looked for some auto updating newstickers or twitter style updates, but I couldn't find one which does automatically check the database and has some kind of animation for new updates.</p>
  
  <p>code of the index.php:</p>
  
  <pre><code>&lt;body id="scrolling-list"&gt;
  
  &lt;div id="wrapper"&gt;
  &lt;script type="text/javascript"&gt; refreshdiv(); &lt;/script&gt;
  &lt;div id="timediv"&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var t = 0;
  
  $(function() {
   var h = $('#u10').height();
   var lih = $('#u10 li:last').outerHeight();
   var mb = $('#u10 li:last').css('margin-bottom');
   mb = parseInt(mb.substr(0, mb.length - 2));
  
  $('#btn6').click(function() {
    smoothAdd('u10', '&lt;?php echo $team; ?&gt;');
  });
  });
  
  
  function smoothAdd(id, text)
  {
  $('#u10').css('overflow', 'hidden');
  
  var h = $('#u10').height();
  
  var ulPaddingTop = $('#u10').css('padding-top');
  ulPaddingTop = ulPaddingTop.substr(0, ulPaddingTop.length - 2);
  
  var ulPaddingBottom = $('#u10').css('padding-bottom');
  ulPaddingBottom = ulPaddingBottom.substr(0, ulPaddingBottom.length - 2);
  
  $('#u10').css('height', h);
  
  $('#u10').prepend('&lt;li&gt;' + text + '&lt;/li&gt;');
  
  var heightDiff = $('#u10 li:first').outerHeight() - $('#u10 li:last').outerHeight();
  
  var oldMarginTop = $('#u10 li:first').css('margin-top');
  
  $('#u10 li:first').css('margin-top', 0 - $('#u10 li:first').outerHeight());
  
  $('#u10 li:first').css('position', 'relative');
  $('#u10 li:first').css('top', 0 - ulPaddingTop);
  
  $('#u10 li:last').css('position', 'relative');
  
  $('#u10').animate({height: h + heightDiff}, 1500)
  
  $('#u10 li:first').animate({top: 0}, 250, function() {
      $('#u10 li:first').animate({marginTop: oldMarginTop}, 1000, function() {
          $('#u10 li:last').animate({top: ulPaddingBottom}, 250, function() {
              $('#u10 li:last').remove();
              $('#u10').css('height', 'auto');
              $('#u10').css('overflow', 'visible');
          });
      });
  });
  }
  &lt;/script&gt;
  
  &lt;ul id="u10" class="example"&gt;
  &lt;li&gt;Item one&lt;/li&gt;
  &lt;li&gt;Item two&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <hr>
  
  <p>code of the ajax.js</p>
  
  <pre><code>var seconds = 5;
  var divid = "timediv";
  var url = "boo.php";
  
  function refreshdiv(){
  
  // The XMLHttpRequest object
  
  var xmlHttp;
  try{
  xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
  }
  catch (e){
  try{
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
  }
  catch (e){
  try{
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch (e){
  alert("Your browser does not support AJAX.");
  return false;
  }
  }
  }
  
  // Timestamp for preventing IE caching the GET request
  
  fetch_unix_timestamp = function()
  {
  return parseInt(new Date().getTime().toString().substring(0, 10))
  }
  
  var timestamp = fetch_unix_timestamp();
  var nocacheurl = url+"?t="+timestamp;
  
  // The code...
  
  xmlHttp.onreadystatechange=function(){
  if(xmlHttp.readyState==4){
  document.getElementById(divid).innerHTML=xmlHttp.responseText;
  setTimeout('refreshdiv()',seconds*1000);
  }
  }
  xmlHttp.open("GET",nocacheurl,true);
  xmlHttp.send(null);
  }
  
  // Start the refreshing process
  
  var seconds;
  window.onload = function startrefresh(){
  setTimeout('refreshdiv()',seconds*1000);
  }
  </code></pre>
  
  <hr>
  
  <p>code of boo.php:</p>
  
  <pre><code>...
  $query = "SELECT * FROM $tablename ORDER BY id DESC LIMIT 1";
  $result = mysql_query($query);
  
  // Return the results, loop through them and echo
  
  echo "&lt;ul class=\"scroller\"&gt;";
  
  while($row = mysql_fetch_array($result, MYSQL_ASSOC))
  { ?&gt;
  
  &lt;li&gt;&lt;?php echo $row['team'] . " " . $row['action'];?&gt;&lt;/li&gt;
  
  
  &lt;?php } 
  
  echo "&lt;/ul&gt;";
  </code></pre>