Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Auto scroll to bottom on new entry

    Hey, I am creating a text adventure game in html and javascript for mobile and am having some annoying issues with the screen not automatically scrolling down to the bottom of the page on overflow (i.e. when new text appear further down on the screen the user has to manually swipe down).

    I've looked at several solutions for this problem on other forums but none of the solutions there seem to work with my code.

    This is my html:
    Code:
    <!DOCTYPE HTML>
    <html lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    		<title>Text Adventure</title>
    		<script src="jquery.js"></script>
    		<script type="text/javascript" src="game.js"></script>
    		<link rel="stylesheet" href="game.css" type='text/css'>
    	</head>
    	<body>
    		<h1>MineSpace</h1>
    		<div id="story"></div>
    		<input id="command" autofocus placeholder="type here"
    	</body>
    </html>
    and this is my script:
    Code:
    //ROOMS
    var room = {};
    
    room.start = {};
    room.start.description = "You are a solitary spacer miner on a remote asteroid, working for MineSpace Industries. Most of the mining equipment on the asteroid is automated, you are only here for maintenance and supervision. You are seven months into your one year shift at the space mining station, with nothing but your PlayStatus 6 gaming console and a vast collection of TV box sets to keep you company. In other words, living the dream!<br />Amongst the equipment you are charged with keeping an eye on are several massive laser drills that dig deep into the asteroid core to make shafts for the mining bots so that they can gather the oh so precious minerals MineSpace so desperately wants.<br />Up until now operations have been going smoothly without any problems. You have had plenty of time to hone your gaming skills and eat Cheese Doodles. But now, one of the drills have suddenly dropped of the radar. You will need to leave your gaming paradise and go check on it. God, how boring!<br />The last coordinates the drill gave before it stopped signalling was several clicks to the <ins>east</ins> of the base. Time to earn that paycheck!";
    //room.start.items = {}; ?????????????????
    room.start.choices = [];
    room.start.choices.push({inputs:["look", "inspect", "survey", "investigate", "examine", "explore", "search", "east", "base", "next"], room:"insideBase"});
    
    room.insideBase = {};
    room.insideBase.description = "This base has been your fortress of solitude for the last seven months. The relatively small main room consists of a <ins>computer</ins> where you monitor the mining operations, essential equipment, a simple kitchen, as well as all your personal items such as your <ins>gaming console</ins>. The computer screens are flashing with a warning about the missing drill. A <ins>door</ins> leads to the asteroid surface outside.<br />Amongst the essential equipment is an <ins>environmental suit</ins>. You should probably put it on befor going outside unless you are superhuman and do not require oxygen.";
    room.insideBase.choices = [];
    room.insideBase.choices.push({inputs:["take suit", "grab suit", "equip suit", "use suit", "take environmental suit", "grab environmental suit", "equip environmental suit", "use environmental suit"], room:"outsideBase"});
    room.insideBase.choices.push({inputs:["east", "exit", "leave", "exit base", "leave base", "leave room", "go outside", "open door", "use door"], room:"outsideBaseDeath"});
    
    room.outsideBaseDeath = {};
    room.outsideBaseDeath.description = "You put on your environmental suit and go outside. Apparently, to your great disappointment, you are sadly not superhuman and do in fact require oxygen. You die from asphyxiation, clawing for air. Oops! Type <b>RESTART</b> to begin the game anew.";
    room.outsideBaseDeath.choices = [];
    room.outsideBaseDeath.choices.push({inputs:["restart", "new game", "retry", "play again", "try again", "replay"], room:"start"});
    
    room.outsideBase = {};
    room.outsideBase.description = "You leave the base and go outside onto the asteroid surface. The terrain is rocky and desolate. All around you is awe inspiring, starry space. Even after seven months on this god forsaken rock, it is still an impressive sight. But enough of that, you have a job to do. The missing laser drill was last heard from somewhere to the <ins>east</ins>.";
    room.outsideBase.choices = [];
    room.outsideBase.choices.push({inputs:["east", "go east", "walk east"], room:"surface1"});
    
    room.surface1 = {};
    room.surface1.description = "surface1. Keep going <ins>east</ins>.";
    room.surface1.choices = [];
    room.surface1.choices.push({inputs:["east", "go east", "walk east"], room:"surface2"});
    
    room.surface2 = {};
    room.surface2.description = "surface2. Keep going <ins>east</ins>.";
    room.surface2.choices = [];
    room.surface2.choices.push({inputs:["east", "go east", "walk east"], room:"tunnelEntrance"});
    
    room.tunnelEntrance = {};
    room.tunnelEntrance.description = "tunnelEntrance. Go down.";
    room.tunnelEntrance.choices = [];
    room.tunnelEntrance.choices.push({inputs:["down", "go down", "climb down", "enter", "enter tunnel", "descend"], room:"tunnelDown"});
    
    room.tunnelDown = {};
    room.tunnelDown.description = "tunnelDown. Let go of rope to go down on cave floor.";
    room.tunnelDown.choices = [];
    room.tunnelDown.choices.push({inputs:["cut rope", "cut line", "drop rope", "drop line", "let go"], room:"caveFloor"});
    
    room.caveFloor = {};
    room.tunnelDown.description = "caveFloor.";
    room.tunnelDown.choices = [];
    room.tunnelDown.choices.push({inputs:[""], room:""});
    
    //FUNCTIONS
    var messageNum = 0;
    var currentRoom;
    
    function showRoom(roomName) {
    	currentRoom = room[roomName];
    	var divString = "<div class='message' id='message" + messageNum + "'>" + currentRoom.description +"</div>";
        $('#story').append(divString);
        $('#message' + messageNum).hide().show(1200);
    	messageNum++;
    }
    
    $(document).ready(function(){
    	showRoom("start");
    	
    	$(function()
        {
    		var  textBox = $('#command');
    		var code = null;
    		textBox.keypress(function(e)
    		{
    			code = (e.keyCode ? e.keyCode : e.which);
    			if (code == 13) {
    				tryCommand(this.value);
    				e.preventDefault();
    			}
    		});
        });
    });
    
    function tryCommand(command) {
    	command = command.toLowerCase();
    	for (var i = 0; i < currentRoom.choices.length; i++)
    	{
    		for (var j = 0; j < currentRoom.choices[i].inputs.length; j++)
    		{
    			if (command.indexOf(currentRoom.choices[i].inputs[j]) > -1)
    			{
    				showRoom(currentRoom.choices[i].room);
    				
    				$('#command').val("");
    				return;
    			}
    		}
    	}
    	
    	var errorMessages = [];
    	errorMessages.push("<i>That makes no sense!</i>");
    	errorMessages.push("<i>Command not understood!</i>");
    	errorMessages.push("<i>You cannot do that right now!</i>");
    	
    	var errorMessage = errorMessages[Math.floor(Math.random() * errorMessages.length)];
    	
    	var divString = "<div class='message' id='message" + messageNum + "'>" + errorMessage +"</div>";
        $('#story').append(divString);
        $('#message' + messageNum).hide().show(600);
    	messageNum++;
    	
    	$('#command').val("");	
    }
    so as you can see when the user tries a text command a string gets appended to the "story" div. The problem, again, is that the screen does not autoscroll to the bottom of the page by itself on overflow, which is quite annoying!

    Another issue is that the text in the "story" div does not stop when it reaches the command line box but keeps going in behind it. It should be an easy problem to fix but everything I try fails...

    Sorry if this is a bit of a general question, please don't scold me too badly for being a noob!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Try this:

    Put a dummy <a> at the bottom of your page (or the bottom of the content you want to get to), something like
    Code:
    <a name="bottom">&nbsp;</a>
    And then, at the end of the JS code where you add text to the display, just do
    Code:
    location.href = "#bottom";
    Works in standard browsers; untested with mobile ones, but should work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    mortenghaug (05-09-2013)

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Code:
     $('#message' + messageNum).hide().show(1200);
    can become

    Code:
     $('#message' + messageNum).hide().show(1200)[0].scrollIntoView(true);
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    mortenghaug (05-09-2013)

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Try this:

    Put a dummy <a> at the bottom of your page (or the bottom of the content you want to get to), something like
    Code:
    <a name="bottom">&nbsp;</a>
    And then, at the end of the JS code where you add text to the display, just do
    Code:
    location.href = "#bottom";
    Works in standard browsers; untested with mobile ones, but should work.
    seems to have done the trick! Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •