Solved

How to create an xhr autoscrolling page in html5 for ipad

Posted on 2013-01-09
4
544 Views
Last Modified: 2013-01-10
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
Comment
Question by:lefodnes
  • 2
  • 2
4 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38762582
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
 

Author Comment

by:lefodnes
ID: 38762960
Thanks! Would be great if you could share some code!
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38763365
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
 

Author Closing Comment

by:lefodnes
ID: 38763713
Thanks a lot. I will investigate and modify!
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now