Learn VBA & Macros in 1 Week!

JavaScript - Logistics Of Handling Multiple Im Chat Boxes Javascript/css

Full Excel VBA Course - Beginner to Expert

Logistics Of Handling Multiple Im Chat Boxes Javascript/css	View Content

Hi,

I think the problem I am having is an event not a css issue, so I hope I posted in the right forum.

What I am trying to achieve is the capability to provide multiple instant chat messages. I have the php/ajax for the instant messages, what I am not sure is how to be able to view multiple chats.

What I have started to do is limit it to five possible instant chat messages and have five divs in place with visibility hidden. It works fine for one.

But if someone clicks on the name of a person they wish to chat with, the way I am currently doing it, I would need to find out:
1. which divs were free to start an instant chat in (I have no idea how to do this with divs)?
2. Having identified it I will need to change the visibility so it suddenly becomes visible

I guess firstly am I going about this the right way to be able to host/view multiple chats?

My code is below.
Main Page
PHP Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitchat').live('click',function(){
    var data = $('#chatmessage').serialize();
    $.post ('insertChat.php',data, function(){
            $('#chatmessage').each (function(){
                this.reset();
            });
                return false;
        });
    });
});
</script>

<script type="text/javascript">
function loadChat(File,ID,Msg,TID,Cile){
loadXMLDoc1(File,ID,Msg);
delay = setTimeout(function(){loadChatRefresh(Cile,TID,Msg)},5000);
}
</script>

<script type="text/javascript">
function loadChatRefresh(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
    try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
     timer = setInterval(function(){loadChatRefresh(File,ID,Msg)},3000);
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>

<script type="text/javascript">
function loadXMLDoc1(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
    try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>

<body>

            <h1>Test</h1>

<?php
include("dbconnect.php");

            $result = mysql_query("SELECT *, signedin.PId as SIPId FROM signedin INNER JOIN friends
            ON signedin.PId=friends.invited OR signedin.PId=friends.invitee
            WHERE ((friends.invitee={$_SESSION['MyPId']} AND friends.statae='accepted') OR (friends.invited={$_SESSION['MyPId']} AND friends.statae='accepted'))
            AND signedin.LogOff IS NULL AND signedin.PId !={$_SESSION['MyPId']}");

            while($row = mysql_fetch_array($result)){
                $mugwort= $row['SIPId'] . ';';
                }

$motherwort=explode(';',$mugwort);
foreach ($motherwort as $mulberry){

            $result = mysql_query("SELECT * FROM allusers
            WHERE PId='{$mulberry}'");

            while($row = mysql_fetch_array($result)){
                $nosegay=rand(). rand(). rand(). rand(). rand();
                $nightshade="{$_SESSION['MyPId']};{$mulberry};{$nosegay}";
                echo '<div class="img"><img src="thumbs/' . $row['pphoto'] . '" height="80px" width="80px" onclick="loadChat(\'chat.php\',\'chat1\',\'olivier=' . urlencode($nightshade) . '\',\'chatdisplay\',\'getDisplayChat.php\')";><div class="desc">' . $row['fullname'] . '</div></div><br />';
                }

}

            echo '<br /><div class="clear"></div><br /><br />';

?>
<div class="chat1" id="chat1"></div>
<div class="chat2" id="chat2"></div>
<div class="chat3" id="chat3"></div>
<div class="chat4" id="chat4"></div>
<div class="chat5" id="chat5"></div>
<br />
<br />

Chat Page
PHP Code:

<?php
include("dbconnect.php");

    $blossom=explode(';',$_POST['olivier']);
    $periwinkle=$blossom[0];
    $peppermint=$blossom[1];
    $pine=$blossom[2];

    global $periwinkle;
    global $peppermint;
    global $pine;

    echo '<div class="chatbanner" width="100%">
    <table width="100%">
    <tr>
    <td width="90%">';
        echo '<center><b>This Name</b></center>';
    echo '</td>
    <td width="5%">';
        echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="&#8722">';
    echo '</td>
    <td width="5%">';
        echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="X">';
    echo '</td>
    </tr>
    </table></div>';
    echo '<div class="chattext" id="chatdisplay" overflow="scroll">';

            $result = mysql_query("SELECT * FROM chat INNER JOIN allusers
            ON chat.chatter=allusers.PId
             WHERE (chat.chatter={$periwinkle} AND chat.chattee={$peppermint}) OR (chat.chatter={$peppermint} AND chat.chattee={$periwinkle})
            AND ref={$pine} ORDER BY chat.date DESC");

            while($row = mysql_fetch_array($result)){
                echo '<table width="100%"><tr><td width="20%"><img src="thumbs/' . $row['pphoto'] . '" width="40px" height="40px"></td>';
                echo '<td width="80%" valign="top">' . nl2br($row['message']) . '</td></tr></table><hr />';
                }

    echo '</div><br /><br />';
    echo '<form action="insertChat.php" method="post" name="chatmessage" id="chatmessage">
        <input type="text" class="hidden" name="from" id="from" value="' . $_SESSION['MyPId'] . '">
        <input type="text" class="hidden" name="to" id="to" value="';
        echo ($_SESSION['MyPId']==$peppermint) ? $periwinkle : $peppermint . '">
        <input type="text" class="hidden" name="ref" id="ref" value="' . $pine . '">';

    echo '<div class="textchat">';
    echo '<textarea cols="21" row="5" name="message" id="message"></textarea>';
    echo '<input type="button" name="submitchat" id="submitchat" value=" "></div></form>';

?>

Style Sheet:
Code:

div.chat1 {
	position:fixed;
	bottom:1px;
	right:50px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}
	
div.chat2 {
	position:fixed;
	bottom:1px;
	right:260px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat3 {
	position:fixed;
	bottom:1px;
	right:470px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat4 {
	position:fixed;
	bottom:1px;
	right:680px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat5 {
	position:fixed;
	bottom:1px;
	right:890px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

.chatbanner {
	background-color:#4b0082;
	text-decoration:none; 
	color:white;
	}

.textchat {
	position:fixed;
	bottom:0.5px;
	}

.chatbutton {
	position:fixed;
	bottom:0.5px;
	right:0.5px;
	border:none;
	}

If I have left anything out which might be helpful please let me know. I just got stuck on the logistics side of figuring out how was the best way to make this happen, any pointers would be great.

Full Excel VBA Course - Beginner to Expert

How Do I Use Javascript To Show Multiple Div Boxes

Similar Tutorials

JavaScript - Logistics Of Handling Multiple Im Chat Boxes Javascript/css

Logistics Of Handling Multiple Im Chat Boxes Javascript/css

Similar Tutorials

How Do I Use Javascript To Show Multiple Div Boxes

Question About Chat-boxes

Program In Javascript To Select Multiple Text Boxes

Form Handling, Multiple Pages, Different Destinations And Session Variables

Javascript Datetime Handling

Javascript Coding For Perl Chat Question

Javascript Craps Out While Handling Events

Help Change Value Of Multiple Text Boxes

Random Selects Into Multiple Boxes?!?!

Open Multiple Dialog Boxes

Javascript Play Sound Unfocusing Chat Msg Textbox

Multiple Dropdown Boxes To Call Function

Multiple Sets Of Dynamic List Boxes

Modification Of Multiple Dynamic Combo Boxes

Managing Multiple Overlay Boxes (named Windows?)

Javascript Using Text Boxes

Javascript Select Boxes

Prompt Boxes With Javascript

Input Boxes In Javascript

Need Help. Javascript Select Boxes Using Arrays