Grows from bottom and greeting msg

sources/index.php

@@ -79,7 +79,9 @@ if ($name.$room=="") {
                 <p class="welcome">Welcome to the <b><?php echo $room; ?></b> room, <b><?php echo $name; ?></b></p>
                 <div style="clear:both"></div>
             </div>	
+            <div id="content">
             <div id="chatbox"></div>
+            </div>
             <form name="message" action="">
                 <input name="usermsg" type="text" id="usermsg" size="63" autocomplete="off"  autofocus/>
                 <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
@@ -101,9 +103,9 @@ function lienurl(s){
 }
 
             $(document).ready(function() {
-                var id = 'undefined';
                 var pos = 0;
                 var lastdate = 0;
+                var lastday='';
                 var oldscrollHeight = $("#chatbox")[0].scrollHeight;
 
                 $("#submitmsg").click(function() {
@@ -136,6 +138,7 @@ function lienurl(s){
                             var html='';
                             var date;
                             var heure='';
+                            var day='';
                             for (var k in data.data) {
                                 lastdate = data.data[k][0];
                                 date = new Date(parseInt(lastdate)*1000);
@@ -147,16 +150,29 @@ function lienurl(s){
 
                             html=lienurl(html);
 
-                            if (pos==0 && heure!=''){
+                            if (html!=""){
-                               html='<b>----- '+date.toLocaleDateString()+' -----</b><br>'+html;
+                              if (pos==0){
+                                 day = date.toLocaleDateString();
+                                 if (day!=lastday){
+                                   $("#chatbox").append('<b>----- '+day+' -----</b><br>');
+                                   if (data.pos==0) {
+                                     $("#chatbox").append('<span id="nomsg">No message yet. Enter yours!<br></span>');
+                                   }
+                                   lastday=day;
+                                 }
+                                 if (data.pos>0) {
+                                   $("#nomsg").remove();
+                                 } else {
+                                   html="";
+                                 }
                               } 
-                            pos = data.pos;
-
                               $("#chatbox").append(html); 
+                            }
                             var newscrollHeight = $("#chatbox")[0].scrollHeight;
                             if (newscrollHeight > oldscrollHeight) {
-								               $("#chatbox").scrollTop($("#chatbox")[0].scrollHeight);
+								               $("#chatbox").scrollTop(newscrollHeight);
                             }
+                            pos = data.pos;
                         },
                     });
                 }

sources/server.php

@@ -3,16 +3,17 @@
 $pos = isset($_REQUEST['pos']) ? $_REQUEST['pos'] : '';
 $lastdate = isset($_REQUEST['lastdate']) ? $_REQUEST['lastdate'] : '';
 $room = isset($_REQUEST['room']) ? $_REQUEST['room'] : '';
-$date = date('Y-m-d');
+$time = time();
+$date = date('Y-m-d', $time);
 $file = './history/'.$room.$date;
 
-if (!ctype_digit($pos) || !file_exists($file)) return;
+if (!ctype_digit($pos)) return;
 
 settype($pos, "integer");
 settype($lastdate, "integer");
 
 $data = array();
-
+if (file_exists($file)) {
   if ($pos!=0 && $date!=date('Y-m-d',$lastdate)) {
     $pos=0;
   } else {
@@ -24,6 +25,9 @@ if ($pos!=0 && $date!=date('Y-m-d',$lastdate)) {
       $pos =ftell($fh);
     }
   }
+} else if ($date!=date('Y-m-d',$lastdate)) {
+  $data[0]=array($time,"","");
+}
 echo json_encode(array('pos' => $pos, 'data' => $data));
 
 ?>

sources/style.css

@@ -46,13 +46,13 @@ a:hover { text-decoration: underline; }
 #loginform p { margin: 5px; }
 
 #chatbox {
-    text-align: left;
-    margin: 0 50px;
-    padding: 0.5em 1ex 0.1em;
   background: #FEFFF4;
-    height: calc(100% - 120px);
+  position: absolute;
-    border: 1px solid #C7C7C7;
+  bottom: 80px;
-    overflow: auto; }
+  right: 50px;
+  left: 50px;  overflow-y: scroll;
+  max-height: calc(100% - 140px);
+  padding: .5em;   }
 
 #usermsg {
    width: calc(100% - 100px);
@@ -74,3 +74,4 @@ a:hover { text-decoration: underline; }
 .tform label { display: table-cell; }
 .tform input { display: table-cell; }
 em {color:red;}
+#content{height: calc(100% - 120px); }