Solved

How to create an xhr autoscrolling page in html5 for ipad

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
html input type 3 22
How can I echo a PHP variable in AJAX function? 7 32
javascript date picker in php while loop 5 24
Sorting a string 1 10
This article discusses how to create an extensible mechanism for linked drop downs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 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

21 Experts available now in Live!

Get 1:1 Help Now