Why isn't my div showing up properly?
Question
I am currently making a game with HTML, CSS and jQuery. This will be the usual falling block avoid game.
I am having trouble with my jQuery though. When I select a theme (only dark theme is currently "working") , the player doesn't show up:
$(document).ready(function() { $('#options').change(function() { // NOTE: all 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 you want to 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 to the 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 one in order to 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 : I am seeing that this is working in this snippet, however it is not working on github (where I am creating the game): example GitHub
Why is this not working?
Plus: why are the theme and player being added to the game section as we choose the theme?
GitHub link: https://github.com/FlipFloop/Color-Drop
Thanks to all!
2 answers
solution1
2 ACCPTED 2016-06-07 21:32:59
#player has position: absolute; but #game is not positioned, so player IS appearing, just on the bottom of the document, usually invisible (white on white). Try making #game have position:relative; .
EDIT: @FlipFloop Posting this comment as an answer with a code snippet below, for completeness. Run full-screen and toggle the position: relative; of #game off and on to illustrate the problem/solution.
$(document).ready(function() { $('#options').change(function() { // NOTE: all 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 you want to 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 to the 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 one in order to 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>
solution2
0 2016-06-06 20:01:34
You should use condition statements ie. switch or if/else if/else, in order to catch your option data. In your code you only looking for Dark value !
when I try this (I had Light condition), it works for Light value :
$(document).ready(function() {
console.log("ok");
$('#options').change(function(){ // NOTE: all themes have capital letters on colors
console.log("ok");
if($(this).val() === 'Dark'){
$("#game").css("background-color", "black");
$("#player").css({
"background-color": "white" // using CSS function in case you want to add other stuff
});
}
if($(this).val() === 'Light'){
$("#game").css("background-color", "white");
$("#player").css({
"background-color": "white" // using CSS function in case you want to add other stuff
});
}
});
$("#play").click(function() {
$(this).hide();
$("#options").hide();
$("#player").show();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.