This are the codes you need to create a working Shoutbox

The HTML
Let’s start with index.html. It is a regular HTML5 document, which includes our JavaScript libraries, scripts and stylesheets. Here are the parts relevant to the shoutbox:

index.html
Code:
<divclass="shoutbox"><h1>Shout box <imgsrc='./assets/img/refresh.png'/></h1><ulclass="shoutbox-content"></ul><divclass="shoutbox-form"><h2>Write a message <span>×</span></h2><formaction="./publish.php"method="post"><labelfor="shoutbox-name">nickname </label><inputtype="text"id="shoutbox-name"name="name"/><labelclass="shoutbox-comment-label"for="shoutbox-comment">message </label><textareaid="shoutbox-comment"name="comment"maxlength='240'></textarea><inputtype="submit"value="Shout!"/></form></div></div>

With JavaScript we will insert the published shouts into the <ul> element. The form is hidden by default, and only revealed when the “Write a message” header is clicked.

The JavaScript Code
And here is our script.js, which makes the above HTML work:

assets/js/script.js
Code:
$(function(){
// Storing some elements in variables for a cleaner code basevar refreshButton = $('h1 img'),
shoutboxForm = $('.shoutbox-form'),
form = shoutboxForm.find('form'),
closeForm = shoutboxForm.find('h2 span'),
nameElement = form.find('#shoutbox- name'),
commentElement = form.find('#shoutbox-comment'),
ul = $('ul.shoutbox-content');
// Replace with emoji icons: emojione.ascii = true;
// Load the comments. load();
// On form submit, if everything is filled in, publish the shout to the databasevar canPostComment = true;
form.submit(function(e){
e.preventDefault();
if(!canPostComment) return;
var name = nameElement.val().trim();
var comment = commentElement.val().trim();
if(name.length && comment.length && comment.length < 240) {
publish(name, comment);
// Prevent new shouts from being published canPostComment = false;
// Allow a new comment to be posted after 5 seconds setTimeout(function(){
canPostComment = true;
}, 5000);
}
});
// Toggle the visibility of the form.
shoutboxForm.on('click', 'h2', function(e){
if(form.is(':visible')) {
formClose();
}
else {
formOpen();
}
});
// Clicking on the REPLY button writes the name of the person you want to reply to into the textbox.
ul.on('click', '.shoutbox-comment- reply', function(e){
var replyName = $(this).data('name');
formOpen();
commentElement.val('@'+replyName+' ').focus();
});
// Clicking the refresh button will force the load functionvar canReload = true;
refreshButton.click(function(){
if(!canReload) returnfalse;
load();
canReload = false;
// Allow additional reloads after 2 seconds setTimeout(function(){
canReload = true;
}, 2000);
});
// Automatically refresh the shouts every 20 seconds setInterval(load,20000);
functionformOpen(){
if(form.is(':visible')) return;
form.slideDown();
closeForm.fadeIn();
}
functionformClose(){
if(!form.is(':visible')) return;
form.slideUp();
closeForm.fadeOut();
}
// Store the shout in the databasefunctionpublish(name,comment){
$.post('publish.php', {name: name, comment: comment}, function(){
nameElement.val("";
commentElement.val("";
load();
});
}
// Fetch the latest shoutsfunctionload(){
$.getJSON('./load.php', function(data) {
appendComments(data);
});
}
// Render an array of shouts as HTMLfunctionappendComments(data) {
ul.empty();
data.forEach(function(d){
ul.append('<li>'+
'<span class="shoutbox-username">' + d.name + '</span>'+
'<p class="shoutbox-comment">' + emojione.toImage(d.text) + '</p>'+
'<div class="shoutbox-comment- details"><span class="shoutbox-comment-reply" data-name="' + d.name + '">REPLY</span>'+
'<span class="shoutbox-comment- ago">' + d.timeAgo + '</span></div>'+
'</li>');
});
}
});

Continue reading and download the full script via http://nct.com.ng/Thread-Creating-a-Shoutbox

Join the Programmers Forum via http://www.nct.com.ng/

#TeamNCT cares

Hope you find it useful?

Lets know your view about it!!!

Honestly I do prefer www.figeria.com to www.nct.com.ng

johndik:
after reviewing nct forum and figeria forum, now i prefer www.figeria.com to www.nct.com.ng

Your signature do suggest that you own figeria