• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 559
  • Last Modified:

How to create an xhr autoscrolling page in html5 for ipad

I need to make a webpage run by ajax to display log lines. It would look like a table with rows of log lines. The ajax request could run once every second and ask the server for new log lines since last request. Log lines would first fill a fifo buffer and then one by one line is taken from the buffer and put on the first row, pushing the rest of the rows down. At position 30 (depends on the number of lines possible to display on the screen) the line will fall out of the table, and be deleted.

Is there a smart way to do this in html5, using some animation or somethng? My idea so far would be to use an html table with a special row at the top. The special row is special because i can set the height of this row 10 times per second in order to move the table down. Increasing the height pixel by pixel, and then when the top row is as high as the other rows, i set the height of the top row to 0, and push all data in the table down by one line, and insert a new line into the row below the top row. The top row is always empty. It will look like all rows moves seemless downwards.

Is there a better way to do this in html5 canvas?
0
lefodnes
Asked:
lefodnes
  • 2
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
you dont need any trickery like that. you can use CSS3 transition properties on the table, which will make the height animate as it changes.

if you wanted to use jquery, you could write in a slide down animation to the "complete" event built into Jquery AJAX.

i did something similar a while ago - i'll see if i can dig it up
0
 
lefodnesAuthor Commented:
Thanks! Would be great if you could share some code!
0
 
Kyle HamiltonData ScientistCommented:
Hi,

Here is a (very) basic implementation that can be modified to suit :)

http://candpgeneration.com/EE/json-twitter.html

If you can look in the console, there is some logging every time the interval fires.

note that Twitter  only allows 150 requests per hour, to the interval isset very high

view source for code of course.
0
 
lefodnesAuthor Commented:
Thanks a lot. I will investigate and modify!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now