Hundotte Hundotte - 5 months ago 10
HTML Question

Why are there different results for the following code?

I have a project where I create a virtual workstation using HTML CSS and JavaScript.

The code works smoothly and perfectly, as shown below (minus the images)



<!DOCTYPE html>

<html>
<head>
<title>Malfunction Compueter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>

<style>
html{
font-family: courier
}

.inner{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: white;
font-size: 20px;
opacity: 1.0;
}

.loadScreen {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999999999999999999999999999999999999;
background: white;
font-size: 80px;
text-align: center;
padding-top: 150px
}
#cover{
position: relative

}

#content{
padding-top: 50px
}

td{
width: 33.3%
}

table{
width: 100%;
text-align: center
}

.titleSelection{
font-size: 60px;
transition-duration: 0.5s;
line-height: 10px
}

.titleSelection:hover{
box-shadow: 0 15px 19px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.title{
text-align: center;
padding-top: 40px;
}

#titleImage{
height: 200px
}

.selectionIcon{
height: 120px
}

#backgroundImage{
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
z-index: -9999;
text-align: center
}

#background{
width: 100%;
bottom: 0px
}

#title{
font-size: 60px;
font-family: "kaiTi";
text-align: center;
line-height: 5px
}

#exit{
position: fixed;
bottom: 10px;
right: 40px;
z-index: 99999
}

#exit:hover + #exitText{
font-size: 30px
}

#exitText{
transition-duration: 0.5s;
font-family: "kaiTi";
position: fixed;
bottom: 45px;
right: 45px;
z-index: 99999;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
color: white;
}

#fangNiu{
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 74px;
z-index: 999999;
}

.innerTitle{
font-size: 80px;
text-align: center
}

.goodQuotesTable{
width: 20%;
font-size: 25px;
text-align: justify;
padding-right: 10px;
padding-left: 10px;
}

#quotesTable{
border-collapse: collapse;
vertical-align: bottom;
}

b{
font-size: 45px;
text-align: center
}

.quoteImage{
height: 50px;
width: 50px;
}

#summary{
border: 10px;
}

.quote{
color: black;
}


/* tell the container's children to float left: */
.floatLeft > * {
float:left;
margin-right:5px;
}

.floatRight > * {
float:right;
margin-left:5px;
}

.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}

.clearfix:after {
clear: both;
}

/* end clearfix*/

/* below is just to make things easier to see, not required */
body > div {
margin-bottom:10px;
}

.characterPicture{
height: 140px;
width: auto
}

#summaryText{
text-align: center;
font-size: 80px
}

.characterText{
font-size: 25px;
}

.tab{
position: relative;
margin-left: 120px;
margin-right: 10px;
}

#summaryItself{
padding: 10px
}

#schoolImage{
height: 290px;
width: auto
}

button{
border-radius: 50%;
background-color: #00FF04;
border-color: #00FF04;
color: white;
font-size: 40px;
transition-duration: 0.4s;
width: 25%;
height: 80px;
}

button:hover{
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
background-color: red;
border-color: red;
}

#options{
text-align: center
}

#apps{
text-align: center
}

#languageMenu{
opacity: 0.9;
height: 100%;
width: 100%;
z-index: 99999999999999999999999999999999999999999999999999999999999999999999999999;
}

</style>

<body>

<p id="title">Malfunction Compueter</p><br><p id="title">Version A0.1</p>

<div id="content">
<table id="titleSelections">
<tr>
<td class="titleSelection" id="about"><img src="images/info.png" class="selectionIcon"><br><p>About</p></td>
<td class="titleSelection" id="settings"><img src="images/settings.png" class="selectionIcon"><br><p>Settings</p></td>
<td class="titleSelection" id="apps"><img src="images/apps.png" class="selectionIcon"><br><p>Apps</p></td>
</tr>
</table>

<script>

$(document).ready(function(){
$(".loadScreen").fadeOut("slow")
})



$(document).ready(function(){
$(".inner").fadeOut(0)
$("#exit").fadeOut(0)
$("#exitText").fadeOut(0)
$("#languageMenu").fadeOut(0)
})

$("#about").on("click",function(){
$("#info").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})

$("#settings").on("click",function(){
$("#options").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})

$("#apps").on("click",function(){
$("#applications").fadeIn(500)
$("#exit").fadeIn(500)
$("#exitText").fadeIn(500)
$("#fangNiu").fadeIn(500)
$("#backgroundImage").fadeOut(500)
})

$("html").on("click","#exit",function(){
$("#exit").fadeOut(500)
$("#exitText").fadeOut(500)
$(".inner").fadeOut(500)
$("#fangNiu").fadeOut(500)
$("#languageMenu").fadeOut(500)
$("#backgroundImage").fadeIn(500)
})

$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})

</script>
</body>

<div class="loadScreen">MALFUNCTION COMPUETER <br> MODEL A0.1</div>

<img src="images/logout.png" id="exit">

<p id="exitText">Exit</p>

<div id="options" class="inner" style="display: none">
<b>OPTIONS</b>
<br>
<br>
<br>
<button id="language">Languages</button>
<br>
<br>
<br>
<button id="wifi">Wifi connection</button>
</div>

<div id="applications" class="inner" style="display: none">
<b>APPS</b>
</div>

<div id="info" class="inner" style="display: none">
<b>ABOUT MALFUNCTION COMPUETER</b>
<p>Malfunction compueter is a 非常好的 computer software OS that runs on 你的电脑屏幕上 in the programming language 语文。.</p><br>
<p>In order to get the best out of malfunction compueter, one must 把你的脸爆炸,然后, and then one must also 死掉。这样.</p>
</div>

<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>

</html>





However, there is one set of lines that is not running properly:

<div id="languageMenu" class="innerInner" style="display: none"><p>Choose your language:</p><br><br><select>
<option>English</option>
<option>Chinese</option>
<option>Japanese</option>
</select></div>


^This is the
DIV
"#languageMenu", where the user selects his language.

Here, I have a button "#language" which on click, is supposed to make "#languageMenu" appear.

$("#language").on("click",function(){
$("#languageMenu").fadeIn(500)
})


Strangely, this does not work when I run it on Google Chrome, but when I put it in a JSFiddle it gives strange results.

http://jsfiddle.net/b58Lvtfy/1

From Chrome, what happens is that the language menu only appears upon pressing the exit button, and then fades immediately.

Why might this be so and what amendments might make the code work better?

Online demo: http://garridpunching.neocities.org/malfunction.html

Answer

Your inproper indentation obscures the errror, but you are closing the DOMReady listener, before you are binding the #language click listener. Therefore, #language does not exist in the DOM when the click listener is added.