There are a large number of this question floating around this site. None of them seem to help me though. I am trying to code a text based browser game using javascript and jQuery, as a base to build my knowledge of coding.
I have a javascript code:
window.setInterval(function(e) { //This function is the only way to get the scroll to bottom to work, for me.
e = document.getElementById('console'); //'console' is the area that outputs the system text, after a user answers questions.
e.scrollTop = e.scrollHeight - e.clientHeight; //It works without the '- e.clientHeight', but I read that this is proper.
});
For the scroll to bottom function, this works very well, but how in the world do I allow the user to scroll up... to review what has transpired?
I haven't found a question asked in this fashion, so I don't believe it is a duplicate. If so, I guess I'll keep searching.
-Edit-
Okay... I guess my description wasn't descriptive enough, so let me try to fix that.
Here is a snipit of the first bit of my code (I know it isn't set up the best right now, but that is why I'm learning):
Javascript/JQuery
window.setInterval(function(e) { //'#console' scrolls to bottom <-- how do I let the user scroll up to review?
e = document.getElementById('console');
e.scrollTop = e.scrollHeight - e.clientHeight;
});
onkeyup = (function(e) { //On <enter> erase data in the ("input")
if (e.keyCode == 13) {
$("input").val("");
e.preventDefault();
return false;
}
});
$(document).ready(function() {
$("#console").fadeIn(3000); //A console to output answers and scenarios to
$("form").submit(function() { //User input
var input = $("#command_line").val(); //A nifty box to put your answers in
var check = false;
function check() { //If you don't follow directions this happens
check = true;
}
//startup
var yes = false;
var no = false;
currentarea = "Start";
function start() {
while (yes != true && no != true && currentarea == "Start") {
if (input == "yes") {
yes = true;
$("<p>Great! What is your gender? Type <u><b>m</b></u> for Male or <u><b>f</b></u> for Female.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
clothes = s_clths;
document.getElementById("clothes").innerHTML = clothes;
currentarea = "Gender Assignment";
check();
return currentarea;
}
}
start();
});
So, basically, after getting the scroll to bottom working, I noticed users might want to scroll up to see what previous statements said. Right now, they cannot scroll up. If I need to make another code all together that is okay, but I cannot find one that will work for me. I've tried every suggestion I could find from all the relative postings, with no success. I have been at this for about twelve hours now, and can't figure it out by myself.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="scripts/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="banner">
<p>Welcome To ! An Epic Journey Awaites You!</p>
</div>
<div id="console_wrapper">
<div id="console">
<p id="Start">Would you like to begin your adventure? Type <u><b>yes</b></u> or <u><b>no</b></u>.</p>
<p id="message_help" style="display: none;">Some help, if you need it.</p>
<!--
PLACEHOLDER: THIS IS WHERE YOUR CHOICES ARE INPUTED
-->
<div id="placeholder"></div>
</div>
</div>
<form id="form" onsubmit="return false;">
<input type="text" size="50" autofocus="autofocus" autocomplete="off" id="command_line" />
</form>
<script type="text/javascript" src="scripts/game.js"></script>
</body>
</html>
CSS
#banner {
width: auto;
background-color: maroon;
border-style: ridge;
border-width: 5px;
border-color: grey;
text-shadow: 2px 2px orange;
}
#console_wrapper {
border-style: ridge;
border-width: 3px;
border-color: grey;
max-height: 150px;
margin: 75px auto;
margin-top: 12px;
width: 44%;
}
#console {
display: none;
height: 150px;
text-align: center;
margin-top: 0px;
overflow-y: scroll;
}
#command_line {
font-family: Times New Roman;
font-size: 14px;
border-style: ridge;
border-color: blue;
border-width: 4px;
margin: auto;
}
body {
background-color: black;
border-style: ridge;
border-width: 5px;
border-color: red;
width: 90%;
max-height: 900px;
margin: auto;
}
