flex direction and column reverse for auto scroll

PNewCode · July 24, 2023

Hello
My new scripting adventure is a very simple chat page. And by simple I mean it's no where near what it should be for a real one. This is just to play around with. Something I wanted to get done was have the page load with ajax so new enties auto load (CHECK)... then I wanted the page to auto scroll to the bottom (CHECK) BUT...

What I have does all that, but it doesn't allow to scroll up at all. So it's sort of "If you missed what was said... sorry!". I'm not really cool with that.

I'm posting my entire 2 pages that makes all this work because I've tried mannyyyyyyy examples online and this is as far as I got. Any help is appreciated.
ALSO, I don't like that I have to specify PX's in the height to make it work. Thats not very device friendly. Is there a way to not have to do that? I tried % but it makes it not work at all.

Many thanks!

The page that loads the info from the database and has the scroll (list.php)
PS... I know I know, the PHP is TERRIBLE haha. I really didn't give a lot of thought behind that part of it on this project yet

<style>
.container {
  height: 900px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}
</style>



<div class="container">


<?php
$conn = mysqli_connect("deleted for posting", "deleted for posting", "deleted for posting", "deleted for posting");





$rows = mysqli_query($conn, "SELECT * FROM auction");
?> 


<style>
    .table-roundmenue4 {
        background-color: #ffffff;
        border-collapse: collapse;
        border-radius: 10px;
        padding: 10px;
        border-style: hidden; /* hide standard table (collapsed) border */
        box-shadow: 0 0 0 2px #9C01A9; /* this draws the table border  */ 
        box-shadow: 0px 3px 8px #000;
        color: #ffffff;
    }
</style>





<table width="80%" cellspacing="20">
  <?php $i = 1; ?> <?php foreach($rows as $row) : ?> 
  <tr>
      <td><div class="table-roundmenue4">
          <?php echo '<font color="CCCCFF" size="5" face="Verdana, Arial, Helvetica, sans-serif"><b>';echo $row["name"];echo '</b></font>'; 
          
          echo "<br>";
          
          echo  '<font color="000000" size="4" face="Verdana, Arial, Helvetica, sans-serif"><b>';echo $row["comment"];echo '</b></font>'; ?></div></td>
    </tr>
  <?php endforeach; ?>
</table>


</div>

And the page that displays list.php to make it appear in real time

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>





  <body onload = "table();">







    <script type="text/javascript">
      function table(){
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function(){
          document.getElementById("table").innerHTML = this.responseText;
        }
        xhttp.open("GET", "list.php");
        xhttp.send();
      }

      setInterval(function(){
        table();
      }, 1);
    </script>
    <div id="table">

    </div>

Sign In

flex direction and column reverse for auto scroll

Recommended Posts

PNewCode

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information