jQuery plugin - QShout (Shoutbox Widget)

Default QShout - Demo

Note:
Hi! Please stop injecting JS code such as alert prompt or any xss. This work is not 100% complete yet, as it's 2-day work. I shall improve it when my time is available.

Please feel free to improve this plugin, if you can. Thanks ;).

Should you have any feedback, please contact the author.

Copyright © 2010, by Boris Ding P H

What is QShout?

A Shoutbox Widget for jQuery.
Written based on jQuery v1.3.2 (Assumed working in v1.2.x)
Version: v1.0; Licensed under: MIT
Supported in recent versions of browsers: IE (6+), FireFox, Chrome, Safari and Opera.
Purpose: To allow developers embed shoutbox in their blogs and monitor it.

How to use?

Download 'jquery-1.x.x.js' and 'jquery.qshout.js' files, and put in this order, typically within <head> </head> tags, something like this:
```
  
```
Note: If you don't have jQuery's library file, get a copy from here.
Create an HTML element in body tag, say "<div>" with id, "qsId" as follows:
```
                   
                 
```
Loading QShout by calling QShout() function that resides in jQuery's ready handler:
```
                  $(function(){
                   $.QShout();
                  });
                 
```
Once you're done, you will get the default QShout's shoutbox as shown on your left-hand side.

How to Customize?

You're allowed to style and customize the shoutbox by providing your options, in json's pattern (name/value pairs). Order is NOT compulsory. Here are some examples:

Example 1: Change <div> id, say 'shoutId', height (350px), width (200px) and border's colour (#ccccff) of QShout.

                 $.QShout({
                   qsId: "shoutId",
                   bwidth: "200px",
                   bheight: "350px",
                   bBorderColor: "#ccccff"
                 });

Example 2: Change blinking's colour (#ccccff) and interval time (2 minutes) of refreshing content.

                 $.QShout({
                   blinkColor: "#ccccff",
                   timer: 120000
                 });

Click here to view full listing of option.

The Server-Side:

Most of the time, a shoutbox will be working together with server-side's programming language. It's the same with QShout. It comes together with PHP/MySQL, by default.
However, you're free to use other sever-side's programming languages, such as ASP/ASP.NET, JSP, Python, Perl, etc. But, few things you have to keep in mind before using your preferred language:

i) JSON data - Always send back the data in JSON format, for example:

{
    "chat": {
        "message": [
            {
                "id": "1",
                "user": "boris",
                "text": "hello world!",
                "time": "2010-01-07 21:10:04",
                "url": "http://borisding.com",
                "ip": "127.0.0.1"
            },
            {
                "id": "2",
                "user": "tester",
                "text": "foo-bar",
                "time": "2010-01-07 21:04:55",
                "url": "",
                "ip": "127.0.0.1"
            }
        ] 
    }
}

ii) Send back 'done' string (MUST all in lowercase) after new chat was inserted into table. This string will be used and checked after the result is sent back to the Ajax's call, to make sure the insertion of data is done, successfully.

iii) Last but not least, call $.QShout() by providing the server-page:

                 $.QShout({
                   serverPage: "your-server-page-name.extension"
                 });