jquery - 实时聊天框的 CSS 对齐问题

Question

我想在底部的每个网页中显示实时聊天框。我做到了，但校准工作不正常。我想让它类似于这个实时聊天框示例:( https://www.tawk.to/testimonials/ )。请帮助我如何做到这一点。

我的代码是:https://jsfiddle.net/fn77d0de/2/

// JavaScript Document

var username = "";

function send_message(bot_response) {
  var prevState = $("#container").html();

  console.log(prevState.length);

  if (prevState.length > 8) {
    prevState = prevState + "<br>";
  }

  $("#container").html(prevState + "<span class='current_message'>" + "<span class='chatBot'>Chatbot: </span>" + bot_response + "</span>");
  $("#container").scrollTop($("#container").prop("scrollHeight"));
  $(".current_message").hide();
  $(".current_message").delay(500).fadeIn();
  $(".current_message").removeClass("current_message");
  //$("#container").html("<span class='chatBot'>Chatbot: </span>" + message );
}

function get_userName() {
  //send_message("Hello, what is your name?");

  username = "${outParams.userName}";
  send_message("Nice to meet you " + username + ", how may can may I help you.");
}

function ai(newMessage) {

  var id = "1";
  var path = "http://localhost:8080/vfim/chatService.do";

  if (username.length < 1) {
    username = newMessage;
    send_message("Nice to meet you " + username + ", how are you doing?");
  } else if (newMessage.indexOf("how are you") >= 0) {
    send_message("Thanks, I am good!");
  } else if (newMessage.indexOf("time") >= 0) {
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    send_message("Current time is: " + h + ":" + m);
  } else {
    $.post(path,
      {
        userMessage: newMessage
      },
      function(data) {
        //alert("inside ajax"+data);
        send_message(data);
      });

    /* $.get(path,function(data){
                    console.log("no match");
                    console.log(data);
                    send_message(data);
    }); */
  }
}

$(function() {
  $.ajax({
    url: "chatWindow.html",
    type: 'GET',
    success: function(data) {

      $('body').append(data);
      //$('#content').html($(data).find('#content').html());
      $('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
      var logged_in = false;
      $(".pageTitleHeader").click(function() {
        logged_in = !logged_in;
        checkLogin();
      });

      function checkLogin() {
        if (logged_in)
          $(".contentBox").show();
        else
          $(".contentBox").hide();
      }

    }
  });

  get_userName();
  $("#textarea").keypress(function(event) {
    if (event.which == 13) {
      if ($("#enter").prop("checked")) {
        console.log("enter pressed");
        $("#send").click();
        event.preventDefault();
        //$("#textarea").val("");
      }
    }
  });
  $("#send").click(function() {

    var userName = "<span class='uname'>You: </span>";
    var latestMessage = $("#textarea").val();
    $("#textarea").val("");
    var prevState = $("#container").html();
    //console.log(prevState.length);
    if (prevState.length > 1) {
      prevState = prevState + "<br>";
    }
    $("#container").html(prevState + userName + latestMessage);
    $("#container").scrollTop($("#container").prop("scrollHeight"));
    ai(latestMessage);
  });
});

setTimeout(function() {
  $("#live-chat").css({
    "display": "block"
  });
}, 900); // 30 seconds in MS

// Store our panel into a variable.

var $myPanel = $("#live-chat");
// Get the height of the panel dynamically.
var $myPanelHeight = parseInt($myPanel.height());
// Immediately set the opacity to 0 - to hide it and set its bottom to minus its height.
$myPanel.css({
  "opacity": 0,
  "bottom": "-" + $myPanelHeight + "px"
});
// Set a timeout for the panel to slide and fade in.
setTimeout(function() {
  $myPanel.animate({
    // The CSS properties we want to animate (opacity and bottom position).
    opacity: 1,
    bottom: '0'
  }, 2000, function() {
    // Animation complete.
    // You can put other code here to do something after it has slid-in.
  });
}, 30000); // 30 seconds in MS

function getScripts(scripts, callback) {
  var progress = 0;
  scripts.forEach(function(script) {
    $.getScript(script, function() {
      if (++progress == scripts.length) callback();
    });
  });
}

body {
  margin: 0;
  background-color: #f2f2f2;
  font-family: arial, sans-serif;
  font-weight: bold;
}

#header {
  width: 100%;
  height: 60px;
  background-color: #333;
  box-shadow: 0px 4px 2px #333;
}

#header>h1 {
  width: 1024px;
  margin: 0px auto;
  color: white;
}

#container {
  width: 1024px;
  height: 400px;
  margin: 0px auto;
  margin-top: 20px;
  background-color: white;
  border: 1px solid #333;
  overFlow: scroll;
}

#controls {
  width: 1024px;
  margin: 0px auto;
}

#textarea {
  resize: none;
  width: 940px;
}

#send {
  font-size: 24px;
  position: absolute;
}

.uname {
  color: blue;
  font-weight: bold;
}

.chatBot {
  color: green;
  font-weight: bold;
}

#live-chat {
  position: absolute;
  bottom: 0px;
  right: 0px;
  /*   width: 200px;
    
        height: 100px;*/
  z-index: 5;
  background: #789;
  border-radius: 5px 5px 0 0;
  padding: 10px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>
<body>
  <a href="page1.html">Page1</a>
  <a href="page2.html">Page2</a>
  <a href="page3.html">Page3</a>
  <div id="live-chat">
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
      <tr class="livepageTitle">
        <td width="50%" class="maincurve" scope="col">
          <h1 class="pageTitleHeader">Live Chat</h1>
        </td>
        <td width="50%" class="maincurvecls" scope="col">
          <table border="0" align="right" cellpadding="0" cellspacing="0" id="tblPageContent">
            <tr>
              <!-- BODY STARTS -->
              <td height="31" align="right" valign="middle" nowrap class="innerPageTopLeftBGWithText">
                <dt:timeZone id="IST">IST</dt:timeZone>
                <dt:format pattern="dd-MMM-yyyy [hh:mm a z]" timeZone="IST">
                  <dt:currentTime />
                </dt:format>
                &nbsp;&nbsp;</td>

              <!--                                                                        <td width="14" height="31" align="right" valign="middle"><a href="#" title="Help" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"><img src="/sbijava/images/help_icon.jpg" alt="Help" width="14" height="13" border="0" align="middle"></a></td> -->

              <!--                                                                        <td width="29" height="31" align="right" valign="middle" class="helpAndPrintLinks" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"><a href="#" title="Help">Help</a>&nbsp;&nbsp;</td> -->
            </tr>
            <!-- BODY ENDS -->
            <!-- FOOTER STARTS -->
            <!-- FOOTER ENDS -->
          </table>
        </td>
      </tr>
      <!-- Tab starts -->
      <tr class="contentBox">
        <td colspan="2" align="left" valign="top" scope="row" class="pageContentBG">
          <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tabtblbrdr">
            <!-- <tr>
                 <td colspan="6" class="innerPageSectionHeading">Select the Date Range </td>
        </tr> -->
            <tr>
              <td align="left" width="30%">
                <!--         <div id="header">
                       <h1>jQuery Chatbot v. 1.0</h1>
                       </div> -->
                <div id="container"> </div>
                <div id="controls">
                  <textarea id="textarea" placeholder="Enter your message here..."></textarea>
                  <button id="send">Send</button>
                  <br>
                  <input checked type="checkbox" id="enter">
                  <label>Send on enter</label>
                </div>
              </td>
            </tr>
          </table>
          <br>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

Answer 1

好的，让我首先告诉您为什么这不起作用。原因有很多。

导致此中断的具体样式如下。

 #controls {
   width: 1024px; /* This width */
   margin: 0px auto;
 }

 #textarea {
    resize: none;
    width: 940px; /* This width */
 }
 #container {
    width: 1024px; /* This width */
    height: 400px;
    margin: 0px auto;
    margin-top: 20px;
    background-color: white;
    border: 1px solid #333;
    overFlow: scroll;
}

您可以在这里看到，在您使用的众多类中，宽度非常大。您也使用过表格，我不太清楚为什么。不需要它们，尤其是对于您正在从事的工作。我已经把所有这些都去掉了，至于你需要什么，你可以用纯 css 来实现。

还有更多我想改变的，但这个答案是专门解决你关于对齐的问题。您可以在下面找到我的更改。如果您对我所做的有任何疑问，我很乐意解释。

    #live-chat {
        position: absolute;
        bottom: 0px;
        right: 20px;
        width: 300px;
        height: auto;
        z-index: 5;
        background: #789;
        border-radius: 5px 5px 0 0;
        padding: 10px;
        display: block;
        box-sizing: border-box;
    }
        #send {
        font-size: 24px;
        margin-top: 10px;
    }
        #textarea {
        resize: none;
        width: 100%;
    }

        <a href="page1.html">Page1</a>
        <a href="page2.html">Page2</a>
        <a href="page3.html">Page3</a>

        <div id="live-chat">
            <h1 class="pageTitleHeader">Live Chat</h1>
            <!-- 
            <dt:timeZone id="IST">IST</dt:timeZone>
            <dt:format pattern="dd-MMM-yyyy [hh:mm a z]" timeZone="IST">
                <dt:currentTime />
            </dt:format> -->

            <a href="#" title="Help" onClick="helpWindow('corporate/admin/admin_ma_accrts_add.htm')"><img src="/sbijava/images/help_icon.jpg" alt="Help" width="14" height="13" border="0" align="middle"></a>

            <textarea id="textarea" placeholder="Enter your message here..."></textarea>
            <button id="send">Send</button>

            <input checked type="checkbox" id="enter">

        </div>