I've got a pop-up message at first, and I want it to go away when you click the button. The problem is, it won't go away when you click the button. Here's the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>GEOMETRY</title>
<link rel="stylesheet" href="infographic.css"/>
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<div id="alert">
<p id="bef">BEFORE WE BEGIN...</p>
<p class="bef2">I started this site way too late to test on multiple browsers. What this means is, if you're not viewing on Chrome, things may be very different. I'm primarily concerned about the fonts. You'll still be able to read it, but it could very well be all in Sans-Serif. Which will hinder your user experience. So keep that in mind.</p>
<p class="bef2">Also, I didn't make this thing very supportive of different screen sizes. It should be relatively fine across the board, because all margins are percentages, but there are extremes where things get ugly. Keep that in mind also.</p>
<p class="bef2">Enjoy!</p>
<div id="igotya">
<p class="menu">I got ya bro.</p>
</div>
</div>
<p class="h1">GEOMETRY</p>
<p class="sub">Everything you never wanted to know.</p>
<p class="mainp">You now when you try to re-visit your high school days, but you just can't? Like when you say to yourself, "Man, I really wish I was sitting in a high school classroom learning trigonometry right now," or, "Jesus, if only I could get someone to give me a bunch of work to do, on topics I'll never remember."</p>
<p class="mainp">Well now, you've got a complete guiding resource to do it yourself!</p>
<p class="mainp">Mostly...</p>
<p class="mainp">This will give you all the information you always wish you never knew about four basic geometry concepts. Know exactly what you're looking for? Use the buttons to skip ahead.</p>
<div id="simp">
<p class="menu">Simplifying Radicals</p>
</div>
<div id="pyth">
<p class="menu">Pythagorean Theorem</p>
</div>
<div id="down">
<div id="arrow"></div>
</div>
<div id="sp">
<p class="menu">Special Triangles</p>
</div>
<div id="trig">
<p class="menu">Trigonometry</p>
</div>
<script type="text/javascript">
var igotya = $("#igotya");
var box = $("#alert");
igotya.click = (function() {
alert("Hello!");
box.css("position", "none");
});
</script>
</body>
</html>
CSS:
@font-face {font-family: Hip Light; src: url("Fonts/Hipstelvetica UltraLight.ttf");}
body {
background: #962626;
}
#alert {
position: absolute;
display: inline;
z-index: 2;
background: #962626;
width: 60%;
margin-top: 60px;
margin-left: 20%;
border: 3px solid white;
border-radius: 30px;
text-align: center;
}
#bef {
color: white;
font-family: Courier, Courier New, sans-serif;
font-size: 65px;
margin-bottom: 0px;
margin-top: 10px;
}
.bef2 {
color: white;
font-family: Courier, Courier New, sans-serif;
margin-left: 10%;
margin-right: 10%;
}
#igotya {
float: left;
width: 15%;
margin-left: 42.5%;
border: 2px solid white;
border-radius: 10px;
margin-bottom: 20px;
margin-top: 20px;
transition: border .5s, color 0.5s;
-webkit-transition: border .5s, color 0.5s;
cursor: pointer;
color: white;
}
#igotya:hover {
border: 2px solid #721515;
color: #721515;
}
.h1 {
text-align: center;
color: white;
font-family: Hip Light, Courier, Courier New, sans-serif;
font-size: 100px;
margin-bottom: 0px;
margin-top: 70px;
text-decoration: underline;
}
.sub {
text-align: center;
color: white;
font-family: Courier, Courier New, sans-serif;
margin-top: 0px;
margin-bottom: 50px;
font-size: 20px;
}
.mainp {
text-align: center;
color: white;
font-family: Courier, Courier New, sans-serif;
margin-left: 20%;
margin-right: 20%;
}
#simp {
height: 50px;
width: 15%;
float: left;
margin-left: 6%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background 1s, color 1s;
cursor: pointer;
color: white;
}
#simp:hover {
background: white;
color: #962626;
}
#pyth {
height: 50px;
width: 15%;
float: left;
margin-left: 2%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
cursor: pointer;
color: white;
}
#pyth:hover {
background: white;
color: #962626;
}
#down {
height: 80px;
width: 6%;
float: left;
margin-left: 9%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: border .5s;
-webkit-transition: border .5s;
}
#down:hover {
border: 2px solid #962626;
}
#arrow {
height: 40px;
width: 40px;
border-bottom: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
margin-left: 20px;
margin-top: 10px;
}
#sp {
height: 50px;
width: 15%;
float: right;
margin-right: 6%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: background .5s, color .5s;
-webkit-transition: background .5s, color .5s;
cursor: pointer;
color: white;
}
#sp:hover {
background: white;
color: #962626;
}
#trig {
height: 50px;
width: 15%;
float: right;
margin-right: 2%;
margin-top: 50px;
border: 2px solid white;
border-radius: 10px;
transition: all .5s;
-webkit-transition: all .5s;
cursor: pointer;
color: white;
}
#trig:hover {
background: white;
color: #962626;
}
.menu {
text-align: center;
font-family: Courier, Courier New, sans-serif;
}
I have linked to JQuery. The div in question, that I want to disappear, is #alert, and I want it to disappear when you click on #igotya. As you can see, I've also got an alert box set up, to tell whether the function is firing. The alert box is not popping up, so it must be an issue with the triggering (probably just a typo, but for the life of me I can't find it). Ideas, anybody?
