Next Prev

Shoutbox

This script is based on jQuery library and Form plugin.
It's very easy to setup it, also an archive is available for download so you can play with the files on your localhost.

This jquery shoutbox is file based, but it's very easy to write a few more lines to keep your messages in a database.
It tries to simulate the behaviour of YShout (a donation ware script) you can find online.
Data is exchanged in JSON format, pear Json library is being used.

Download the jquery shoutbox files here

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/ajax/jquery/shoutbox/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
  
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>jQuery</title>
  <style type="text/css">
    #daddy-shoutbox {
      padding: 5px;
      background: #3E5468;
      color: white;
      width: 600px;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 11px;
    }
    .shoutbox-list {
      border-bottom: 1px solid #627C98;
      
      padding: 5px;
      display: none;
    }
    #daddy-shoutbox-list {
      text-align: left;
      margin: 0px auto;
    }
    #daddy-shoutbox-form {
      text-align: left;
      
    }
    .shoutbox-list-time {
      color: #8DA2B4;
    }
    .shoutbox-list-nick {
      margin-left: 5px;
      font-weight: bold;
    }
    .shoutbox-list-message {
      margin-left: 5px;
    }
    
  </style>
  <script type="text/javascript" src="javascript/jquery.js"></script>
  <script type="text/javascript" src="javascript/jquery.form.js"></script>
</head>
  <body>

  <center>
  <div id="daddy-shoutbox">
    <div id="daddy-shoutbox-list"></div>
    <br />
    <form id="daddy-shoutbox-form" action="daddy-shoutbox.php?action=add" method="post"> 
    Nick: <input type="text" name="nickname" /> Say: <input type="text" name="message" />
    <input type="submit" value="Submit" />
    <span id="daddy-shoutbox-response"></span>
    </form>
  </div>
  </center>
  
  <script type="text/javascript">
        var count = 0;
        var files = '';
        var lastTime = 0;
        
        function prepare(response) {
          var d = new Date();
          count++;
          d.setTime(response.time*1000);
          var mytime = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
          var string = '<div class="shoutbox-list" id="list-'+count+'">'
              + '<span class="shoutbox-list-time">'+mytime+'</span>'
              + '<span class="shoutbox-list-nick">'+response.nickname+':</span>'
              + '<span class="shoutbox-list-message">'+response.message+'</span>'
              +'</div>';
          
          return string;
        }
        
        function success(response, status)  { 
          if(status == 'success') {
            lastTime = response.time;
            $('#daddy-shoutbox-response').html('<img src="'+files+'images/accept.png" />');
            $('#daddy-shoutbox-list').append(prepare(response));
            $('input[@name=message]').attr('value', '').focus();
            $('#list-'+count).fadeIn('slow');
            timeoutID = setTimeout(refresh, 3000);
          }
        }
        
        function validate(formData, jqForm, options) {
          for (var i=0; i < formData.length; i++) { 
              if (!formData[i].value) {
                  alert('Please fill in all the fields'); 
                  $('input[@name='+formData[i].name+']').css('background', 'red');
                  return false; 
              } 
          } 
          $('#daddy-shoutbox-response').html('<img src="'+files+'images/loader.gif" />');
          clearTimeout(timeoutID);
        }

        function refresh() {
          $.getJSON(files+"daddy-shoutbox.php?action=view&time="+lastTime, function(json) {
            if(json.length) {
              for(i=0; i < json.length; i++) {
                $('#daddy-shoutbox-list').append(prepare(json[i]));
                $('#list-' + count).fadeIn('slow');
              }
              var j = i-1;
              lastTime = json[j].time;
            }
            //alert(lastTime);
          });
          timeoutID = setTimeout(refresh, 3000);
        }
        
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            var options = { 
              dataType:       'json',
              beforeSubmit:   validate,
              success:        success
            }; 
            $('#daddy-shoutbox-form').ajaxForm(options);
            timeoutID = setTimeout(refresh, 100);
        });
  </script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Thion

2008-04-16 03:28:18

Nice, but it would be nicer if someone explain to me how the heck can I display messages from MySQL? My modifications are adding message to db, but I have no idea how to display them.

Jayson

2008-03-19 06:29:19

is there a way that i can append the value "response"[the last post] on top of the list instead at the bottom?

Danyal

2008-03-14 05:02:38

Its good work, but still some bugs in it any way nice example. because i tried on two different sessions and i can see newly added shout on both..

Blady

2008-03-12 15:55:44

