Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to create an xhr autoscrolling page in html5 for ipad

Posted on 2013-01-09
4
Medium Priority
?
564 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 2000 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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article discusses how to implement server side field validation and display customized error messages to the client.
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 elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

585 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