My code: https://jsfiddle.net/Metalnoypi/d7ocf929/#&togetherjs=HD16R9BLLF
I'm currently semi-new to javascript/html/css and I'm having trouble of having the main menu page disappear at the click of the start button, and then having the word Test appear as soon as the menu disappears. Any recommendations would be helpful! Also, if possible could you also explain how it works/?
<menu>
<div id="menu">
<body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft> <input type="button" id="start" class="hide" value = "Start Game"/> </divbottomleft>
<divbottomright><input type="button" id="quit" value = "Quit"/>
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none" >
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$(this).parents("menu").hide();
$("game").parents("game").toggle();
});
});
</script>
My CSS Code is:
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}
divbottomright{
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}
You have the right idea, though your jQuery just needs some slight modification. It's actually surprisingly simple; all you have to do is hide the menu and show the game itself through the same click function:
$(document).ready(function() {
$(".hide").click(function() {
$("#menu").hide();
$("#game").show();
});
});
divcenter {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
divbottomleft {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: -200px;
}
divbottomright {
position: fixed;
top: 50%;
left: 50%;
margin-top: 75px;
margin-left: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<menu>
<div id="menu">
<body background="">
<divcenter>
<font color="blue"><font size="5"><center><h2> Realm of Rilthalk </h2></center></font></font>
<font color="magenta"><font size="5"><center><h3>The Origin Story</h3></center></font></font>
</divcenter>
<divbottomleft>
<input type="button" id="start" class="hide" value="Start Game" /> </divbottomleft>
<divbottomright>
<input type="button" id="quit" value="Quit" />
</divbottomright>
</body>
</div>
</menu>
<game>
<div id="game" class="toshow" style="display:none">
<divcenter><font color="jade"><H1><center> Test </center></H1></font>
</divcenter>
</div>
</game>
I've also created a JSFiddle showcasing this here.
Hope this helps! :)
Related
I'm designing an avatar module. The point is that when clicking on the hair or the eyes, they have to move at the top of the head. Instead of getting that, they do not move at all but the code also does not alert from an error.
Here's the HTMLcode:
<style>
#cabeza{
position: absolute;
z-index: auto;
left:225px;
top:125px;
}
#ojos {
position: absolute;
z-index: 1;
left: 8px;
top: 300px;
}
#pelo {
position: absolute;
z-index: 2;
left: 0;
top: 125px;
}
</style>
<body>
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="cabeza"><img src="assets/img/cabeza.png"/></div>
<div id="pelo"><img src="assets/img/pelo.png" /></div>
<div id="ojos"><img src="assets/img/ojos.png" /></div>
</div>
</div>
<script>
alert('NOSeSiFunciona');
document.getElementById("pelo").onclick = function() {document.getElementById("pelo").style.left = "225px";};
document.getElementById("ojos").onclick = function() {document.getElementById("ojos").style.left = "235px"; document.getElementById("ojos").style.top = "200px";};
</script>
</body>
Is it possible to pass parameters in JQuery popup box??
there has two file
form.php <--The user will fill in the form like username.
when the form sumbit, it have a JQUERY pop up box to show his username that is the user fill in the form.
THX
My html code
<form method="get" onsubmit="return false;">
First name:<br>
<input name="firstname" type="text"><br>
<br>
<input type="submit" value="Submit" onclick="popupfunctioncall();">
</form>
<div class="popup-container">
<div class="popup-play"></div>
<div class="pop-popup white_content" id="light">
<div class="popup-close">
<span><font size="5">x</font></span>
</div><?php
echo $_GET["firstname"];
?>
</div>
<div class="black_overlay" id="fade"></div>
</div>
MY Css code
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);}
.white_content {
display: none;
position: absolute;
top: 0px;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: 500px;
width: 600px;
background-color: #ffffff;
z-index: 1002;
background-color: #fff;
z-index: 1002;
overflow: auto;
text-align: center;}
.popup-close {
position: absolute;
top: -2px;
right: 7px;}
My Javascript code
function popupfunctioncall(){
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
$(document).on('click','.popup-close',function(){
$('#light').fadeOut(600);
$('#fade').fadeOut(600);
});
Please look below example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function popupfunctioncall(){
alert($('#username').val()+"/"+$('#color_name').val() );// you can user your popup here
}
</script>
</head>
<body>
<form>
<input type="text" name="username" id="username">
<input type="text" name="color" id="color_name">
<input type="submit" name="cub" value="submit"onclick="popupfunctioncall()">
</form>
</body>
</html>
First, you better to set an ID to the font tag inside the popup window like this.
<span><font id='content' size="5">x</font></span>
Then you can get the input value and set popup content as follow.
function popupfunctioncall(){
var firstname = $("input[name='firstname']").val();
$('#content').html(firstname);
$('#light').fadeIn(600);
$('#fade').fadeIn(600);
}
Hope this help.
Im trying to move this image in css but it just wont move no mater how many times I test it, what am I doing wrong?
#yahoo1 {
position: absolute;
top: 100px;
left: 800px;
}
<p id="yahoo1">
<a href="http://www.yahoo.com">
<img border="0" alt="yahoo" src="images/yahoo.png" width="300" height="300">
</a>
</p>
#yahoo1 {
position: relative;
}
#yahoo1 a {
position: absolute;
top: 100px;
left: 800px;
}
#yahoo1 img {
display: block;
}
in the code below I am trying to figure out how can I change "content"s z-index relatively to clicked "menu-item". I managed how to do this for menu items, but cannot find solution for the rest. In simple words I need to click #m1 and set Z-Index 10 for #c1 and so on.
HTML
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
CSS
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
JQuery
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
});
menu.click(function(){
menu.toggleClass("closed");
});
});
Working example: http://jsfiddle.net/8a3vqy5v/
No need to register multiple click events for the same element, they serve for your case same as a single binding.
You can hide and show the background content based on the menu index as follows within the click event, you can check the code snippet for full code:
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
Snippet :
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
menu.toggleClass("closed");
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
});
});
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
You could get the index of the clicked .menu-item element and then select the corresponding .content element using the index with the .eq() method:
Updated Example
var $menu = $('.menu-item');
$menu.click(function() {
$(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', '');
if (!$(this).hasClass('closed')) {
$('.content').eq($(this).index()).css('z-index', 10);
}
$menu.toggleClass("closed");
});
But since that creates a weird transition bug, you could use the code from this example instead. It essentially listens to the transitionend event.
if there is a fixed number of elements (ie: 4) you could simply throw 4 rules, one for each :
$('#m1').click(function() {
$('.content').css('z-index', '');
$('#c1').css('z-index', '11');
});
$('#m2').click(function() {
$('.content').css('z-index', '');
$('#c2').css('z-index', '11');
});
$('#m3').click(function() {
$('.content').css('z-index', '');
$('#c3').css('z-index', '11');
});
$('#m4').click(function() {
$('.content').css('z-index', '');
$('#c4').css('z-index', '11');
});
if you want a single rule that would apply to any #mx - #cx couple, you could also try to get the id of the element clicked as a string and manipulate the string in order to replace the first letter with a 'c'
I wanted to select divs quickly so i wrote a for loop that select all divs and add functions to them quickly instead of "onClick='blahblah'" method. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Strategy Game Dev Test</title>
<meta charset="utf-8" />
<script type="text/javascript">
function illu_area(){
alert("test");
}
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", illu_area());
}
}
</script>
<style type="text/css">
* { margin: 0px; padding: 0px; font-family: Tahoma}
.container_main {
margin: 10px;
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.territory_type1 {
width: 100px;
height: 100px;
position: absolute;
}
.territory_type2_horizontal {
width: 200px;
height: 100px;
position: absolute;
}
.territory_type2_vertical {
width: 100px;
height: 200px;
position: absolute;
}
#t6 {
background-color: blue;
left: 200px;
}
#t5 {
background-color: lightblue;
left: 100px;
}
#t4 {
background-color: green;
}
#t3 {
background-color: turquoise;
top: 200px;
}
#t2 {
background-color: lightgreen;
top: 200px;
left: 200px;
}
#t1 {
background-color: brown;
top: 100px;
left: 200px;
}
#t0 {
background-color: yellow;
top: 100px;
left: 100px;
}
.grid {
height: 100px;
width: 100px;
position: absolute;
top :0px;
}
#t3_g2 {
left: 100px;
}
#t4_g2 {
top: 100px;
}
</style>
</head>
<body onLoad="everything()">
<div class="container_main">
<div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0">
Origin
</div>
<div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0">
1
</div>
<div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1">
2
</div>
<div id="t3" class="territory_type2_horizontal">
3
<div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div>
<div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div>
</div>
<div id="t4" class="territory_type2_vertical">
4
<div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div>
<div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div>
</div>
<div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1">
5
</div>
<div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1">
6
</div>
</div>
</body>
</html>
My problem is: When i open this html file or refresh the page, alert messages appears (six times) immediately. I want it to alert when i click a grid...
Note:
it works when i do this:
function everything(){
for(var test_id = 0; test_id < 7; test_id++){
document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");});
}
}
But this isnt going to be useful in future i think :P
Help me!
You have to pass your function - omit the ()
.addEventListener("click", illu_area);
Having the () executes the function immediately.