Post: Tutorial ASP.Net C# ShoutBox (Source Included)
Options
01-25-2016, 07:31 AM
#1
Sloth
Banned
Released this before think it got deleted so here you go 
Shout out to Frosty Hammy and Devious
Shout out to Frosty Hammy and DeviousStep 1 - Setting Up Our Project
First lets create a new ASP.NET Web Application and call it whatever you want to.
You must login or register to view this content.
Next we need to install our NuGet Packages
Bootstrap
You must login or register to view this content.
jQuery
You must login or register to view this content.
jQuery.UI.Combined
You must login or register to view this content.
FontAwesome
You must login or register to view this content.
Newtonsoft.Json
You must login or register to view this content.
Microsoft.AspNet.SignalR
You must login or register to view this content.
Next change the filter to Upgrade available and update all the packages in there
You must login or register to view this content.
Step 2 - Starting Up Our Shout Box
create a new class file and call it 'Startup' without the quotes and paste the code below in to it.
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(ShoutBox.Startup))]
namespace ShoutBox
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}}
Next Create 3 class files called
MessageDetail
UserDetail
ChatEngine
Inside MessageDetail add this code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ShoutBox
{
public class MessageDetail
{
public string UserName { get; set; }
public string Color { get; set; }
public string Message { get; set; }
public string TimeStamp { get; set; }
}}
Inside UserDetail add this code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ShoutBox
{
public class UserDetail
{
public string ConnectionID { get; set; }
public string UserName { get; set; }
}}
Inside ChatEngine add this code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Threading.Tasks;
namespace ShoutBox
{
[HubName("chatEngine")]
public class ChatEngine : Hub
{
#region Data Lists
static List<UserDetail> ConnectedUsers = new List<UserDetail>();
static List<MessageDetail> CurrentMessage = new List<MessageDetail>();
#endregion
#region Constants
const string OwnerColor = "hotpink";
#endregion
public void Connect(string userName)
{
var id = Context.ConnectionId;
var Color = OwnerColor;
if (ConnectedUsers.Count(x => x.ConnectionID == id) == 0)
{
ConnectedUsers.Add(new UserDetail { ConnectionID = id, UserName = userName });
Clients.Caller.onConnected(id, userName, Color, ConnectedUsers, CurrentMessage);
Clients.AllExcept(id).onNewUserConnected(id, userName, Color, ConnectedUsers);
}
}
public override Task OnDisconnected(bool UserDisconnected)
{
var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionID == Context.ConnectionId);
if (item != null)
{
ConnectedUsers.Remove(item);
var id = Context.ConnectionId;
Clients.All.onUserDisconnected(id, ConnectedUsers);
}
return base.OnDisconnected(UserDisconnected);
}
public void SendMessageToAll(string userName, string message)
{
//Username Color
var color = OwnerColor;
//Grabs Server TimeStamp
var TimeStamp = DateTime.Now.ToString("HH:mm");
//Checks if Message is empty
if (message.Trim() == string.Empty)
return;
// store last 20 messages in cache
AddMessageinCache(userName, color, message, TimeStamp);
// Broadcasts message
Clients.All.messageReceived(userName, color, message, TimeStamp);
}
private void AddMessageinCache(string userName, string color, string message, string timeStamp)
{
CurrentMessage.Add(new MessageDetail { UserName = userName, Color = color, Message = message, TimeStamp = timeStamp });
if (CurrentMessage.Count > 20)
CurrentMessage.RemoveAt(0);
}
}
}
Step 3 - Creating the Site
Now to save time I will be using a site I created earlier so just use the JS CSS and HTML code below
Now we need to add the custom CSS file and custom JavaScript file
So in your Content folder create a new CSS file call it default and copy this code inside of it
body{
overflow: hidden;
}
.absolute-center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 50%;
min-width: 200px;
max-width: 100%;
padding: 40px;
}
#MinMaxBox{
float: right;
color: white;
font-weight: bold;
cursor: pointer;
}
.panel {
border-style: none;
background-color: #2F2F2F;
}
.panel > .panel-heading {
background-color: #25A954;
color: white;
height: 70px;
}
.panel > .panel-footer {
background-color: #2F2F2F;
color: white;
}
.panel > .panel-body {
color: white;
border-style: groove;
border-color: #6D6363;
height: 300px;
overflow-y: auto;
}
.form-control, .ShoutBox {
background-color: #2F2F2F;
color: white;
}
.ShoutButton {
left: 60px;
}
#SendMessage {
border-radius: 5px 5px 5px 5px;
font-weight: bold;
color: white;
left: 10px;
}
#SendMessage:active {
opacity: 0.6;
}
.HideTab{
display: none;
}
#ChatCrumbs ul{
list-style: none;
margin: 0;
padding: 0;
padding-top: 10px;
}
#ChatCrumbs ul li{
display: inline;
margin-right: 10px;
}
#ChatCrumbs ul li a{
color: #25A954;
text-decoration: none;
cursor: pointer;
}
#ChatCrumbs ul li a:hover{
opacity: 0.8;
}
#ChatCrumbs ul li a:active{
opacity: 0.6;
}
.MessageBody {
display: block;
}
.ChatUser {
float: left;
font-weight: bolder;
}
.ChatMessage {
width: 90%;
float: left;
margin-left: 10px;
word-wrap: break-word;
}
.TimeStamp {
font-size: 12px;
float: right;
}
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #2F2F2F;
}
Inside your Scripts folder create a new JavaScript file call it ChatScript and copy this code inside of it
[/CENTER]
$(function () {
$("#Drag").draggable({ containment: "#containment-wrapper", scroll: false });
var chatEngine = $.connection.chatEngine;
registerClientMethods(chatEngine);
$.connection.hub.start().done(function () {
registerEvents(chatEngine)
});
});
function registerEvents(chatEngine) {
var Username = prompt("Please enter a username:");
chatEngine.server.connect(Username);
$('#SendMessage'
.click(function () {
var inputValue = $('#MessageArea'.val();
if ($.trim(inputValue).length > 0) {
chatEngine.server.sendMessageToAll(Username, $("#MessageArea").val());
$("#MessageArea").val('';
$("#MessageArea").focus();
} else {
$("#MessageArea").val('';
$("#MessageArea").focus();
}
});
}
function registerClientMethods(chatEngine) {
// Calls when user successfully logged in
chatEngine.client.onConnected = function (ID, Username, Color, Users, Messages) {
// Add All Existing Users
for (i = 0; i < Users.length; i++) {
AddUser(chatEngine, Users[i].ConnectionID, Users[i].UserName, Color);
$('#ActiveUsers'.text(Users.length);
}
// Add All Existing Messages
for (i = 0; i < Messages.length; i++) {
AddMessage(Messages[i].UserName, Messages[i].Color, Messages[i].Message, Messages[i].TimeStamp);
}
}
// On New User Connected
chatEngine.client.onNewUserConnected = function (ID, Username, Color, Users) {
AddUser(chatEngine, ID, Username, Color);
$('#ActiveUsers'.text(Users.length);
}
// On User Disconnected
chatEngine.client.onUserDisconnected = function (id, Users) {
$('#' + id).remove();
$('#ActiveUsers'.text(Users.length);
}
// On Message Recieved
chatEngine.client.messageReceived = function (userName, color, message, timestamp) {
AddMessage(userName, color, message, timestamp);
}
}
function AddUser(chatEngine, id, name, color) {
$("#ActiveUserList").append('<span id="' + id + '" style="color: ' + color + ';">' + name + ' </span>';
}
function AddMessage(userName, color, message, timeStamp) {
if ($("div[class*='MessageBody']").length > 19) { $('#MainChat .MessageBody:last'.remove(); }
//Adds Message
$('#MainChat'.prepend('<div class="MessageBody"><div class="ChatUser"><span style="color: ' + color + ';">' + userName + ':</span></div><div class="ChatMessage">' + message + '</div><i class="TimeStamp glyphicon glyphicon-time"> ' + timeStamp + '</i></div><br /><br />';
//Scrolling
var y = $('#MainChat'.scrollTop();
$('#MainChat'.scrollTop(y - 15);
}
function HideTab(tab, tab2) {
$("#" + tab).attr("class", "panel-body HideTab");
$("#" + tab2).attr("class", "panel-body");
}
$("#MinMaxBox").click(function () {
if ($('#mainpanel'.hasClass("HideTab")) {
$("#mainpanel").attr("class", "panel-footer");
$("#MainChat").attr("class", "panel-body");
$("#ActiveUsersList").attr("class", "panel-body");
$("#MinMaxBox").text("[-]");
} else {
$("#mainpanel").attr("class", "HideTab");
$("#MainChat").attr("class", "HideTab");
$("#ActiveUsersList").attr("class", "HideTab");
$("#MinMaxBox").text("[+]");
}
});
Finally our HTML code (Please only overwrite from the <!DOCTYPE html> tag down)
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title>NGU Tutorial • Shout Box</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/default.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.2.0.js"></script>
</head>
<body id="#containment-wrapper" style="background: url(https://kronoscloud.com/images/bg.jpg) 0px 0px;">
<form id="ChatForm" runat="server">
<div class="col-md-12 absolute-center">
<div id="Drag">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-heading">NGU Tutorial • Shout Box<a id="MinMaxBox">[-]</a></h4>
</div>
<div id="mainpanel" class="panel-footer">
<div class="input-group ShoutBox">
<asp:TextBox ID="MessageArea" runat="server" CssClass="form-control" name="message" placeholder="Enter message" MaxLength="250" autocomplete="off" OnClientClick="return false;"></asp:TextBox>
<span class="input-group-btn">
<asp:Button ID="SendMessage" type="button" runat="server" AutoPostBack="False" Text="Send Shout" CssClass="btn btn-success" OnClientClick="return false;" />
</span>
</div>
<div id="ChatCrumbs">
<ul>
<li>
<a id="ChatBoxLink" onclick="HideTab('ActiveUserList','MainChat'">NGU Tutorial • Shout Box</a></li>
<li>
<a id="ActiveUsersLink" onclick="HideTab('MainChat','ActiveUserList'">Active Users</a><b>: </b><span id="ActiveUsers">0</span></li>
</ul>
</div>
<br />
<span id="Notice" style="color: mediumpurple;">NOTICE: Welcome to NGU Tutorial • Shout Box Enjoy!</span>
</div>
<div id="MainChat" runat="server" class="panel-body scrollbar scroll">
</div>
<div id="ActiveUserList" runat="server" class="panel-body HideTab"></div>
</div>
</div>
</div>
</form>
<script src='<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript" src="Scripts/ChatScript.js"></script>
</body>
</html>
Step 4 - Testing Our ShoutBox
DOWNLOAD COMPLETE SOURCE: You must login or register to view this content.
Now all that is left it to test it out, on load it a alert box should show up asking for a name input one and you should be good to go, if you have any issues with this tutorial or find any mistakes please let me know and I'll do my best to help out and rectify any mistakes.You should end up with something similar to this (Mine is slightly different because I have added a few extra features)You must login or register to view this content.
The following 4 users say thank you to Sloth for this useful post:
01-25-2016, 10:53 AM
#2
Devious
Treasure hunter
Originally posted by Sloth
Released this before think it got deleted so here you go Shout out to Frosty Hammy and Devious
Shout out to Frosty Hammy and DeviousStep 1 - Setting Up Our Project
First lets create a new ASP.NET Web Application and call it whatever you want to.
You must login or register to view this content.
Next we need to install our NuGet Packages
Bootstrap
You must login or register to view this content.
jQuery
You must login or register to view this content.
jQuery.UI.Combined
You must login or register to view this content.
FontAwesome
You must login or register to view this content.
Newtonsoft.Json
You must login or register to view this content.
Microsoft.AspNet.SignalR
You must login or register to view this content.
Next change the filter to Upgrade available and update all the packages in there
You must login or register to view this content.
Step 2 - Starting Up Our Shout Box
create a new class file and call it 'Startup' without the quotes and paste the code below in to it.
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(ShoutBox.Startup))]
namespace ShoutBox
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}}
Next Create 3 class files called
MessageDetail
UserDetail
ChatEngine
Inside MessageDetail add this code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ShoutBox
{
public class MessageDetail
{
public string UserName { get; set; }
public string Color { get; set; }
public string Message { get; set; }
public string TimeStamp { get; set; }
}}
Inside UserDetail add this code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ShoutBox
{
public class UserDetail
{
public string ConnectionID { get; set; }
public string UserName { get; set; }
}}
Inside ChatEngine add this code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Threading.Tasks;
namespace ShoutBox
{
[HubName("chatEngine")]
public class ChatEngine : Hub
{
#region Data Lists
static List<UserDetail> ConnectedUsers = new List<UserDetail>();
static List<MessageDetail> CurrentMessage = new List<MessageDetail>();
#endregion
#region Constants
const string OwnerColor = "hotpink";
#endregion
public void Connect(string userName)
{
var id = Context.ConnectionId;
var Color = OwnerColor;
if (ConnectedUsers.Count(x => x.ConnectionID == id) == 0)
{
ConnectedUsers.Add(new UserDetail { ConnectionID = id, UserName = userName });
Clients.Caller.onConnected(id, userName, Color, ConnectedUsers, CurrentMessage);
Clients.AllExcept(id).onNewUserConnected(id, userName, Color, ConnectedUsers);
}
}
public override Task OnDisconnected(bool UserDisconnected)
{
var item = ConnectedUsers.FirstOrDefault(x => x.ConnectionID == Context.ConnectionId);
if (item != null)
{
ConnectedUsers.Remove(item);
var id = Context.ConnectionId;
Clients.All.onUserDisconnected(id, ConnectedUsers);
}
return base.OnDisconnected(UserDisconnected);
}
public void SendMessageToAll(string userName, string message)
{
//Username Color
var color = OwnerColor;
//Grabs Server TimeStamp
var TimeStamp = DateTime.Now.ToString("HH:mm");
//Checks if Message is empty
if (message.Trim() == string.Empty)
return;
// store last 20 messages in cache
AddMessageinCache(userName, color, message, TimeStamp);
// Broadcasts message
Clients.All.messageReceived(userName, color, message, TimeStamp);
}
private void AddMessageinCache(string userName, string color, string message, string timeStamp)
{
CurrentMessage.Add(new MessageDetail { UserName = userName, Color = color, Message = message, TimeStamp = timeStamp });
if (CurrentMessage.Count > 20)
CurrentMessage.RemoveAt(0);
}
}
}
Step 3 - Creating the Site
Now to save time I will be using a site I created earlier so just use the JS CSS and HTML code below
Now we need to add the custom CSS file and custom JavaScript file
So in your Content folder create a new CSS file call it default and copy this code inside of it
body{
overflow: hidden;
}
.absolute-center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 50%;
min-width: 200px;
max-width: 100%;
padding: 40px;
}
#MinMaxBox{
float: right;
color: white;
font-weight: bold;
cursor: pointer;
}
.panel {
border-style: none;
background-color: #2F2F2F;
}
.panel > .panel-heading {
background-color: #25A954;
color: white;
height: 70px;
}
.panel > .panel-footer {
background-color: #2F2F2F;
color: white;
}
.panel > .panel-body {
color: white;
border-style: groove;
border-color: #6D6363;
height: 300px;
overflow-y: auto;
}
.form-control, .ShoutBox {
background-color: #2F2F2F;
color: white;
}
.ShoutButton {
left: 60px;
}
#SendMessage {
border-radius: 5px 5px 5px 5px;
font-weight: bold;
color: white;
left: 10px;
}
#SendMessage:active {
opacity: 0.6;
}
.HideTab{
display: none;
}
#ChatCrumbs ul{
list-style: none;
margin: 0;
padding: 0;
padding-top: 10px;
}
#ChatCrumbs ul li{
display: inline;
margin-right: 10px;
}
#ChatCrumbs ul li a{
color: #25A954;
text-decoration: none;
cursor: pointer;
}
#ChatCrumbs ul li a:hover{
opacity: 0.8;
}
#ChatCrumbs ul li a:active{
opacity: 0.6;
}
.MessageBody {
display: block;
}
.ChatUser {
float: left;
font-weight: bolder;
}
.ChatMessage {
width: 90%;
float: left;
margin-left: 10px;
word-wrap: break-word;
}
.TimeStamp {
font-size: 12px;
float: right;
}
.scroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #2F2F2F;
}
Inside your Scripts folder create a new JavaScript file call it ChatScript and copy this code inside of it
[/CENTER]
$(function () {
$("#Drag").draggable({ containment: "#containment-wrapper", scroll: false });
var chatEngine = $.connection.chatEngine;
registerClientMethods(chatEngine);
$.connection.hub.start().done(function () {
registerEvents(chatEngine)
});
});
function registerEvents(chatEngine) {
var Username = prompt("Please enter a username:");
chatEngine.server.connect(Username);
$('#SendMessage'.click(function () {
var inputValue = $('#MessageArea'.val();
if ($.trim(inputValue).length > 0) {
chatEngine.server.sendMessageToAll(Username, $("#MessageArea").val());
$("#MessageArea").val('';
$("#MessageArea").focus();
} else {
$("#MessageArea").val('';
$("#MessageArea").focus();
}
});
}
function registerClientMethods(chatEngine) {
// Calls when user successfully logged in
chatEngine.client.onConnected = function (ID, Username, Color, Users, Messages) {
// Add All Existing Users
for (i = 0; i < Users.length; i++) {
AddUser(chatEngine, Users[i].ConnectionID, Users[i].UserName, Color);
$('#ActiveUsers'.text(Users.length);
}
// Add All Existing Messages
for (i = 0; i < Messages.length; i++) {
AddMessage(Messages[i].UserName, Messages[i].Color, Messages[i].Message, Messages[i].TimeStamp);
}
}
// On New User Connected
chatEngine.client.onNewUserConnected = function (ID, Username, Color, Users) {
AddUser(chatEngine, ID, Username, Color);
$('#ActiveUsers'.text(Users.length);
}
// On User Disconnected
chatEngine.client.onUserDisconnected = function (id, Users) {
$('#' + id).remove();
$('#ActiveUsers'.text(Users.length);
}
// On Message Recieved
chatEngine.client.messageReceived = function (userName, color, message, timestamp) {
AddMessage(userName, color, message, timestamp);
}
}
function AddUser(chatEngine, id, name, color) {
$("#ActiveUserList").append('<span id="' + id + '" style="color: ' + color + ';">' + name + ' </span>';
}
function AddMessage(userName, color, message, timeStamp) {
if ($("div[class*='MessageBody']").length > 19) { $('#MainChat .MessageBody:last'.remove(); }
//Adds Message
$('#MainChat'.prepend('<div class="MessageBody"><div class="ChatUser"><span style="color: ' + color + ';">' + userName + ':</span></div><div class="ChatMessage">' + message + '</div><i class="TimeStamp glyphicon glyphicon-time"> ' + timeStamp + '</i></div><br /><br />';
//Scrolling
var y = $('#MainChat'.scrollTop();
$('#MainChat'.scrollTop(y - 15);
}
function HideTab(tab, tab2) {
$("#" + tab).attr("class", "panel-body HideTab");
$("#" + tab2).attr("class", "panel-body");
}
$("#MinMaxBox").click(function () {
if ($('#mainpanel'.hasClass("HideTab")) {
$("#mainpanel").attr("class", "panel-footer");
$("#MainChat").attr("class", "panel-body");
$("#ActiveUsersList").attr("class", "panel-body");
$("#MinMaxBox").text("[-]");
} else {
$("#mainpanel").attr("class", "HideTab");
$("#MainChat").attr("class", "HideTab");
$("#ActiveUsersList").attr("class", "HideTab");
$("#MinMaxBox").text("[+]");
}
});
Finally our HTML code (Please only overwrite from the <!DOCTYPE html> tag down)
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
<title>NGU Tutorial • Shout Box</title>
<link href="https://www.nextgenupdate.com/forums/../Content/bootstrap.min.css" rel="stylesheet" />
<link href="https://www.nextgenupdate.com/forums/../Content/default.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.signalR-2.2.0.js"></script>
</head>
<body id="#containment-wrapper" style="background: url(https://kronoscloud.com/images/bg.jpg) 0px 0px;">
<form id="ChatForm" runat="server">
<div class="col-md-12 absolute-center">
<div id="Drag">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-heading">NGU Tutorial • Shout Box<a id="MinMaxBox">[-]</a></h4>
</div>
<div id="mainpanel" class="panel-footer">
<div class="input-group ShoutBox">
<asp:TextBox ID="MessageArea" runat="server" CssClass="form-control" name="message" placeholder="Enter message" MaxLength="250" autocomplete="off" OnClientClick="return false;"></asp:TextBox>
<span class="input-group-btn">
<asp:Button ID="SendMessage" type="button" runat="server" AutoPostBack="False" Text="Send Shout" CssClass="btn btn-success" OnClientClick="return false;" />
</span>
</div>
<div id="ChatCrumbs">
<ul>
<li>
<a id="ChatBoxLink" onclick="HideTab('ActiveUserList','MainChat'">NGU Tutorial • Shout Box</a></li>
<li>
<a id="ActiveUsersLink" onclick="HideTab('MainChat','ActiveUserList'">Active Users</a><b>: </b><span id="ActiveUsers">0</span></li>
</ul>
</div>
<br />
<span id="Notice" style="color: mediumpurple;">NOTICE: Welcome to NGU Tutorial • Shout Box Enjoy!</span>
</div>
<div id="MainChat" runat="server" class="panel-body scrollbar scroll">
</div>
<div id="ActiveUserList" runat="server" class="panel-body HideTab"></div>
</div>
</div>
</div>
</form>
<script src='https://www.nextgenupdate.com/forums/<%: ResolveClientUrl("~/signalr/hubs") %>'></script>
<script type="text/javascript" src="Scripts/ChatScript.js"></script>
</body>
</html>
Step 4 - Testing Our ShoutBox
DOWNLOAD COMPLETE SOURCE: You must login or register to view this content.
Now all that is left it to test it out, on load it a alert box should show up asking for a name input one and you should be good to go, if you have any issues with this tutorial or find any mistakes please let me know and I'll do my best to help out and rectify any mistakes.You should end up with something similar to this (Mine is slightly different because I have added a few extra features)You must login or register to view this content.
Wonder why it disappeared off elite
01-26-2016, 02:02 PM
#3
Boliberrys
^^ Sexy ^^
Copyright © 2024, NextGenUpdate.
All Rights Reserved.
