Jump to content
Sign in to follow this  
1RV34

[SOLVED kinda..] timeline like ajax script

Recommended Posts

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 xD Edit: to clarify, i'm trying to recreate the effect like in https://twitter.com/...s/widget_search.

Edited by 1RV34

Share this post


Link to post
Share on other sites

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..

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...