1

Facebook のようなチャットボックスを作成しようとしていますが、小さな問題が発生しました。私は次のコードを使用しています (これは単なるテスト コードであるため、あまりきれいではありません)。

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>

問題は、チャットバーに新しいチャットを追加しようとすると、それらを隣り合わせに配置できないことです。誰が助けることができますか？

編集：

だから私はjavascriptコードに変更しました:

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

そして今、それは動作します、ありがとう!

4

2 に答える 2

0

フロートスタイルを追加してみてください。

.chatbox {
  float: right;
}

それをチャットボックスのスタイルに追加します。フロートが他の要素と混同しないようにするために、少し混乱する必要があるかもしれません。あなたは彼らのためにより良い容器を必要とするかもしれません。

本当に楽しくしたい場合は、jQueryから.draggable（）を追加して、チャットバーにスナップさせることができます。その後、チャットの順序を変更できます。

于 2013-02-15T18:16:50.297 に答える
0

スタイルが設定されていて有効でない限り、そのスタイルを使用して要素の右オフセットを取得することはできません。代わりにelement.offsetLeft、ウィンドウ領域のサイズを取得して、これを行う必要があります。

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

ウィンドウサイズはこの関数です。

これが私の機能するバージョンの関数です。

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)はコードに入れられます。
そして、ここにリンクがあります。

于 2013-02-15T18:22:18.727 に答える