mysql - call jquery animation from external file -
my scenario following. want check mysql database every few seconds new entries. if there new entry, phone call animation slide if new database entry.
for i'm trying combine 2 tutorials found.
http://www.aleixcortadellas.com/main/2009/02/15/automatically-query-mysql-and-output-results-with-ajax/ (this 1 checks database every 5 seconds)
http://www.fiveminuteargument.com/blog/scrolling-list (this 1 has nice animation)
the database refresh working fine (boo.php), i'm having troubles phone call animation or maybe logical problem.
i think phone call animation, need echo out boo.php file:
echo " smoothadd('u10', 'text');";
i looked auto updating newstickers or twitter style updates, couldn't find 1 automatically check database , has kind of animation new updates.
code of index.php:
<body id="scrolling-list"> <div id="wrapper"> <script type="text/javascript"> refreshdiv(); </script> <div id="timediv"> </div> <script type="text/javascript"> 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', '<?php echo $team; ?>'); }); }); 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('<li>' + text + '</li>'); 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'); }); }); }); } </script> <ul id="u10" class="example"> <li>item one</li> <li>item two</li> </ul> code of ajax.js
var seconds = 5; var divid = "timediv"; var url = "boo.php"; function refreshdiv(){ // xmlhttprequest object var xmlhttp; try{ xmlhttp=new xmlhttprequest(); // firefox, opera 8.0+, safari } grab (e){ try{ xmlhttp=new activexobject("msxml2.xmlhttp"); // net explorer } grab (e){ try{ xmlhttp=new activexobject("microsoft.xmlhttp"); } grab (e){ alert("your browser not back upwards ajax."); homecoming false; } } } // timestamp preventing ie caching request fetch_unix_timestamp = function() { homecoming parseint(new date().gettime().tostring().substring(0, 10)) } var timestamp = fetch_unix_timestamp(); var nocacheurl = url+"?t="+timestamp; // 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 refreshing process var seconds; window.onload = function startrefresh(){ settimeout('refreshdiv()',seconds*1000); } code of boo.php:
... $query = "select * $tablename order id desc limit 1"; $result = mysql_query($query); // homecoming results, loop through them , echo echo "<ul class=\"scroller\">"; while($row = mysql_fetch_array($result, mysql_assoc)) { ?> <li><?php echo $row['team'] . " " . $row['action'];?></li> <?php } echo "</ul>"; jquery mysql animation twitter auto-update
No comments:
Post a Comment