i making game html, css , jquery. usual falling block avoid game.
i having trouble jquery though. when select theme (only dark theme "working"), player doesn't show up:
$(document).ready(function() { $('#options').change(function() { // note: themes have capital letters on colors if ($(this).val() === 'dark') { $("#game").css("background-color", "black"); $("#player").css({ "background-color": "white" // using css function in case want add other stuff }); } }); $("#play").click(function() { $(this).hide(); $("#options").hide(); $("#player").show(); }); });body { background-color: #ffffff; font-family: helvetica, sans-serif; } .block { width: 60px; height: 60px; position: absolute } #game { width: 1000px; height: 550px; border: 3px solid #000000; margin: 2% 10%; } #player { width: 40px; height: 40px; left: 50%; bottom: 0; position: absolute } #play { padding: 1%; color: white; background-color: black; border-style: solid; } #options {}<!doctype html> <html> <head> <meta charset="utf-8"> <title>trash fall - game</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- adding jquery script --> <script src="script.js"></script> </head> <body> <h1 id="main_title">color drop</h1> <div id="game"> <button id="play">play</button> <select id="options"> <option value="none">none (choose 1 in order play)</option> <option value="dark">dark</option> <option value="light">light</option> <option value="blue_white">blue/white</option> <option value="red_white">red/white</option> </select> <div id="player"></div> </div> </body> </html>note: seeing working in snippet, not working on github (where creating game): example github
why not working?
plus: why theme , player being added game section choose theme?
github link: https://github.com/flipfloop/color-drop
thanks all!
#player has position: absolute; #game not positioned, player appearing, on bottom of document, invisible (white on white). try making #game have position:relative;.
edit: @flipfloop posting comment answer code snippet below, completeness. run full-screen , toggle position: relative; of #game off , on illustrate problem/solution.
$(document).ready(function() { $('#options').change(function() { // note: themes have capital letters on colors if ($(this).val() === 'dark') { $("#game").css("background-color", "black"); $("#player").css({ "background-color": "white" // using css function in case want add other stuff }); } }); $("#play").click(function() { $(this).hide(); $("#options").hide(); $("#player").show(); }); });body { background-color: #ffffff; font-family: helvetica, sans-serif; } .block { width: 60px; height: 60px; position: absolute } #game { width: 1000px; height: 550px; border: 3px solid #000000; margin: 2% 10%; position: relative; } #player { width: 40px; height: 40px; left: 50%; bottom: 0; position: absolute; } #play { padding: 1%; color: white; background-color: black; border-style: solid; } #options {}<!doctype html> <html> <head> <meta charset="utf-8"> <title>trash fall - game</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!-- adding jquery script --> <script src="script.js"></script> </head> <body> <h1 id="main_title">color drop</h1> <div id="game"> <button id="play">play</button> <select id="options"> <option value="none">none (choose 1 in order play)</option> <option value="dark">dark</option> <option value="light">light</option> <option value="blue_white">blue/white</option> <option value="red_white">red/white</option> </select> <div id="player"></div> </div> </body> </html>