CSS Div To Display Server Logs

Question

I am trying to display server side logs on browser but problems is I can not display whole log text inside a div therefore I need a div that only display last 100 or 200 lines and hide the previous logs text and only display the newly added text.

I googled allot but did not find anything.

Thank You.

UPDATE I got the solution

var length = $("#parentDiv > #childDiv").length;

if(length > 20){    //20 is no of lines
     $('#parentDiv').find('#childDiv:lt(4)').remove();   //remove first four div
}

When you say some number of lines, it's certainly not countable. Do you have line separator such as
tag? Show some sample of your work if you have tried out. — aniskhan001, Aug 06 '14 at 06:48
A simple approach would be running a loop through the divs using JS and take the last 100 or 200 divs. — aniskhan001, Aug 06 '14 at 06:56

score 0 · Answer 1 · answered Aug 06 '14 at 07:04

You can do it following steps:

Step 1. Make Parent div to hold all inner divs those have lines:

<div  id="logHolder"> </div>

Step 2. Add all child divs that have log lines in that div like below:

$( "#logHolder" ).appendHTML("<div> Log Line 1 </div><div> Log Line 2 </div>") // and so on..

Step 3. Use jquery slice function to select few children divs like below:

$("#logHolder > div").slice(-100);

Note : You need to refresh slice function as soon as you append more lines to logholder div.

I will discourage using css for this requirement as it gives poor Cross Browser Compatibility.

score 0 · Answer 2 · edited May 23 '17 at 12:05

I think what you really want is not so much how to display log, but rather how to display the most recent lines of the log (the last lines of the file). Especially in an efficient manner.

With unix, you would use tail to read lines from the end of a file. With PHP, there isn't a convenient function (to my knowledge) but it is possible using fseek.

This answer explains how to read from the end of a file backwards:

PHP - Returning the last line in a file?

The answer above the one I just linked is a simpler solution, but it loads the entire file into memory (and then displays the last lines). The fseek solution should be cleaner, and have better performance.

I haven't personally used this method, however.

CSS Div To Display Server Logs

2 Answers2