Chat box v3.0

Here is the final version of my jQuery chatbox. I've added a new feature and improved the rest of the code. I've tried to make this chatbox easy to add to your own website. In the source package there will be a readme with all the information you need to know to set up this chatbox. This tutorial will focus on explaining how the chatbox works. I will not cover all of the code but I wil pick out a few features.

Note that i've tried adding a div id into every selector. This is because I read the other day that selecting elements by using id's is the fastest way of selecting an element. This is because getElementById is a native javascript command. Selecting class on the other hand isn't build into pure javascript so jQuery has to do its magic to make this possible. That process is time comsuming. Although I still select elements by writing theire name (textarea, input) I do write an element id infront of it so the jquery knows where to look for it in the DOM tree.

1. Character counter

$("#chat textarea").each(function(){

var length = $(this).val().length;

$(".characterCount").html(250 - length+" ");

$(this).keyup(function(){

var length = $(this).val().length;

if (length > 250) {

$(".characterCount").html(250 - length+" ").css({"color": "#C00"});

} else {

$(".characterCount").html(250 - length+" ").css({"color": "#FFF"});

}

});

$("#chat textarea").each(function(){ = For every (each()) textarea in the div chat do something

var length = $(this).val().length; = Here I save the current textare's (this) value length. So the amout of characters. .length is a native javascript command.

$(this).keyup(function(){ = When the user has pressed a key in the current textarea it will do something

if (length > 250) { = If the variable length is bigger (>) than 250 it will run this if statement

$(".characterCount").html(250 - length+" ").css({"color": "#C00"}) = If will substract the variable length from 250. The length variable is bigger than 250. So if we substract length from 250 it will be a negative number. So to make it clear that the user has typed more than 250 characters, we change the color of the text to dark red (#C00)

2. Enlargement

var originalChatHeight = $("#chat").height();
var originalChatWidth = $("#chat").width();
var originalMsgHeight = $("#chat .msg").height();

$(".enlarge").click(function(){

if ($("#chat").hasClass("bigChat")){

$(this).attr("src", "img/enlarge.png").attr("title", "Enlarge");

$("#chat").animate({"width": originalChatWidth, "height": originalChatHeight}, 600).removeClass("bigChat");

$("#chat .msg").animate({"height": originalMsgHeight}, 600);

} else {

$(this).attr("src", "img/reduce.png").attr("title", "Reduce");

$("#chat").animate({"width": originalChatWidth * 1.1, "height": originalChatHeight * 2.3}, 600).addClass("bigChat");

$("#chat .msg").animate({"height": originalMsgHeight * 2.3}, 600);

}

});

This code will give the user the possibility to change the size of the chat box when he clicks on an elements with the class enlarge. The neat thing about this is that the user can also get the chat box back to its original size by click on that same element again.

var originalChatHeight = $("#chat").height(); = This variable and the two other variables after this variable save the original height and width of the element with an id of chat

if ($("#chat").hasClass("bigChat")){ = If the element with a div id of chat has a class of bigChat, it will run this if statement. It checks if the div has a class of bigChat to determine if the chat box is in 'big' mode.

$("#chat").animate({"width": originalChatWidth * 1.1, "height": originalChatHeight * 2.3}..... = To make the chat 'grow' we need to tell jQuery to which height and width it has to animate. The new width will be 1.1 times bigger that the original width. The height will be 2.3 times bigger than the original height.

3. Keycodes

$("#chat form").keypress(function(e){

if (e.which == 13){

$(this).submit();

}

});

Keycodes are simply the codes attached to each key. For my application i wanted the user to be able to press enter to submit the form. The keycode for the enter key on your keyboard is 17. Try googling keycodes to get a full list of them.

if (e.which == 13){ = If the user presses enter, do this

As always ..... for any question about this tutorial visit the developphp.com forums.

DEMO: http://tutcenter.net/tutorialFiles/chatBox/
SOURCE FILES: http://tutcenter.net/tutorialFiles/chatBox/chatBox-v3.0.zip