I have created chatbox using jquery. It generates one chatbox per user. But it goes till users available.
I want to show only 4 box on page.
If 4 chatbox are visible and clicked on 5th user hide first chatbox from right side and add chatbox for that clicked user to left side.
At end there must be only 4 chatbox available on page at same time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Chatting</title>
<style type="text/css" media="all">
.chatboxlink{width:25%; padding:auto;height:350px; }
.chatboxlink a{ display:block; padding:0px 5px 0px 5px; width:15%;height:10px;}
.chatbox{ width:250px; height:250px; background:#CCFFFF; float:right; bottom:-190px; position:relative; right:0px; border:1px solid #993300;}
.chatbox textarea{ height:80px; width:240px;overflow-y:auto scroll; resize:none; }
.chatbox p{ text-align:center; font-size:16px; color:#99FF99;}
.chatinput{ border-top:2px solid #00FF99; height:60px;width:250px; bottom:40px; position:absolute; float:left; margin-left:0; }
#title{ padding:5px; text-align:left; border:1px solid #3366FF; height:25px; }
#chatmessage{ background:#99CC99;height:155px;width:250px; top:0px; position:relative; overflow:auto scroll;}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.chatboxlink a').click(function(){
var $user= $(this).attr('href');
var $id = $(this).attr('id');
var ids = $('[id="'+this.id+'"]');
if(ids.length>1 && ids[0]==this)
{
$('textarea').focus();
alert($id);
}
else
{
$('body').append('<div class="chatbox" id='+ $id +'><div id="title"> ' + $user + ' </div><div id="chatmessage"></div><div class="chatinput"><textarea></textarea></div></div>');
}
return false;
});
});
</script>
</head>
<body>
<div class="chatboxlink"><br />
<a href="Charles" id="1">Charles</a><br />
<a href="Randy" id="2">Randy</a><br />
<a href="Ben" id="3">Ben</a><br />
<a href="William" id="4">William</a><br />
<a href="George" id="5">George</a><br />
<a href="Karl" id="6">Karl</a><br />
<a href="Denis" id="7">Denis</a><br />
<a href="John" id="8">John</a><br />
<a href="Victor" id="9">Victor</a><br />
<a href="Andrew" id="10">Andrew</a><br />
</div>
</body>
</html>
Demo available http://jsfiddle.net/xyq5F/4/