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

Web 2.0 Box Generator

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

SlickShady

2009-12-14 14:35:28

I need a shotbox that has smilies and avatars...Anyone know a good one?

Umar

2009-12-13 06:08:31

Just testing this thing ..!

Tutor

2009-12-05 09:07:13

just to let people know, you can solve the long string problem (for shrunk verions of this) by putting a "overflow: hidden;" in the css

Tutor

2009-11-30 19:02:01

ohh, I'm trying to use a really shrunk version. However, when really long words are used it doesnt word wrap. Is there a 'common' way of word wrapping for this case?

Tutor

2009-11-30 16:19:11

One thing I've noticed. You really need to put a realistic character limit both front end and back end. Otherwise, I love it!

Anonymous

2009-11-10 01:39:21

can you explain how to write a few more lines to keep your messages in a database?

Jazz

2009-06-22 20:02:48

Cool! Super!

Dave

2009-06-18 08:09:14

This is great stuff... One problem I'm having though is getting the existing comments to load up when the page is opened and seeing input from other users. All files are local on my server, any ideas? Dx

Akif

2009-06-18 06:58:29

How can i increase the maximum message count?

AppleMadman

2009-06-12 03:41:28

This is just awesome! Any way to save chat logs?

Mikeys4u

2009-06-04 02:30:50

How can I add a sound each time a message is recieved?

Jesus

2009-05-03 13:10:17

Super script

Ilen

2009-03-10 19:41:27

hola esta bueno pero no tiene scroll otra que el mensaje deberia salir en la parte superior

Ipsg007

2009-03-10 09:05:25

woww thats amazing.. thanks for it...

Cort-X-

2009-03-04 12:52:59

Awesome !! Is there a way to keep all messages ? It would be perfect !

Tampon

2009-02-18 11:56:29

wonderfull but after 19 lines wrote it seems that is not functionnal, impossible to see the box for put a message... sorry for my French-english !

Zim

2009-01-31 03:10:25

so where exactly in the filetree does these files go? I can't get it to work properly...

Kirat

2009-01-13 07:52:37

My messages appear, but when i refresh it isnt there anymore.

Sudhir

2009-01-05 23:42:20

nice web development company

Robert

2009-01-05 13:29:10

Oh i see, overflow is hidden, and the entry box was hidden as it spilled under

Robert

2009-01-05 13:28:14

Its not working. I can see the posts, but the place to enter my own post is unavailable. It makes me weary of this script =/ i want it to work!

Adf

2008-12-29 04:44:09

for people asking about integrating this into a page - you could use a iframe with and change with widths to match the iframe. This worked great for me.

Mike

2008-12-17 12:44:15

uha it works

TienDung

2008-12-10 21:53:00

em muon down shoutbox2.0 thi` lam` the nao` nhi?

Kekonansi

2008-12-10 16:58:10

Ops, I forgot. The problem with the font (in portuguese of brazil we have some accents - this is the word?!). Well, i solve that using "$data['message'] = html_entity_decode($_POST['message']);" in the file daddy-shoutbox.php. Just search by the expression "$data['message']" and you'll find it. Cya!

Kekonansi

2008-12-10 16:53:08

Hello! I found a way to make it show just a certain number of messages. IN the file of index.php, find the line of the function "prepare" (in the javascript). After the "var string" at the end, insert this setence: " if (count > 15) { x = (count - 15); $('#list-' + x).fadeOut('slow'); x = document.getElementById('list-' + x); x.style.display = "none"; }". Here I put 15, but you can put the number you want. To put in the inverse order, just alter the "append" to "prepend" as it has already been told here in the comments. To make the hour be right, you can put this function in the begin of the javascript in the same page: "function checkTime(i){if (i<10){i="0" + i;}return i;}" and then change de value of "mytime" in the function "prepare" to : "checkTime(d.getHours())+':'+checkTime(d.getMinutes())+':'+checkTime(d.getSeconds());". It will stay like this: "var mytime = checkTime(d.getHours())+':'+checkTime(d.getMinutes())+':'+checkTime(d.getSeconds());". There is a bug about when you do not fill all the fields. You can fix this with this "for (var i=0; i < formData.length; i++) $('input[@name='+formData[i].name+']').css('background', 'white');" adding before this line: "$('#daddy-shoutbox-response').html('

');" in the function "Validate". Hope it help you guys! See you!

What

2008-12-08 13:33:42

where is the scroll bar?

Roy

2008-12-05 00:02:05

Cool tool

Billy

2008-12-01 02:52:17

Yeah nice

Bill Davis

2008-11-29 20:15:46

this is sweet

Hello

2008-11-22 18:22:46

nice script

WD40

2008-11-21 05:32:05

Umm ok so maybe im just stupid but I cant get this to work locally. I remove the and put the images and JS in the right folders and copyd the html into a new page. It loads up ok but when I hit submit, I just get the loader.gif spinning round and nothing happens? Anyone?? please?? Thanks guys

Ken

2008-11-13 18:02:11

Nice!!

Nicholas

2008-11-10 11:32:05

I just wanted to say hi

Vod

2008-11-08 01:44:36

great app

Zados Co.

2008-11-05 03:40:58

Good!

Drewski

2008-11-03 17:40:40

checking out the shoutbox

Bob

2008-11-02 19:14:44

hello!

YSam

2008-11-02 18:13:48

nice!

Snax

2008-11-02 16:07:00

GOODD................

Jan

2008-10-28 10:16:40

Hi! Can anyone explain me, how can I install this shoutbox to my joomla web page? I'm new in this, so please, tell me in a few steps how does this thing realy works:) tnx

Mimi

2008-10-17 11:46:36

awsome

Rahman

2008-10-11 11:40:27

I dont like this comment because its a big not small sry

Richi

2008-10-06 05:53:57

I guess it should be UTF-8 compatible by default settings.

Martijn

2008-09-22 12:39:34

Is dit leuk :)

Ekko

2008-09-22 09:33:33

To reverse the way messages are appended (so newer messages on top) you have to change 2 lines in the javascript. Where it says append change it into prepend. On line 87 change this: $('#daddy-shoutbox-list').append(prepare(response)); into: $('#daddy-shoutbox-list').prepend(prepare(response)); On line 110 change: $('#daddy-shoutbox-list').append(prepare(json[i])); into: $('#daddy-shoutbox-list').prepend(prepare(json[i])); Good luck with it :)

Pushpak

2008-09-16 11:20:29

hola, its cool

Hmm

2008-09-16 08:43:31

indeed.

Mr.A

2008-09-11 18:35:04

I Can't setup

Prova

2008-08-28 03:25:14

IE 7.0 test

2008-08-25 01:41:42

Lost

2008-08-20 15:09:50

i have a BIG question, how the hell do I add this shoutbox to my sidebar? can anyone give me the code?

Jason

2008-08-19 07:30:17

this is shoutbox

Kral Oyun

2008-08-11 18:07:18

i ll try on my page, thanks.

Fatzo

2008-08-11 08:01:04

ui cool

Echo

2008-07-28 12:00:47

Very nice, integrated easily and effectively into my site. The library for this is excellent. Will be great for future ideas.

Spencer

2008-07-08 08:28:53

This is some great code, has a huge memory leak issue. Since they are adding a datetime number as they pull the chat.txt every 8th of a second, it caches that page everytime in your end users temporary internet cache. The only solution is to make a seperate .php page that pulls the .txt file, and set the .php file to expire several days in the past, and remove the datetime variable being added at the end of .txt.

Asif

2008-07-08 06:32:17

Hey, I love your design so much. you are my favorite designer.

Drunken Dragon

2008-07-06 07:42:54

What is that? I only see : pWned

]M[

2008-06-26 09:53:17

How we can set this script that each time refresh all messages ?!

]M[

2008-06-12 10:09:57

hi every one, i am work on this code to work with mysql data base, anyone know what i must done to refresh whole message each time ?!

Alex

2008-06-05 11:13:23

nice script.can someone tell me how can i change the number of displayed mesages?

Devyn

2008-05-27 20:05:11

Very nice, but can you set it up so only the last 10 messages are shown? it takes up a lot of space.

Tampa Web Design

2008-05-25 18:12:15

Thanks Stephan Nielsen!

Dylan

2008-05-10 05:13:58

test message in hungarian: árvíztűrő tükörfúrógép

Stephan Nielsen

2008-04-28 14:51:47

you can fix the utf-8 problem by replacing line 39 in daddy-shoutbox.php with this.: $data['message'] = htmlentities(stripslashes($_POST['message']), ENT_QUOTES, "UTF-8" );

ميلاد

2008-04-27 05:27:01

the best

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!

100

Kost

2007-09-26 07:39:22

Thanks. Nice example

101

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!

102

Nice

2007-09-19 14:38:11

i love it

103

Visitor495

2007-09-17 01:42:32

I have visited your site 107-times

104

Jagan

2007-09-16 01:20:54

Coool Works great

105

Dre

2007-09-11 01:31:10

pretty cool

106

Visuvious

2007-08-30 07:15:58

Pretty cool...I love the interface :D

107

Anil

2007-08-29 18:08:38

Damn good script

108

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.

109

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

110

Matthew

2007-08-08 18:18:33

is this comment thing powered by ajax i wonder?

111

Jason

2007-07-24 02:49:12

awesome script! great shoutbox thanks

112

Meysam

2007-07-06 09:00:29

very good tank is best

113

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