Speed up development with full-stack environments for every branch.

Learn More

Chat Application [jQuery and jquery ui]

Forked from How to create chatbox using jQuery UI.

1223 Runs 2115 Views 860 Copies
Saved

Saved

Sagar_Dhandhukiya 1

Sagar_Dhandhukiya
published 2 years ago

<!-- The following line is essential for the "position: fixed" property to work correctly in IE -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>How to create chatbox using jQuery UI</title>
	<!--jQuery UI CSS-->
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" media="screen" />
	<!--jQuery and jQuery UI with jQuery Chat-->
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <link type="text/css" href="jquery.ui.chatbox.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.ui.chatbox.js"></script>
	
    <script type="text/javascript">
		/*
			document ready.
		*/
		$(document).ready(function()
		{
			/*
				declare gloabl box variable,
				so we can check if box is alreay open,
				when user click toggle button
			*/
			var box = null;
			
			/*
				we are now adding click hanlder for 
				toggle button.
			*/
			
			$("input[type='button']").click(function(event, ui)
			{
				/*
					now if box is not null,
					we are toggling chat box.
				*/
				if(box)
				{
					/*
						below code will hide the chatbox that 
						is active, when first clicked on toggle button
					*/
					box.chatbox("option", "boxManager").toggleBox();
				}
				else
				{
					/*
						if box variable is null then we will create
						chat-box.
					*/
					box = $("#chat_div").chatbox(
					{
						/*
							unique id for chat box
						*/
						id:"Runnable",
                        user:
						{
							key : "value"
						},
						/*
							Title for the chat box
						*/
						title : "Runnable User",
						/*
							messageSend as name suggest,
							this will called when message sent.
							and for demo we have appended sent message to our log div.
						*/
						messageSent : function(id, user, msg)
						{
							$("#log").append(id + " said: " + msg + "<br/>");
                            $("#chat_div").chatbox("option", "boxManager").addMsg(id, msg);
                        }
					});
				}
			});
		});
    </script>
</head>
	<body>
		<p>It will not work untill necessary scripts and stylesheets are properly loaded, check out the code.</p>
		<input type="button" name="toggle" value="toggle" />
		
		<!--Chat box will be generated in this container-->
		<div id="chat_div"></div>

		<hr />
		<div id="log"></div>
	</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).