joeyoung2509 Posted June 15, 2015 Share Posted June 15, 2015 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script language="javascript" src="Files/jquery.js" type="text/javascript"></script><script src="game.js" type="text/javascript"></script><meta content="en-gb" http-equiv="Content-Language" /><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>design</title><style type="text/css">.auto-style1 { margin-left: 114px;}.auto-style2 { margin-left: 0px;}.auto-style3 { margin-left: 442px;}.auto-style4 { margin-left: 442px; margin-top: 19px;}</style></head><body style="background-color: #808080"><div id="mobhealthbar" class="auto-style3" style="width: 180px; position: absolute; right: 20px; top: 50px; height: 25px;"></div><div id="userHealthBar" class="auto-style2" style="width: 180px; left: 22px; position: absolute; top: 59px; height: 25px;"></div><center><p class="auto-style1" style="height: 28px; top: 111px; width: 1130px; position: relative; left: -54px;">Welcome to the Game!!!</p></center><div id="console"> <div style="height: 115px; width: 1297px;" title="blank"> </div> <div id="message_attack" class="auto-style4" style="width: 750px; height: 22px"> </div> <div id="placeholder" style="height: 113px"> </div> <div> <form onsubmit="return false;"> <center> <input id="command_line" autofocus="autofocus" size="50" type="text" /></center> </form> </div></div></body></html> Ok so heres my HTML, im having a weird scrolling issue when javascript code is called, the text inserts before the placeholder but the text box moves down, I want the inserted text to scroll up with each new entry then disappear into the top of the placeholder. What am I doing wrong? Link to comment Share on other sites More sharing options...
Alatoru Posted June 15, 2015 Share Posted June 15, 2015 To be able to help you, I need JS files. I can't see or apply any functionality to the webpage without JS files. I only have textbox and paragraph. Link to comment Share on other sites More sharing options...
joeyoung2509 Posted June 15, 2015 Author Share Posted June 15, 2015 var userHP = 500; var mobHP = 500;$(document).ready(function() { $("#command_line").fadeIn(3000); $("#message_begin").fadeIn(3000); $("#area_main").fadeIn(3000); $("#auto-style3").fadeIn(3000); $("form").submit(function() { var input = $("#command_line").val(); if (input.indexOf("attack") > -1) { if (input == "attack"){ var userDmg = Math.floor(Math.random() * 100); var mobDmg = Math.floor(Math.random() * 80); $("#message_attack").html("You attack for: " + userDmg + " ---- Goblin HP left " + (mobHP -= userDmg)).clone().insertBefore("#placeholder").hide().fadeIn(2000) $("#message_attack").html("The Goblin attacks back for: " + mobDmg + " ---- Your HP left " + (userHP -= mobDmg)).insertBefore("#placeholder").delay(2000).hide().fadeIn(3000); } } else if (input.indexOf("showhp") > -1) { if (input == "showhp") { $("#message_attack").html("Goblin has " + mobHP).insertBefore("#placeholder").fadeIn(1000); } } /* This shows the HPs*/ document.getElementById("mobhealthbar").innerHTML= "MOB HP: " + mobHP; document.getElementById("userHealthBar").innerHTML= "USER HP: " + userHP; $("#message_attack").scrollTop($("#message_attack")[1].scrollHeight); $("#command_line").val(""); }); }); great point Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now