EVOLUTION-NINJA

Edit File: footer_inside.php

<div class="page-footer">
		<div class="page-footer-inner">
			 Copyright &copy; 2015. All Rights Reserved TextileHub.
		</div>
		<div class="scroll-to-top">
			<i class="icon-arrow-up"></i>
		</div>
	</div>
<script>

//setInterval(function(){
$( document ).ready(function() {
			var r='success';
			//alert();
	$.ajax({
		type: "post",
		url: "<?php echo base_url(); ?>vendor/chat_history",
	  
		data:{'r':r},
		success: function (data) 
		{
				
			var response=JSON.parse(data);
			
			$('.users_list_det').empty();
			var content = '';
			$.each(response.user_list, function(key, val)
			{
					
//var f=jQuery.timeago(val.offline_time);

if(response.users_id == val.id)
				{
					
				}
				else
				{
					var ar_new=response.timing_offline[key];

content += '<div class="sidebar-name"><a onclick="register_popup('+ val.id +');"><input type="hidden" class="user_name'+ val.id +'" value="'+ val.name +'">';
					
					if(val.gender == 'Male')
				{
					content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/male_img.jpg" />';
				}
				else
				{
					content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/female.jpg" />';
				}
				
				content += '<span>'+ val.name +' </span>';
				$.each(response.chat_list, function(key, vals)
				{
					if(val.name == vals.name)
					{
						content += '<span class="user_chat_count'+ val.id +'"><b><?php echo '('; ?> ' + vals.total +' <?php echo ')'; ?></b></span>'
					}
					else
					{
						
					}
				});
				
				content += '<div class="pull-right" style="clear:both;"><p style="text-align: right;">';
				
				if(val.chat_online == 'online')
				{
					content += '<span class="circle circle-online circle-lg"></span>';
					content += '</p><p style="font-weight: normal;" for="49"><?php echo 'Online'; ?></p>';
				}
				else
				{
					content += '<span class="circle circle-warning circle-lg"></span>';
					content += '</p><p style="font-weight: normal;" for="49">' + ar_new + '</p>';
				}
				
				
				
				
				content += '</div></a></div>';
				}
				
				//$('time').timeago();
				
			});
			$('.users_list_det').html(content);				 
			// document.getElementById("myForm").style.display = "block";
		  }
		});
	}, 1000);

</script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/select2/select2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/extensions/ColReorder/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/extensions/Scroller/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.min.js"></script>

<script>
jQuery(document).ready(function() {       
   Metronic.init(); // init metronic core components
Layout.init(); // init current layout
QuickSidebar.init(); // init quick sidebar
Demo.init(); // init demo features
   TableAdvanced.init();
});
</script>

if(response.users_id == val.id)
				{
					
				}
				else
				{
					var ar_new=response.timing_offline[key];

content += '<div class="sidebar-name"><a onclick="register_popup('+ val.id +');"><input type="hidden" class="user_name'+ val.id +'" value="'+ val.name +'">';
					
					if(val.gender == 'Male')
				{
					content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/male_img.jpg" />';
				}
				else
				{
					content += '<img width="30" height="30" class="img-circle" src="<?php echo base_url(); ?>assets/images/female.jpg" />';
				}
				
				content += '<span>'+ val.name +' </span>';
				$.each(response.chat_list, function(key, vals)
				{
					if(val.name == vals.name)
					{
						content += '<span class="user_chat_count'+ val.id +'"><b><?php echo '('; ?> ' + vals.total +' <?php echo ')'; ?></b></span>'
					}
					else
					{
						
					}
				});
				
				content += '<div class="pull-right" style="clear:both;"><p style="text-align: right;">';
				
				if(val.chat_online == 'online')
				{
					content += '<span class="circle circle-online circle-lg"></span>';
					content += '</p><p style="font-weight: normal;" for="49"><?php echo 'Online'; ?></p>';
				}
				else
				{
					content += '<span class="circle circle-warning circle-lg"></span>';
					content += '</p><p style="font-weight: normal;" for="49">' + ar_new + '</p>';
				}
				
				
				
				
				content += '</div></a></div>';
				}
				
				//$('time').timeago();
				
			});
			$('.users_list_det').html(content);				 
			 document.getElementById("myForm").style.display = "block";
		  }
		});
   
	}

