1. Home
  2. Miscellaneous
  3. Blank Page

Page Header > Subtitle

  • My Income $47,171
  • Site Traffic  45%
  • Site Orders  2447
Description: This is a jQuery UI plugin serves as the front end of a simple Comet chat server. It is a pure UI plugin so you can easily plug it into whatever communication protocol of your choice.

Widget Title

Here are the few options you can customize for your chat box:
Chat
In the box below we will capture every chat window opened. Try to open the chat windows by clicking on the left chat users. You will notice all the chats being logged below.

<- Type in your chat window and see this chat log update

Widget Title

Here are the few options you can customize for your chat box:
      	options: {
	    id: null, //id for the DOM element
	    title: null, // title of the chatbox
	    user: null, // can be anything associated with this chatbox
	    hidden: false, // show or hide the chatbox
	    offset: 0, // relative to right edge of the browser window
	    width: 230, // width of the chatbox
	    messageSent: function(id, user, msg){
		// override this
		this.boxManager.addMsg(user.first_name, msg);
	    },
	    boxClosed: function(id) {}, // called when the close icon is clicked
	    ...
        }

To create a chatbox at the bottom of the browser window with an offset of 200px to the right edge, use the following code:
      $(document).ready(function(){
          // to create
          $("#chat_div").chatbox({id : "chat_div",
                                  title : "Title",
                                  user : "can be anything"
                                  offset: 200,
                                  messageSent: function(id, user, msg){
                                       alert("DOM " + id + " just typed in " + msg);
                                  }});
          // to insert a message
          $("#chat_div").chatbox("option", "boxManager").addMsg("Mr. Foo", "Barrr!");
      });

Use the following standard jQuery UI approach to access the options after the chat box is created:
      ...
      // getter
      var offset = $("#chat_div").chatbox("option", "offset");
      
      // setter, to change the possition of the chatbox
      $("#chat_div").chatbox("option", "offset", 300);