1RV34 Posted January 30, 2012 Share Posted January 30, 2012 First i have 2 files, index.html and check.php, the index's source is:index.html <html><head> <title>potatoes</title> <style type="text/css">@-webkit-keyframes potatointro {0% { opacity: 0; }100% { opacity: 1; }}.potato {-webkit-animation: potatointro 1s;}</style> <script type="text/javascript">function loadXMLDoc() {var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();}else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('potatoes').innerHTML = xmlhttp.responseText + document.getElementById('potatoes').innerHTML; }}xmlhttp.open("GET","check.php",true);xmlhttp.send();}</script></head><body> <div id="potatoes"> <div class="potato"> <p>abc</p> </div> </div></body></html> the check.php may return this: <div class="potato"> <p>def</p> </div> but at times also multiple ones: <div class="trade"> <p>ghi</p> </div> <div class="trade"> <p>def</p> </div> running loadXMLDoc() changes the body of index.html from <body> <div id="potatoes"> <div class="potato"> <p>abc</p> </div> </div></body> to <body> <div id="potatoes"> <div class="potato"> <p>def</p> </div> <div class="potato"> <p>abc</p> </div> </div></body> and that is EXACTLY what is supposed to happen, BUT as you see on the style i have a little kind of "intro" and instead of just doing that animation on the inserted part it does it on the existing ones too. i've been struggling around with insertBefore() and appendChild() and more but just can't do what i want to do.I'm kinda trying to get the effect of a timeline like in twitter, facebook or youtube when there is a new tweet/post/comment. I hope i've been clear enough and anyone could help. If there are any questions ofcourse feel free to ask.Any help would be welcome before i'll pull my hair out Edit: to clarify, i'm trying to recreate the effect like in https://twitter.com/...s/widget_search. Link to comment Share on other sites More sharing options...
1RV34 Posted January 31, 2012 Author Share Posted January 31, 2012 Ok threw out the complete css animation.. used javascript instead: function animation(elem) { var fullHeight = document.getElementById(elem).offsetHeight; document.getElementById(elem).style.height = 0; document.getElementById(elem).style.opacity = 0; var step = fullHeight / 80; var count = 0; var theInterval = setInterval(function () { count += step; document.getElementById(elem).style.height = count; if (count == fullHeight) { theInterval = clearInterval(theInterval); count = 0; var theInterval2 = setInterval(function () { count++; document.getElementById(elem).style.opacity = count / 10; if (count == 10) { theInterval2 = clearInterval(theInterval2); } }, 10); } }, 5);} This topic can close.. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.