jQuery Chat

By using jQuery we can able to create a chat box (client side). In this article I am  going to show you , how to create a chat box without any plugins. If we write backend coding (like PHP, C#) then we can do Web Application Chat. If interested in Web application chat , take a look at this. Before will start to the example session ,see the final output below.

CREATE HTML:

  First we need to add Heading tag h1. <h1>Lets Chat !</h1>
After that we need to create a div element with ID "content". Inside the div we will need to add <p> Paragraph element . 

                 <div id="content">

                        <p>Here's our chat data</p>                                                                   <div>

Next , will create a textarea for message and button for post inside the div element with ID "message".

                 <div id="message">

                    <textarea rows="2" cols="34">Leave a comment!</textarea>

                    <button>post</button>

                  </div>

Html part is over . Now we will add CSS.

ADD CSS :

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  background: #F2F2F2;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

#content {
  border: 1px solid #A9F5A9;
  background: #FFF;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  overflow: auto;
  -moz-border-radius: 3px;
}

#content p {
  padding: 1em;
  margin: 1em;
  background: #E6E6E6;
  border: 1px solid #BDBDBD;
  -moz-border-radius: 4px;
}

h1 {
  color: #01DF3A;
  fant-family: 'Merienda One',cursive;
  margin-top: 90px;
  text-align: center;
  padding: 1em;
  font-size: 31px;
}

#message {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  overflow: auto;
  padding: 0 0 0 3px;
  color: #000000;
}

#message textarea {
  margin: 1em 0 0 0;
}

button {
  border: none;
  padding: 6px;
  text-decoration: none;
  -moz-border-radius: 4px;
  background: #2EFE64;
  color: white;
  -moz-box-shadow: 0 1px 0 white;
  cursor: pointer;

}

Now we will see the jQuery part,how to post the data from textarea to content.This is only client side implementation. If we need to create a web application chat , then we can use C# , and jQuery AJAX .

First we add document ready function .

             $(document).ready(function() {
             });

If post button is clicked we need to send the data from the message area to content . So will add click event listener for post button inside the ready function.

             $(document).ready(function() {
                   $('button').click(function(){

                           });

              });

Inside the button click event, first we need to get the textarea value, assign it to the message variable then get the ID content.html () assign it to the variable name called old. After that we need to append the old variable with message variable.

              $('button').click(function() {

                 var message = $("textarea").val();

                      var old = $("#content").html();

                    $("#content").html(old + '<p>' + message + '</p>'); 

               }); 

That's it we created a simple jQuery Chat. 

For Example : Try this jsfiddle jQuery chat .. U love it