javascript chatbox / messenger script

Question

I'm trying to write a facebook like chatbox, but i've encountered a small problem. I'm using the following code (it's only test code, so it's not really clean):

css code:

#messenger {
  position: fixed;
  bottom: 0px;
  right: 10px;
  width: 200px;
  height: 300px;
  z-index: 4;
  background-color: #ECECEC;
  border: 1px solid #000;
}
#messenger.p {
  text-align: right;
}
#contacts {
  margin: 5px 5px 5px 5px;
}
#chatspace {
  position: fixed;
  bottom: 0px;
  right: 240px;
  height: 20px;
  left: 20px;
  background-color: #ECECEC;
  border: 1px solid #000;
  z-index: 4;
}
.chatbox {
  position: absolute;
  bottom: 0px;
  width: 200px;
  height: 200px;
  z-index: 4;
  background-color: #ECECEC;
  border: 1px solid #000;
}

html/javascript code:

<script type="text/javascript">
var i = 0;

function oc_chatbox() {

  if (i == 0) {
  document.getElementById('contacts').style.visibility = 'hidden';
  document.getElementById('messenger').style.height = '20px';
  i = 1;
  }

  else {
  document.getElementById('contacts').style.visibility = 'visible';
  document.getElementById('messenger').style.height = '300px';
  i = 0;
  }
}

function new_chat(userid) {
  var new_right;
  new_right = document.getElementById('messenger').style.right;
  //alert('old value: '+ new_right);
  new_right += 20;
  //alert('New value of right: '+ new_right);
  document.getElementById('chatspace').innerHTML = '<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>';
  //document.write('<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>');
}
</script>
<div id="chatspace"></div>
<div id="messenger">
 <p><a href="#" onclick="oc_chatbox();">Collapse</a></p>
 <div id="contacts">
 <ul>
  <li><a href="#" onclick="new_chat('contact_a');">contact A</a></li>
 </ul>
 </div>
</div>

the problem is, that when I try to add new chats to the chatbar, i can't seem the place them next to each other. anyone who can help ?

EDIT:

so i changed to javascript code to:

var last = null;
function new_chat(userid) {
  if(userid==null)
    userid = "user666";
  var new_right;
  var margin = 10;
  var messenger = window.last==null?document.getElementById('messenger'):window.last;  //Take the messenger or the last added chat
  new_right = document.body.clientWidth-messenger.offsetLeft;      //Compute the window size
  console.log(new_right);                                //Log the number
  new_right += margin;                                   //keep spaces between divs

  var newChat = document.createElement("div");           //DOM create DIV
  newChat.id = userid;
  newChat.className = "chatbox shadow";
  newChat.style.right = new_right+"px";
  newChat.innerHTML = '<p>'+userid+'</p><p><textarea></textarea></p>';
  window.last = newChat;  //Remember whichever is last
  document.body.appendChild(newChat);
}

and now it works, thanks !

You should use `document.createElement` and `HTMLElement.appendChild` methods to create elements and add them to HTML. Its more clear and easier to debug. — Tomáš Zato, Feb 15 '13 at 18:16
You can see simple example of use in my reply. It is important to think of DOM elements as of `objects` and manupulate them as `objects` not strings. — Tomáš Zato, Feb 15 '13 at 18:35
how can I prevent opening multiple windows for a single contact ? — , Feb 17 '13 at 01:39
This is much different question. Well, I'd create an array of active contacts and loop through it upon each attempt to open new contact window. In the `for`, such `if` should be: `if(openContacnts[i]==userid) return false` — Tomáš Zato, Feb 17 '13 at 02:33
Thanks, i already had the idea of using an array for that, but i'm only an novice javascript programmer, i'm expert in php, so it's a bit of a change in code. but yes, i used your code sample, and i got it integrated and working now, thanks again! — , Feb 17 '13 at 03:17
thanks, but i already added: var open_chats = new Array(); if (jQuery.inArray(userid, open_chats) === -1) { execute code to create chatbox } — , Feb 17 '13 at 12:45
Use `[]` instead of `new Array`. [It is faster](http://stackoverflow.com/questions/7375120/why-arr-is-faster-than-arr-new-array). — Tomáš Zato, Feb 17 '13 at 13:39

score 0 · Answer 1 · answered Feb 15 '13 at 18:16

You should try adding a float style.

.chatbox {
  float: right;
}

Add that to your chatbox styles. You may need to mess around a bit to make sure the float doesn't mess with your other elements. You may need a better container for them.

If you want to get really fun, you can add .draggable() from jQuery, and you can have them snap to your chat bar. You can then change the order of your chats.

Tomáš Zato · Accepted Answer · 2013-02-15T18:34:38.530

You cannot get an element right offset using its style, unlest the style is set and valid. Instead you must get element.offsetLeft and size of window area and do this:

new_right = windowSize()[0]-messenger.offsetLeft;

Where window size is this function.

Here is my, working, version of your function:

var last = null;
function new_chat(userid) {
  if(userid==null)
    userid = "user666";
  var new_right;
  var margin = 20;
  var messenger = window.last==null?document.getElementById('messenger'):window.last;  //Take the messenger or the last added chat
  new_right = windowSize()[0]-messenger.offsetLeft;      //Compute the window size
  console.log(new_right);                                //Log the number
  new_right += margin;                                   //keep spaces between divs

  var newChat = document.createElement("div");           //DOM create DIV
  newChat.id = userid;
  newChat.className = "chatbox";
  newChat.style.right = new_right+"px";
  window.last = newChat;  //Remember whichever is last
  document.body.appendChild(newChat);
}

You may get errors if console is not defined in your brouwser. But in such case you should take a better browser. Normally, the if(console!=null) is put in code.
And here is the link.

very much appreciated, i've got enough hints and tips to get working on this :D — , Feb 15 '13 at 18:39
Take a note that I do append the chat boxes to `document.body` not to the `chatspace` because the should be on the same level as the `messenger`. — Tomáš Zato, Feb 15 '13 at 18:41

javascript chatbox / messenger script

2 Answers2