www.webdeveloper.com
Results 1 to 2 of 2

Thread: Auto scrolling in html/jQuery

Hybrid View

  1. #1
    Join Date
    Mar 2014
    Posts
    6

    Auto scrolling in html/jQuery

    Hello! I have put together a game of rock, paper, scissors. When loaded up you are presented with three different buttons, one for rock, one for paper, and one for scissors. When you press one of the buttons it will return a message indicating the outcome. If you press it again, it will put the new outcome underneath the old one and so on. When the outcomes get to the bottom of the page and you play again, it doesn't show the outcome and you have to scroll down to see it. Is there anyway to have the code automatically scroll while keeping the three buttons on the top? Here is the code:
    HTML Code:
    <!doctype html>
    <html>
    <head>
    	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    	<script>
    	function play(userChoice) {
    		$("#game").append("<br>");
    		var computerChoice = Math.random();
    		if(computerChoice < 0.34) {
    			computerChoice = "rock";
    		} else if(computerChoice <= 0.67) {
    			computerChoice = "paper";
    		} else {
    			computerChoice = "scissors";
    		}
    
    		$("#game").append(compare(userChoice, computerChoice)+"<br>");
    	}
    
    	var compare = function(choice1, choice2) {
    		choice1 = choice1.toLowerCase();
    		choice2 = choice2.toLowerCase();
    		if(choice1 === choice2) {
    			return "Stop picking what the computer picked!";
    		} else if(choice1 === "rock") {
    			if (choice2 === "scissors") {
    				return "You win!";
    			} else {
    				return "You lost to a computer";
    			}
    		} else if(choice1 === "paper") {
    			if (choice2 === "rock") {
    				return "You win!";
    			} else {
    				return "You lost to a computer";
    			}
    		} else if(choice1 === "scissors") {
    			if (choice2 === "rock") {
    				return "You win!";
    			} else {
    				return "You lost to a computer";
    			}
    		}
    		return "Why did you have to test my game like that?!?! Next time choose rock, paper, or scissors!!"
    	};
    	</script>
    </head>
    <body>
    	<button onclick="play('rock')">Rock</button>
    	<button onclick="play('paper')">Paper</button>
    	<button onclick="play('scissors')">Scissors</button>
    	<span></span>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,007
    You could always use something like .prepend() instead of .append() and fill the list with the newest result first, eliminating the need to scroll automatically.

    However, if you are intent on placing the newest data at the bottom and need to scroll, you'll be wanting to add something like this at the end of the play() function:
    Code:
      document.getElementById('game').scrollTop = document.getElementById('game').scrollHeight;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles