Question

我需要了解为什么这不起作用？

JQuery：

var html = '<div id="messages2" class="messageDisplay">'+message+'</div>';
    $("#allMessages").append(html);

html：

<div id="messages" class="messagePersonBox shadow">
        <span class="usersname" name="receiver"> '.$Username.'</span>
<hr style="margin-top:22px">
<div id="allMessages" style="margin-top: 180px;"></div>
<input type="text" id="messagetosend" name="message" class="messagetype" placeholder="Type a message..."><span id="send" class="messageSend">↩</span>

</div>

这会追加项目，但项目不会向上移动。我希望它固定在底部，但我希望一切都向上移动。我不确定我的代码有什么问题。我认为这与我的CSS有关，但我不确定。

Css

.messageBox {
    margin-left: -83.5%;
    top: -35px;
    position: relative;
}
.messagePersonBox{
   width: 14%;
   height: 37%;
   background-color: white;
   display: block;
   box-shadow: 5px 10px #888888;
   position: fixed;
   left: 74%;
   bottom: 0;
   border-radius: 25px;
}
.shadow {
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
.messageSend{
    margin-left: 12.9%;
    cursor: pointer;
    position: fixed;
    bottom: 15px;

}
.usersname {
    position: absolute;
    margin-left: 11%;
    margin-top: 1px;
}
.messageType{
    border-radius: 25px;
    padding: 7px 8px;
    bottom: 12px;
    position: fixed;
    margin-left: 41px;
}
.messageDisplay {
    position: relative;
    margin-left: 40%;
    top: 58%;
    margin-bottom: 10px;
    width: 132px;
    background-color: lightblue;
    border-radius: 25px;
    padding: 1px 14px;

}

Answer 1

感谢这些jsfiddle链接，我找出了问题的答案

jsfiddle http://jsfiddle.net/KGfG2/

其他js小提琴 http://jsfiddle.net/5ucD3/13/

jquery

$(document).ready(function(){
    $('.allMessages').scrollTop($('.allMessages')[0].scrollHeight);


    $("#send").on('click',function(){


    var receiver = $('#messages span[name=receiver]').text();
    var sender = getCookie('Username');
    var message = $('#messages').find('input[name=message]').val();


       $.post("../Admin/Users/sendmessage.php", { 
    receiver: receiver,
    sender: sender,
    message: message

     },
    function() {
       var html = '<div id="messages2" class="messageDisplay">'+message+'</div>';
        $("#allMessages").append(html);
         $('#allMessages').animate({scrollTop: $('#allMessages').prop("scrollHeight")}, -100);

    });

})
})

css

.messageBox {
        margin-left: -83.5%;

        top: -35px;
        position: relative;
    }
    .allMessages{
        width: 97%;
        overflow-x: auto;
        height: 79%;
}
    .messagePersonBox{
       width: 14%;
       overflow-x: auto;
       height: 37%;
       background-color: white;
       display: block;
       box-shadow: 5px 10px #888888;
       position: fixed;
       left: 74%;
       bottom: 0;
       border-radius: 25px;
    }
    .shadow {
       -moz-box-shadow:    inset 0 0 10px #000000;
       -webkit-box-shadow: inset 0 0 10px #000000;
       box-shadow:         inset 0 0 10px #000000;
    }
    .messageSend{
        margin-left: 12.9%;
        cursor: pointer;
        position: fixed;
        bottom: 15px;

    }
    .usersname {
        position: absolute;
        margin-left: 11%;
        margin-top: 1px;
    }
    .messageType{
        border-radius: 25px;
        padding: 7px 8px;
        bottom: 12px;
        position: fixed;
        margin-left: 41px;
    }
    .messageDisplay {
        position: relative;
        margin-left: 40%;
        top: 58%;
        margin-bottom: 10px;
        width: 132px;
        background-color: lightblue;
        border-radius: 25px;
        padding: 1px 14px;

    }

php / html代码

echo '<div id="messages" class="messagePersonBox shadow">
        <span class="usersname" name="receiver"> '.$Username.'</span>
<hr style="margin-top:22px">
<div id="allMessages"class="allMessages">
';



$sql2 = "SELECT * FROM messages WHERE Sender = '$Myself'";
$result2 = $conn->query($sql2);
    // output data of each row
    while($row = $result->fetch_assoc()) {

  if($result2->num_rows > 0) {

            if($row = $result2->fetch_assoc()) {
        $Sender = $row['Sender'];
        $Message = $row['Message'];
        $Receiver = $row['Receiver'];

}
}
    // to get total messages
$totalmessages = mysqli_num_rows($result);


    echo '<div id="messages2" class="messageDisplay">'.$Message.'</div>';



    }



// Typing part of message
echo '</div>
<input type="text" id="messagetosend" name="message" class="messagetype" placeholder="Type a message..."><span id="send" class="messageSend">↩</span>

</div>

 ';

帮助我们将滚动条设置为自动位于底部，然后附加新项时，我对其进行了动画处理，并以@ControlAltDel所说的滚动高度对内容进行了动画处理，但我将其反转了，这样就可以了将值设为负数，则向上而不是向下。

您如何追加物品并使物品向上移动

1 个答案: