Azhar Azhar - 2 years ago 149
CSS Question

Create a box to to display the data from the event source using css

I want to create a box to display the data from the event source using css.
For example,
enter image description here

In this picture, i want to create a box to load data from the php script. the new data appear at the top. i want to see new data at the top.As new data is being updated, the old data goes down and you cant see old data after 4 rows. I use css to achieve it. I use overflow to hide the the old data. Instead new data are at the bottom. Please help me. thank you.

my code is found below

php script

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$dbhost = "localhost";
$dbusername = "root";
$dbpassword = "netwitness";
$dbname = "abdpractice";
$con = mysqli_connect ($dbhost, $dbusername, $dbpassword) or die ('Error in connecting: ' . mysqli_error($con));

//Select the particular database and link to the connection
$db_selected = mysqli_select_db($con, $dbname ) or die('Select dbase error '. mysqli_error());
//Make A SQL Query and link to the connection

$result = mysqli_query($con,"SELECT * FROM `countryattack` ORDER BY RAND() LIMIT 1");

while ($row = mysqli_fetch_assoc($result))
{
echo "data: [X] NEW ATTACK: FROM " . $row["countrysrc"]. " TO " . $row["countrydst"]. " \n\n";
}
mysqli_close($con);

?>


html code

<!DOCTYPE html>
<html>
<head>
<style>
div.hidden {
background-color: #00FF00;
width: 500px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>

<h1>Getting server updates</h1>
<div class="hidden" id="result"></div>

<script>


if(typeof(EventSource) !== "undefined") {
var source = new EventSource("shownewattack.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";

};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}

</script>
</body>
</html>


My output is like this
enter image description here

The output is that they show data at the bottom. This is not what I want.. Any ideas on how to do that..

My question is how to create a box to observe the data. As the script is being updated, the old data goes down. after the fourth row you cant see anything.new data will appear the top. Can you please help me. thank you..

Answer Source

You can substitute using Node.insertBefore() for concatenating .innerHTML of parent element.

const result = document.getElementById("result");

source.onmessage = function(event) {
  const node = document.createTextNode(event.data + "\n");
  if (!result.firstChild) {
    result.appendChild(node);
  else {
    result.insertBefore(node, result.firstChild);    
  }
};

<pre id="result"></pre>
<script>
  const result = document.getElementById("result");
  let n = 0;
  
  const interval = setInterval(() => {
    let node = document.createTextNode(++n + "\n");
    if (!result.firstChild) {
      result.appendChild(node);
    } else {          
      result.insertBefore(node, result.firstChild)
    }
  }, 500);
</script>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download