aan alle goede dingen komt een eind, webmasterplein.net 2003 - 2013
wij danken jullie voor al mooie momenten die dankzij dit forum ontstonden - Derk, Rutger en Stef

jQuery Happy Shoutbox!

In `Show Us` mag je jouw nieuwe logo, ontwerp of website tonen. Mits je tegen de kritiek kan van onze leden.
Forumregels
Een nieuw onderwerp moet..:
  • uiteraard voldoen aan de algemene voorwaarden
  • deels of grotendeels af zijn
  • niet het idee van reclame wekken

jQuery Happy Shoutbox!

Berichtdoor Stef » 24 maart 2010 21:59

http://stefft.nl/temp/jquery-happy-shoutbox/

Code: Selecteer alles
<?php
/* Stef van der Linden 2010 */

/*

CREATE TABLE `shoutbox` (
  `shout_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(25) NOT NULL,
  `message` varchar(140) NOT NULL,
  `date` int(11) NOT NULL,
  `ipaddress` int(15) NOT NULL,
  PRIMARY KEY (`shout_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

*/

// mySQL connectie
if ( !mysql_connect('localhost', '', '') || !mysql_select_db('') ) {
   die('Er is een storing opgetreden, onze excuses voor het ongemak.');
}

$action = ( $_GET['do'] ) ? htmlspecialchars(trim($_GET['do'])) : '';
$colours = array("blue", "green", "purple", "brown", "red", "orange", "green_2", "blue_2", "red_2");

switch($action) {
   case 'load':
      $sql = "SELECT `username`, `message`, `date`
         FROM `shoutbox`
         ORDER BY `date` DESC";
      $result = mysql_query($sql);
      while ( $row = mysql_fetch_array($result) ) {
         echo '<div class="entry ' . $colours[rand(0,9)] . '"><p>' . stripslashes($row['message']) . '<small>' . stripslashes($row['username']) . ' - ' . date("d/m/Y H:i", $row['date']) . '</small></p></div>';
      }

   exit;
   break;
   case 'save':
      $username = ( isset($_POST['username']) ) ? addslashes(htmlspecialchars($_POST['username'])) : '';
      $message = ( isset($_POST['message']) ) ? addslashes(htmlspecialchars($_POST['message'])) : '';
      $date = time();
      $ipaddress = $_SERVER['REMOTE_ADDR'];

      $sql = "INSERT INTO `shoutbox`
         (`username`, `message`, `date`, `ipaddress`)
         VALUES ('$username', '$message', '$date', '$ipaddress');";
      mysql_query($sql);
      exit;
   break;
}

?>
<!DOCTYPE html>
<html lang="nl">
 <head>
   <meta charset="UTF-8" />
    <title>jQuery: Happy Shoutbox</title>
   <link rel="stylesheet" type="text/css" href="./stylesheet.css" />
   <script src="http://www.google.com/jsapi"></script>
   <script language="Javascript" type="text/javascript">

   google.load("jquery", '1');

   function saveShout() {
      if ( document.shoutbox.username.value == '' ) {
         alert('Fill in your username please!');
         document.shoutbox.username.focus();
      } else {
         jQuery.post('./index.php?do=save', { username: document.shoutbox.username.value, message: document.shoutbox.message.value }, function(data) {
              loadShout();
            document.shoutbox.message.value = '';
         });
      }
   }

   function checkMaxLength(textarea) {
      var maxlength = 140;
      var valuelength = textarea.value.length;

      if ( valuelength > maxlength ) {
         alert('Oops! Only 140 chars max..');
         textarea.value = textarea.value.substring(0, maxlength)
      }
   }

   function loadShout () {
      jQuery("#shouts").load('./index.php?do=load');
   }

     google.setOnLoadCallback(function() {
        loadShout();
   });

   setInterval("loadShout()", 1000);

       </script>
 </head>
 <body>
    <div id="container">
       <h1>happy shoutbox</h1>
      <form name="shoutbox" onsubmit="saveShout(); return false;">
       <fieldset>
          <legend>Try me!</legend>

         <label for="username">username</label>
         <input type="text" name="username" id="username" size="18" maxlength="20" /> <br />
         <label for="message">message</label>
         <textarea name="message" id="message" cols="25" rows="2" onkeyup="return checkMaxLength(this)"></textarea> <br />

         <input type="submit" name="submit" value="Shout!" />
       </fieldset>
      </form>
      <div id="shouts"></div>
     </div>
 </body>
</html>


Evt. stylesheet: http://stefft.nl/temp/jquery-happy-shou ... esheet.css

Wat denken jullie ervan, is het leuk, zouden jullie stukjes anders doen? TELL ME!
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51

Re: jQuery Happy Shoutbox!

Berichtdoor KillerSponge » 25 maart 2010 09:49

*krijgt instant epilepsie :eujh:
Blabla en andere onzin - http://killersponge.nl
Avatar gebruiker
KillerSponge
Beheerder
Beheerder
 
Berichten: 14456
Geregistreerd: 24 aug 2004 13:05

Re: jQuery Happy Shoutbox!

Berichtdoor Stef » 25 maart 2010 23:50

ja, daarom ook de happy shoutbox. :D maar ik heb leuk met jquery en google.load gewerkt enzo.
Avatar gebruiker
Stef
wmpr
 
Berichten: 5575
Geregistreerd: 27 nov 2003 21:51


Keer terug naar Show Us



cron