Добавить текст в конец div (или другого элемента) - эмуляция консоли чата
У меня есть div, который должен собирать текст, когда текст вводится в поле ввода (сейчас он просто воспроизводит ввод, но позже он должен давать полуинтеллектуальные ответы).
Я хочу, чтобы текст появлялся внизу div, в темном конце градиента. Я хочу, чтобы свежий текст всегда был внизу, а старый текст поднимался в серый цвет верхней области прокрутки.In other words, I'd like to reach the effect like in a terminal or on a chat console.
Страница находится здесь:http://mindseyetutoring.com/interrogate.html
Вот мой код (я устраню аспект ajax, чтобы минимально представить проблему):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="interroStyle.css">
<script src="jquery/jquery.js"></script>
<script>
function process(){
$('#userInput').keypress(function(e){
if (e.keyCode == 13){
var userTxt = $("#userInput").val();
$("#prisonerResponse").html(userTxt);
}
})
}
</script>
</head>
<body onload = "process()">
<p id="prisoner"> Prisoner One </p>
<br>
<p id="command" >address the prisoner:</p>
<input type="text" id="userInput" />
<div class="transcript" id="prisonerResponse">
<p>
</p>
</div>
</body>
</html>
и некоторые из CSS:
#prisonerResponse {
overflow: scroll;
width: 350px;
height: 100px;
display: inline-block;
margin: 10px;
position: relative;
}
#prisonerResponse:before {
content:"";
width: 350px;
height: 100px;
position: fixed;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}