Pulsante "more" in stile Twitter

Nel secondo file php (che salveremo come "more_ajax.php") non facciamo altro che effettuare una nuova query sul database per prelevare gli "n" messaggi successivi (precedenti se ordiniamo in modo decrescente) al "msg_id" inviato.

<?php
include('dbconfig.php');
if (isset($_POST['lastmsg'])) {
  $lastmsg = $_POST['lastmsg'];
  $sql_check = mysql_query("SELECT * FROM more where msg_id<'$lastmsg' order by msg_id desc limit 2<");
  if (mysql_num_rows($sql_check)) {
    while ($row = mysql_fetch_array($sql_check)) {
      $msg_id = $row['msg_id'];
      $msg = $row['message'];
      ?>
      <div id="<?php echo $msg_id; ?>" class="con">
      <span style="padding:5px;"><?php echo $msg; ?></span>
      </div>
      <?php
    }
    ?>
    <div id="morebutton"><a id="<?php echo $msg_id; ?>" class="more" href="#" >More</a></div>
    <?php
  }
}
?>

Come già detto sopra, il testo stampato da questo secondo file php verrà restituito alla richiesta ajax effettuata nel primo file e verrà inserito dinamicamente nell'apposito div contenitore.

Infine vi propongo il codice del foglio di stile utilizzato da me per questo script di esempio:

* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
a {
  text-decoration: none;
  color: #000000;
}
a:hover {
  text-decoration: underline;
}
.con {
  float: left;
  display: block;
  width: 480px;
  height: 50px;
  min-height: 50px;
  padding: 12px;
  border-bottom: #666666 1px dashed;
  background-color: #FFFFFF;
  text-align: left;
  overflow: hidden;
}
#morebutton {
  float: left;
  width: 490px;
  height: 26px;
  margin-top: 10px;
  padding: 5px;
  border: #000000 solid 2px;
  background-color: #ccc;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
}

• <<
• 1
• 2
• >>