javascript chatbox/messenger script

Question

Я пытаюсь написать facebook как chatbox, но я столкнулся с небольшой проблемой. Я использую следующий код (это только тестовый код, так что это на самом деле не чистый):

CSS код:

#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 код:

<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> 

проблема , что, когда я пытаюсь добавить новые чаты в чат-бар, я не могу представить их рядом друг с другом. Кто может помочь?

EDIT:

так я изменил к яваскрипту коду:

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); 
} 

и теперь он работает, спасибо!

Answer 1

Вы не можете получить правостороннее смещение элемента, используя его стиль, в отличие от стиля, который установлен и действителен. Вместо этого вы должны получить element.offsetLeft и размер области окна и сделать это:

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

Где размер окна this 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); 
} 

Вы можете получить ошибки, если console не определен в вашем брошюре. Но в таком случае вы должны взять лучший браузер. Обычно код if(console!=null) помещается в код.
And here is the link.

Answer 2

Вам следует попробовать добавить стиль поплавка.

.chatbox { 
    float: right; 
} 

Добавьте это к вашим стилям общения. Возможно, вам придется немного потрудиться, чтобы убедиться, что поплавок не путается с вашими другими элементами. Вам может понадобиться лучший контейнер для них.

Если вы хотите получить удовольствие, вы можете добавить .draggable() из jQuery, и вы можете привязать их к панели чата. Затем вы можете изменить порядок своих чатов.