聊天室的定位

我正在使用类似于Facebook的聊天室功能。我在定位多个聊天室时遇到问题。聊天室的定位

你看2个chatboxes底部。我附上一个容器的所有聊天框，每个聊天室都被动态地添加到该容器中，并且工作正常。但我提供了一个选项来折叠聊天室，这是我崩溃时发生的情况（第二个聊天室）

标签显示在容器的顶部，但我希望它在底部（如Facebook）。我试过position：绝对的作品，但我不能使用float来追加其他chatboxes（我必须计算位置，并且我尝试了这种方式，结果并不好）。

<div class="chatbox_container" style="position:fixed;bottom:0px;right:0px;z-index:10000;"> 
 

 
    <div class="taprofilechatbox" style="float:right;margin-left:20px;/* vertical-align: bottom; */position: relative;/* top: -1px; */" data-threadid="3a6cc9bd810" data-vuid="66143ccc50"> 
 
    <div class="tachatboxlabel"> 
 
     <img src="/media/usermedia/tvabhinav_3eca38fa3ed80d6/gal/e8cab7c70fc33368e/t_3488db6987a093_80x80.jpg" height="30">abhinav tv <span class="pull-right chatbxclose"><i class="fa fa-times"></i></span> 
 
    </div> 
 
    <div class="tachatboxcont well" style="display: none;"> 
 
     <div class="chatbx_headercontrol"> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-default btn-sm" title="Send Files"><i class="fa fa-paperclip"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Send Images"><i class="fa fa-picture-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Audio Call"><i class="fa fa-phone"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Video Call"><i class="fa fa-video-camera"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Users to Conversation"><i class="fa fa-user-plus"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Smileys"><i class="fa fa-smile-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="View Full Conversation"><i class="fa fa-eye"></i> 
 
      </button> 
 
      <div class="dropdown pull-left"> 
 
      <button class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown"><i class="fa fa-cog"></i> 
 
      </button> 
 
      <ul class="dropdown-menu dropdown-menu-right"> 
 
       <li><a href="#">Mute this conversation</a> 
 
       </li> 
 
       <li><a href="#">Delete this conversation</a> 
 
       </li> 
 
       <li><a href="#">Archive this conversation</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_threads"> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">tests</div> 
 
     <div style="clear:both;"></div> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">hi how are u? i am fine</div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_footercontrol"> 
 
     <textarea placeholder="Type in what you want to chat" class="form-control chatbx_footertarea" data-threadid="3a6cc9bd810"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    
 
    <div class="taprofilechatbox" style="float:right;margin-left:20px;" data-threadid="c12b84157" data-vuid="66143ccc50"> 
 
    <div class="tachatboxlabel"> 
 
     <img src="/media/usermedia/tvvenkat_951120/gal/a6f666f8004c7/t_4f39ebb07d68fa062467280d1cf8_80x80.jpg" height="30">Hello <span class="pull-right chatbxclose"><i class="fa fa-times"></i></span> 
 
    </div> 
 
    <div class="tachatboxcont well"> 
 
     <div class="chatbx_headercontrol"> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-default btn-sm" title="Send Files"><i class="fa fa-paperclip"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Send Images"><i class="fa fa-picture-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Audio Call"><i class="fa fa-phone"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Video Call"><i class="fa fa-video-camera"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Users to Conversation"><i class="fa fa-user-plus"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Smileys"><i class="fa fa-smile-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="View Full Conversation"><i class="fa fa-eye"></i> 
 
      </button> 
 
      <div class="dropdown pull-left"> 
 
      <button class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown"><i class="fa fa-cog"></i> 
 
      </button> 
 
      <ul class="dropdown-menu dropdown-menu-right"> 
 
       <li><a href="#">Mute this conversation</a> 
 
       </li> 
 
       <li><a href="#">Delete this conversation</a> 
 
       </li> 
 
       <li><a href="#">Archive this conversation</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_threads"> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">Holla</div> 
 
     <div style="clear:both;"></div> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">How are u</div> 
 
     <div style="clear:both;"></div> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">hi pa</div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_footercontrol"> 
 
     <textarea placeholder="Type in what you want to chat" class="form-control chatbx_footertarea" data-threadid="c12b84157"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我已经插入单独客舱段没有CSS和其他的东西。如何定位聊天室，使其在折叠状态下显示在底部。

如果代码没有意义，我检查了元素并将动态加载的内容粘贴到代码中。

来源

2015-12-18 Vignesh T.V.

你为什么不能建立一个[MCVE]为什么你添加了这么多不必要的代码使其很难调试？ –

@PraveenKumar：我不知道哪个代码包含原因我不知道问题出在哪里 –

@PraveenKumar：编辑删除代码中的所有JS –

好的，看看我为你做的[mcve]。边框已添加了更好的说明：

* {box-sizing: border-box;} 
 
.chat-container {position: fixed; bottom: 0; right: 0; border: 1px solid #99c;} 
 
.chat-container .chat-box {border: 1px solid #66f; display: inline-block; width: 175px; vertical-align: bottom;} 
 
.chat-container .chat-box .chat-head {background-color: #99f;}

<div class="chat-container"> 
 
    <div class="chat-box"> 
 
    <div class="chat-head">Person Name</div> 
 
    <div class="chat-cont"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur ex totam, quis itaque maiores, aut quam optio nihil nesciunt voluptatibus sit quae, minus officiis ipsa amet expedita eum provident quidem?</p> 
 
    </div> 
 
    </div> 
 
    <div class="chat-box"> 
 
    <div class="chat-head">Person Name (Closed)</div> 
 
    </div> 
 
</div>

我是能够实现你想在简单的三条规则做一个跨浏览器版本。现场看看它。

输出：http://output.jsbin.com/kovoritobo

来源

2015-12-18 12:54:23

测试它..会尽快回复你 –

我通过与你的代码进行交叉检查来得到它。修复是我从聊天框中删除了float：right。它甚至没有这个工作。如果我有这个问题，我就面临所提到的问题 –

我会给你一个简单的答案。无需使用任何东西。

只是删除FLOAT：LEFT来自 “taprofilechatbox DIV”，并添加显示：inline-block的。

作为您的代码，您的“taprofilechatbox DIV”是动态的。只要删除你的内联浮动：对，并添加显示：在线块那里。

你可以感觉一切都会好的。只看到下面给出的片段。

<div class="chatbox_container" style="position:fixed;bottom:0px;right:0px;z-index:10000;"> 
 
    <!--[if lte IE 6]><html class="ie6 no-js"><!--[if gt IE 8]><!--> 
 
    <!--<![endif]--> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes"> 
 
    <meta charset="utf-8"> 
 
    <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <![endif]--> 
 
    <title>Tech Ahoy - Voicing Technology To The World</title> 
 
    <!-- change this div to below div, remove float:right and add DISPLAY:INLINE-BLOCK <div class="taprofilechatbox" style="float:right;margin-left:20px;/* vertical-align: bottom; */position: relative;/* top: -1px; */" data-threadid="3a6cc9bd810" data-vuid="66143ccc50">--> 
 
    <div class="taprofilechatbox" style="display:inline-block;margin-left:20px;/* vertical-align: bottom; */position: relative;/* top: -1px; */" data-threadid="3a6cc9bd810" data-vuid="66143ccc50"> 
 
    <div class="tachatboxlabel"> 
 
     <img src="/media/usermedia/tvabhinav_3eca38fa3ed80d6/gal/e8cab7c70fc33368e/t_3488db6987a093_80x80.jpg" height="30">abhinav tv <span class="pull-right chatbxclose"><i class="fa fa-times"></i></span> 
 
    </div> 
 
    <div class="tachatboxcont well" style="display: none;"> 
 
     <div class="chatbx_headercontrol"> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-default btn-sm" title="Send Files"><i class="fa fa-paperclip"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Send Images"><i class="fa fa-picture-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Audio Call"><i class="fa fa-phone"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Video Call"><i class="fa fa-video-camera"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Users to Conversation"><i class="fa fa-user-plus"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Smileys"><i class="fa fa-smile-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="View Full Conversation"><i class="fa fa-eye"></i> 
 
      </button> 
 
      <div class="dropdown pull-left"> 
 
      <button class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown"><i class="fa fa-cog"></i> 
 
      </button> 
 
      <ul class="dropdown-menu dropdown-menu-right"> 
 
       <li><a href="#">Mute this conversation</a> 
 
       </li> 
 
       <li><a href="#">Delete this conversation</a> 
 
       </li> 
 
       <li><a href="#">Archive this conversation</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_threads"> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">tests</div> 
 
     <div style="clear:both;"></div> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">hi how are u? i am fine</div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_footercontrol"> 
 
     <textarea placeholder="Type in what you want to chat" class="form-control chatbx_footertarea" data-threadid="3a6cc9bd810"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    var mychatbox = $('.taprofilechatbox[data-threadid="3a6cc9bd810"]'); /*if(window.totchatbox==1) { rpos=150; } else { rpos=(window.totchatbox*150)+130; } mychatbox.css("right",rpos);*/ 
 
    var loadobj = new JS_LOADER(); 
 
    var tarea = $('.chatbx_footertarea[data-threadid="3a6cc9bd810"]'); 
 
    tarea.on("keyup", function(e) { 
 
     var mytarea = $(this); 
 
     if (e.keyCode == 13 && !e.shiftKey) { 
 
     e.preventDefault(); 
 
     var themsg = mytarea.val(); 
 
     console.log("SENT:" + themsg); 
 
     var tid = "3a6cc9bd810"; 
 
     var uid = "66143ccc50"; 
 
     loadobj.ajax_call({ 
 
      url: "/request_process.php", 
 
      method: "POST", 
 
      data: { 
 
      mkey: "tbx_threadmsg", 
 
      tid: tid, 
 
      uid: uid, 
 
      msg: themsg 
 
      }, 
 
      cache: false, 
 
      success: function(data) { 
 
      mytarea.val(""); 
 
      console.log("MSG SENT"); 
 
      } 
 
     }); 
 
     return false; 
 
     } else if (e.keyCode == 13 && e.shiftKey) { 
 
     process_tarea(mytarea); 
 
     } 
 
    }); 
 
    </script> 
 
    <!--[if lte IE 6]><html class="ie6 no-js"><!--[if gt IE 8]><!--> 
 
    <!--<![endif]--> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes"> 
 
    <meta charset="utf-8"> 
 
    
 
    <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <![endif]--> 
 
    <title>Tech Ahoy - Voicing Technology To The World</title> 
 
    <!--change this div to below div, remove float:right and add DISPLAY:INLINE-BLOCK <div class="taprofilechatbox" style="float:right;margin-left:20px;" data-threadid="c12b84157" data-vuid="66143ccc50">--> 
 
    <div class="taprofilechatbox" style="display:inline-block;margin-left:20px;" data-threadid="c12b84157" data-vuid="66143ccc50"> 
 
    <div class="tachatboxlabel"> 
 
     <img src="/media/usermedia/tvvenkat_951120/gal/a6f666f8004c7/t_4f39ebb07d68fa062467280d1cf8_80x80.jpg" height="30">Hello <span class="pull-right chatbxclose"><i class="fa fa-times"></i></span> 
 
    </div> 
 
    <div class="tachatboxcont well"> 
 
     <div class="chatbx_headercontrol"> 
 
     <div class="btn-group"> 
 
      <button class="btn btn-default btn-sm" title="Send Files"><i class="fa fa-paperclip"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Send Images"><i class="fa fa-picture-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Audio Call"><i class="fa fa-phone"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Video Call"><i class="fa fa-video-camera"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Users to Conversation"><i class="fa fa-user-plus"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="Add Smileys"><i class="fa fa-smile-o"></i> 
 
      </button> 
 
      <button class="btn btn-default btn-sm" title="View Full Conversation"><i class="fa fa-eye"></i> 
 
      </button> 
 
      <div class="dropdown pull-left"> 
 
      <button class="dropdown-toggle btn btn-default btn-sm" data-toggle="dropdown"><i class="fa fa-cog"></i> 
 
      </button> 
 
      <ul class="dropdown-menu dropdown-menu-right"> 
 
       <li><a href="#">Mute this conversation</a> 
 
       </li> 
 
       <li><a href="#">Delete this conversation</a> 
 
       </li> 
 
       <li><a href="#">Archive this conversation</a> 
 
       </li> 
 
      </ul> 
 
      </div> 
 
     </div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_threads"> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">Holla</div> 
 
     <div style="clear:both;"></div> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">How are u</div> 
 
     <div style="clear:both;"></div> 
 
     <img alt="" src="" width="50" height="50" class="convbx_cthumbimg pull-right"> 
 
     <div class="convbx_bubble_right pull-right">hi pa</div> 
 
     <div style="clear:both;"></div> 
 
     </div> 
 
     <div class="chatbx_footercontrol"> 
 
     <textarea placeholder="Type in what you want to chat" class="form-control chatbx_footertarea" data-threadid="c12b84157"></textarea> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    var mychatbox = $('.taprofilechatbox[data-threadid="c12b84157"]'); /*if(window.totchatbox==1) { rpos=150; } else { rpos=(window.totchatbox*150)+130; } mychatbox.css("right",rpos);*/ 
 
    var loadobj = new JS_LOADER(); 
 
    var tarea = $('.chatbx_footertarea[data-threadid="c12b84157"]'); 
 
    tarea.on("keyup", function(e) { 
 
     var mytarea = $(this); 
 
     if (e.keyCode == 13 && !e.shiftKey) { 
 
     e.preventDefault(); 
 
     var themsg = mytarea.val(); 
 
     console.log("SENT:" + themsg); 
 
     var tid = "c12b84157"; 
 
     var uid = "66143ccc50"; 
 
     loadobj.ajax_call({ 
 
      url: "/request_process.php", 
 
      method: "POST", 
 
      data: { 
 
      mkey: "tbx_threadmsg", 
 
      tid: tid, 
 
      uid: uid, 
 
      msg: themsg 
 
      }, 
 
      cache: false, 
 
      success: function(data) { 
 
      mytarea.val(""); 
 
      console.log("MSG SENT"); 
 
      } 
 
     }); 
 
     return false; 
 
     } else if (e.keyCode == 13 && e.shiftKey) { 
 
     process_tarea(mytarea); 
 
     } 
 
    }); 
 
    </script> 
 
</div>

来源

2015-12-18 13:23:05

聊天室的定位

回答

相关问题