How can I change the width of shoutbox/ When I write a very, very long message, it widened. How can I stop that? How can I change the maximum amount of messages (I'm goging to see only 5 latest messages). TYIA :)

Fedmich

2008-03-08 00:05:54

I think the page is refreshing a lot...

Raider

2008-03-05 20:30:43

This doesnt seem to work for me.... My messages appear, but when i refresh it isnt there anymore. A freidn on another computer is tring it too. We dont see what either one of us are writting

DaRyL

2008-03-03 05:29:04

Why were my questions deleted from last night?

DaRyL

2008-03-02 17:27:50

Next question: How are they doing this "Comment on this example" form. That's actually what I was looking for when I ran across this!

DaRyL

2008-03-02 17:24:07

Is there a how to on this? I loaded it on my webserver and get a response but it looks nothing like the example above.

Albert

2008-02-27 09:17:21

Amazing script really!

Jan

2008-02-27 08:13:41

I am trying to understand how I can use it. .

CFM

2008-02-18 02:26:15

Okay, this looks promising!

Rik

2008-02-09 05:32:11

Very cool.

DAvid

2008-02-08 17:06:26

Interesting, looking for something like this for a lot of time

Garson

2008-02-07 12:55:52

Testing this wonderful script.

Fly By

2008-02-05 03:25:10

is there some howto for this script? I download it i run it on my localhost server. I load page in web browser i have two inputs: Nick and say. I click submit but there is no answer ?!

Dusan

2008-01-08 21:49:08

Well, in Mozilla scroller does not work!

Classic ASP

2007-12-23 11:28:13

with classic asp please :(

Dakota

2007-12-03 06:18:13

This is uber cool...

Alex

2007-12-01 19:16:41

Love this in theory, but I'm in firefox (2.0.0.10) and can't scroll down the list of posts, so even though I've moved the entry form to the top, I can't see anything I post (I checked in IE, where I can move down the posts). Is there a way to limit the number of posts shown and/or start them from the top down instead of bottom up?

Marv

2007-12-01 08:05:46

Thanks for sharing the script, good job.

Gazzo

2007-11-29 14:38:45

do you get adds on this

Jason

2007-11-19 11:15:52

If you're having issues with this script not refreshing in IE, the following code might help: function refresh() { var stamp = new Date(); stamp = stamp.getTime(); $.getJSON(files+"daddy-shoutbox.php?action=view&time=" + lastTime + "&stamp=" + stamp

Mike

2007-11-15 02:28:26

nice script danke

2007-11-13 13:14:37

I can't believe I never knew about this site before. IDIOT!

Me Me

2007-11-05 09:15:34

I might use this on my site

SkyBoy

2007-11-01 01:59:01

@Attlia I use the method(htp://groups.google.com/group/jquery-en/browse_thread/thread/7f30d4540debc6c4) , then IE can refreshing now.

Tere Sergiu

2007-11-01 00:01:32

i think i may use this script on my site

Cosmin

2007-10-12 03:00:24

Kiko, I think you can place the form above the div that contains the actual list (daddy-shoutbox-list) This should work. Sorry for double commenting, it just deleted my tags :D . I think this should not move the inputs way down on your page.

Cosmin

2007-10-12 02:58:57

Kiko, I think you can place the "" above the "

" . I think this should not move the inputs way down on your page.

Gutovic Ivan

2007-10-03 02:49:00

How to change order for displaying messages ?

Fkf

2007-09-28 20:38:21

Smart programming! Good news to everyone!

Kost

2007-09-26 07:39:22

Thanks. Nice example

Attila

2007-09-24 01:31:09

Great job! I have some comments: Our national charachers (HUN) are not working well with UTF-8 charset meta. My sent messages are unreadable, but the others posts are ok. IE7 is not refreshing, but Mozilla works fine. Thanks a lot!

Nice

2007-09-19 14:38:11

i love it

Visitor495

2007-09-17 01:42:32

I have visited your site 107-times

Jagan

2007-09-16 01:20:54

Coool Works great

Dre

2007-09-11 01:31:10

pretty cool

Visuvious

2007-08-30 07:15:58

Pretty cool...I love the interface :D

Anil

2007-08-29 18:08:38

Damn good script

MikeB

2007-08-29 11:39:20

Is it supposed to work on Safari? I don't see the messages get posted when using Safari.

Kiko

2007-08-09 19:20:28

i dont like the idea of the form moving down everytime we post. it should be in a static position. i like it if the message scrolls automatically that we dont need to use our mouse to scroll down just to write message. anyway i like it. hope to see more improvement. thanks

Matthew

2007-08-08 18:18:33

is this comment thing powered by ajax i wonder?

Jason

2007-07-24 02:49:12

awesome script! great shoutbox thanks

Meysam

2007-07-06 09:00:29

very good tank is best

Elmo

2007-06-15 00:34:33

nice example, but the javascript function could interfeer with third party libraries, better to build a jQuery object of attach the functions to jQuery

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Shoutbox

Comment on this example