function closeForm() {
		document.getElementById("myForm").style.display = "none";
	}

</script>

$.ajax({
				type: "post",
				url: "<?php echo base_url(); ?>vendor/fetch_chat_data",
			  
				 data:{'id':id},
				success: function (data)
				{
$('.popup-messages'+id).empty();
var response = jQuery.parseJSON(data);

if(response.final_val == 0)
{
calculate_popups(id);
}
else
{

var content = '';
					$.each(response.res, function(key, val)
					{

var last_time=response.timings_offline[key];

if(val.to_id == id)			
						{
							content += '<p class="chatting_message right" style="width: 100%;display: inline-block;max-width: 200px;background-color: #dbedfe;margin-right: 9px;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: right;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>';
							
							
						}	
						else
						{
							content += '<p class="chatting_message left" style="width: 100%;display: inline-block;max-width: 200px;background-color: white;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;margin-left: 9px;border-color: grey;float: left;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>';
						}
						
											
					});

$('.popup-messages'+id).html(content);
var height = 0;
							$('.popup-messages'+id).each(function(i, value){
								height += parseInt($(this).height());
							});

height += '';

$('.popup-messages'+id).animate({scrollTop: height});
}
}
});

}
			
            //creates markup for a new popup. Adds the id to popups array.
            function register_popup(id)
            {

//setInterval(function(){
//fetch_chat_datas(id);
//}, 1000);
				//$('.user_chat_count'+id).empty();
				
				 
				 $.ajax({
				type: "post",
				url: "<?php echo base_url(); ?>vendor/fetch_chat_data",
			  
				 data:{'id':id},
				success: function (data) {
				
				var response = jQuery.parseJSON(data);
								
							var name=$('.user_name'+id).val();
							for(var iii = 0; iii < popups.length; iii++)
							{   
								//already registered. Bring it to front.
								if(id == popups[iii])
								{
									Array.remove(popups, iii);
								
									popups.unshift(id);
									
									calculate_popups();
									
									
									return;
								}
							}  
						 
							var element = '<div  class="options popup-box chat-popup" style="margin-bottom: 25px;" id="'+ id +'">';
							element = element + '<div class="popup-head" style="background: #485b7f !important;">';
							element = element + '<div class="popup-head-left" >'+ name +'</div>';
							element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div><div style="clear: both"></div></div><div style="background-color: white;overflow-y: scroll;height: 400px;width: 299px;"class="pop_up_chat_msg popup-messages'+ id +'">';
							
							 $.each(response.res, function(key, val)
							 {
								var last_time=response.timings_offline[key];

if(val.to_id == id)			
									{
										element = element + '<p class="chatting_message right" style="width: 100%;display: inline-block;max-width: 200px;background-color: #dbedfe;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: right;margin-right: 9px;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>';
										
										
									}	
									else
									{
										element = element + '<p class="chatting_message left" style="width: 100%;display: inline-block;max-width: 200px;background-color: white;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: left;margin-left: 9px;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>';
									}
				
							 });
							 
							element = element + '</div><div class="popup-text"><input type="hidden" id="chat_user_id" class="form-control chat_user_id'+ id +'" value="'+ id +'"/><input type="hidden" id="chat_user_name" name="chat_user_name" class="form-control chat_user_name'+ id +'" value="'+ name +'"/><input type="text" id="chat_message" onkeydown="search_fun('+ id +',event)" name="chat_message" style="width: 100% !important;height: 30px !important;" placeholder="Type a message then press enter" class="form-control chat_message'+ id +'"/></div></div>';
							
							 document.getElementsByTagName("section")[0].innerHTML = document.getElementsByTagName("section")[0].innerHTML + element;

var height = 0;
							$('.popup-messages'+id).each(function(i, value){
							//alert();
								height += parseInt($(this).height());
							});

height += '';

$('.popup-messages'+id).animate({scrollTop: height});

popups.unshift(id);
									
							calculate_popups(id);
							var height = 0;
							$('.popup-messages'+id).each(function(i, value){
								height += parseInt($(this).height());
							});

height += '';

$('.popup-messages'+id).animate({scrollTop: height});		
								
								
						}
					});	
            }
            
            //calculate the total number of popups suitable and then populate the toatal_popups variable.
            function calculate_popups(id)
            {
                var width = window.innerWidth;
                if(width < 540)
                {
                    total_popups = 0;
                }
                else
                {
                    width = width - 200;
                    //320 is width of a single popup box
                    total_popups = parseInt(width/320);
                }
                
                display_popups(id);
                
				
				 $.ajax({
				type: "post",
				url: "<?php echo base_url(); ?>vendor/fetch_chat_data",
			  
				 data:{'id':id},
				success: function (data)
				{
$('.popup-messages'+id).empty();
var response = jQuery.parseJSON(data);

var content = '';
					$.each(response.res, function(key, val)
					{

var last_time=response.timings_offline[key];

$('.popup-messages'+id).html(content);
var height = 0;
							$('.popup-messages'+id).each(function(i, value){
								height += parseInt($(this).height());
							});

height += '';

$('.popup-messages'+id).animate({scrollTop: height});

}
});
            }
            
            //recalculate when window is loaded and also when window is resized.
           // window.addEventListener("resize", calculate_popups);
           // window.addEventListener("load", calculate_popups);
		
</script>

$.ajax({
				type: "post",
				url: "<?php echo base_url(); ?>vendor/update_unread",
			  
				 data:{'id':ele},
				success: function (data) {
					
				}
					 });
					 
 if(e.key === 'Enter' || code == 13) 
	{

$('.user_chat_count'+ele).empty();
	$('.user_chat_count'+ele).val('');
	
 var chat_message=$('.chat_message'+ele).val();
		var chat_user_id=$('.chat_user_id'+ele).val();
		var to_ids=ele;

$.ajax({
		type: "post",
		url: "<?php echo base_url(); ?>vendor/insert_chat_messages",
	  
		data:{'chat_message':chat_message,'chat_user_id':chat_user_id},
		success: function (data) 
		{
			
		var response=JSON.parse(data);
			$('.chat_message'+ele).val('');
			//$('.chatting_message'+ele).val('');
			$('.popup-messages'+ele).empty();
			var content = '';
			$.each(response.res, function(key, val)
			{
var last_time=response.timings_offline[key];

if(val.to_id == to_ids)			
				{
					content += '<p class="chatting_message right" style="width: 100%;display: inline-block;max-width: 200px;background-color: #dbedfe;margin-right: 9px;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;border-color: grey;float: right;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>';
					
					
				}	
				else
				{
					content += '<p class="chatting_message left" style="width: 100%;display: inline-block;max-width: 200px;background-color: white;padding: 5px;border-radius: 4px;position: relative;border-width: 1px;border-style: solid;margin-left: 9px;border-color: grey;float: left;">'+ val.message +'<span style="font-size: 11px;font-weight: normal;color: gray;float:right;">'+ last_time +'</span></p><br/>';
				}
				
									
			});
$('.popup-messages'+ele).html(content);

var height = 0;
			$('.popup-messages'+ele).each(function(i, value){
			//alert();
				height += parseInt($(this).height());
			});

height += '';

$('.popup-messages'+ele).animate({scrollTop: height});
		}
 });
}
   
}

</script>
<style>
		/* Button used to open the chat form - fixed at the bottom of the page */
		.open-button {
		  background-color: #555;
		  color: white;
		  padding: 9px 13px;
		  border: none;
		  cursor: pointer;
		  opacity: 0.8;
		  position: fixed;
		  bottom: 11px;
		  right: 28px;
		  //width: 280px;
     right: 60px; 
   
    z-index: 9999 !important;
		}
		
		.chat_close
		{
			background:#485b7f;
			display:flex;
			margin-bottom: 10px;
position:fixed;
		}
		
		.chat_close h4
		{
			color:#fff;
			margin-bottom:5px;
			margin-top:5px;
		}
		
		.btn-close
		{
			float:right;
			padding:5px;
			color:#fff;
margin-left: 187px !important;
		
		}
		
		.circle {
			display: inline-block;
			width: 7px;
			height: 7px;
			border-radius: 500px;
			margin: 0 .5em;
			background-color: #ddd;
			vertical-align: baseline;
			border: 2px solid transparent;
		}
		
		.circle-lg {
			width: 11px;
			height: 11px;
		}
		.circle-warning {
			background-color: #ff902b;
		}
		.circle-online {
			background-color: #66bb66;
		}
		
		 @media only screen and (max-width : 540px) 
            {
                .chat-sidebar
                {
                    display: none !important;
                }
                
                .chat-popup
                {
                    display: none !important;
                }
            }
            
			
			/* The popup chat - hidden by default */
			.chat-popup {
			  display: none;
			  
			}

.chat-sidebar
            {
                width: 300px;
                position: fixed;
               height: 79%;
				right: 0px;
				bottom: 0px;
                //padding-top: 10px;
                padding-bottom: 10px;
                border: 1px solid rgba(29, 49, 91, .3);
				background: #fff;
				overflow-y: scroll;
    z-index: 9999;
            }
            
            .sidebar-name 
            {
                padding-left: 10px;
                padding-right: 10px;
                //margin-bottom: 4px;
                font-size: 12px;
				height: 45px;
				border-bottom: 1px solid #ccc !important;
margin-top: 10px;
clear: both;
  
 
            }
            
            .sidebar-name span
            {
                padding-left: 5px;
            }
            
            .sidebar-name a
            {
                display: block;
                height: 100%;
                text-decoration: none;
                color: inherit;
            }
            
            .sidebar-name:hover
            {
                background-color:#e1e2e5;
            }
            
            .sidebar-name img
            {
                width: 32px;
                height: 32px;
                vertical-align:middle;
            }
            
            .popup-box
            {
                display: none;
                position: fixed;
                bottom: 0px;
                right: 220px;
                height: 472px;
                background-color: rgb(237, 239, 244);
                width: 300px;
                border: 1px solid rgba(29, 49, 91, .3);
    z-index: 9999;
            }
            
            .popup-box .popup-head
            {
                background-color: #6d84b4;
                padding: 5px;
                color: white;
                font-weight: bold;
                font-size: 14px;
                clear: both;
            }
            
            .popup-box .popup-head .popup-head-left
            {
                float: left;
            }
            
            .popup-box .popup-head .popup-head-right
            {
                float: right;
                opacity: 0.5;
            }
            
            .popup-box .popup-head .popup-head-right a
            {
                text-decoration: none;
                color: inherit;
            }
           
            .popup-box .popup-messages
            {
                height: 100%;
                overflow : auto;
            }
		.popup-box .popup-text
			{
				padding:5px;
				background: #cfdbe2;
			}

p.left:after
            {
                content: "";
                display: inline-block;
                position: absolute;
                left: -8.5px;
                top: 7px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid white;
            }

p.left:before
            {
                content: "";
                display: inline-block;
                position: absolute;
                left: -9px;
                top: 7px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-right: 8px solid black;
            }

p.right:after
            {
                content: "";
                display: inline-block;
                position: absolute;
                right: -8px;
                top: 6px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 8px solid #dbedfe;
            }

p.right:before
            {
                content: "";
                display: inline-block;
                position: absolute;
                right: -9px;
                top: 6px;
                height: 0px;
                width: 0px;
                border-top: 8px solid transparent;
                border-bottom: 8px solid transparent;
                border-left: 8px solid black;
            }

p.right
            {
                float: right;
                background-color: #dbedfe;
            }
	</style>