I have a div that should be collecting text as text is entered into the input box (right now it just reproduces the input, but later it should produce semi-intelligent responses.)
I want the text to appear at the bottom of the div, at the dark end of the gradient. I want fresh text to always be at the bottom and old text to rise up into the greyness of the upper scrolling area. In other words, I'd like to reach the effect like in a terminal or on a chat console.
The page is here: http://mindseyetutoring.com/interrogate.html
Here is my code (I'll eliminate the ajax aspect to minimally represent the problem):
<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>
and some of the 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%);
}
I would use a different way to solve this problem. Maybe I'm wrong but it sounds like you want to emulate a chat console, displaying the text lines in reverse order. In that case I would use UL/LI structure wrapped around a DIV; somehow I believe this is the fastest way since we don't care about the previous lines - we just append the new ones, adding another LI to the end of the UL element. Check the snippet out
// JavaScript - Tested on IE11, Firefox, Chrome, Opera and Safari
window.onload = function(){
var div = document.getElementById("wrapper"),
ul = document.getElementById("list"),
input = document.getElementById("text"),
flag = false,
li;
input.onkeypress = function(e){
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode == 13) {
li = document.createElement("LI");
li.innerHTML = input.value;
ul.appendChild(li);
li.scrollIntoView();
if(ul.offsetHeight >= div.offsetHeight && flag !== true){
ul.style.height = div.offsetHeight + "px";
flag = true;
}
document.getElementById("text").value = "";
}
};
};
/* CSS */
#wrapper {
position:relative; height:200px; width:300px; background-color:#fff;
}
#list {
margin:0px; padding:0px; position:absolute; bottom:0px; left:0px; width:inherit; overflow:hidden; overflow-y:scroll;
}
#text {
width:300px;
}
<!-- HTML -->
<div id="wrapper">
<ul id="list"></ul>
</div>
<input type="text" id="text" name="text" value="" />
Check the working jsBin (on Firefox, Chrome, Opera and Safari) or jsFiddle (on IE11)
If you use
$("#prisonerResponse").html(responseTxt + '\n');
it will replace all content with the new one.
If you just want to add it at the end, use append:
$("#prisonerResponse").append(responseTxt + '\n');
This is a basic solution based on two main functions appendChild and scrollIntoView. The former appends the new response in the list (as a log). And the second fix the view in the last element appended.
Also we need to fix the height of the <ul> tag by using the size of the
var wrapper = document.getElementById('prisonerResponse');
var commands = document.getElementById('commands');
var flag = false;
window.onload = function() {
var command;
var input = document.getElementById('text');
document.getElementById("text").onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode == 13) {
command = document.createElement('li');
command.innerHTML = input.value;
commands.appendChild(command);
command.scrollIntoView();
fixHeight()
document.getElementById("text").value = "";
}
};
};
function fixHeight() {
if (commands.offsetHeight >= wrapper.offsetHeight && flag !== true) {
commands.style.height = wrapper.offsetHeight + "px";
flag = true;
}
}#prisonerResponse {
position: relative;
height: 100px;
width: 350px;
background-color: #fff;
margin: 10px;
}
#prisonerResponse .overlay {
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: absolute;
}
#prisonerResponse .gradient {
background-image: linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
background-image: -o-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1) 100%);
}
#commands {
margin: 0px;
padding: 0px;
position: absolute;
bottom: 0px;
left: 0px;
width: inherit;
overflow: hidden;
overflow-y: scroll;
}
#text {
width: 350px;
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add text to the bottom of a div</title>
</head>
<body>
<p id="prisoner"> Prisoner One </p>
<br>
<p id="command">address the prisoner:</p>
<div id="prisonerResponse" class="overlay gradient">
<ul id="commands"></ul>
</div>
<input type="text" id="text" name="text" value="">
</body>
</html>来源：https://stackoverflow.com/questions/24600732/add-text-to-the-bottom-of-a-div-or-another-element-emulating-chat-console