Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to create an xhr autoscrolling page in html5 for ipad

Posted on 2013-01-09
4
546 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

828 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