So here's the thing: A project I'm doing for film school involves making a website. I am in absolutely no way supposed to be a professional (or even a good) programmer (in fact I'm pretty bad), but I wanted to make an old school 90s/2000s styled website.
I modified some code for modal boxes from https://www.w3schools.com/howto/howto_css_modals.asp and it worked out fine until I needed more modal boxes, because now, when I open the modal boxes, the one which is written first in the code shows up with the backdrop and everything, but the clickable image buttons for the subsequent modal boxes show up on top of the box and its backdrop. I'm not sure what's going on. I tried putting all the code in a single <script> tag and all the css in one <style> tag too, but it did nothing. I think I just don't know what I'm doing.
Sorry for the variable, id and class names being in Portuguese, I am Brazilian and this is for Brazilian college.
PS.: I realize there are like a trillion other huge HTML, CSS and JS sins in my code (such as all CSS and JSS being inline), so it's understandable if you cringe or puke instantly by looking at my code. This is because I hadn't coded in years and didn't have time to relearn the real logic behind everything, and also I am using a terrible sitebuilder which barely lets me use HTML, so I had to trick the site by writing all the code inside an HTML box widget. I think you have to pay for premium to actually use different CSS and JS files. So this is all workarounds on top of workarounds on top of workarounds.
<html>
<head>
</head>
<body bgcolor="#FF6842">
<style>
.container {
position: fixed;
top:150px;
}
.container2 {
position:relative;
right:20px;
}
.container3 {
position:relative;
}
#intro-j {
position:fixed;
top:196px;
left:44px;
color:#ffff00;
}
#balao {
position:fixed;
top:370px;
left:966px;
}
#bem-vindo {
position:fixed;
top:100px;
left:423px;
}
#logoblog {
position:fixed;
top:-2px;
left:51px;
}
#gaiola {
position:fixed;
top:450px;
left:330px;
}
#lona {
position:fixed;
left:248px;
top:15px;
}
#counter {
position:fixed;
top:540px;
left:170px;
}
#janela {
position:fixed;
top:170px;
left:15px;
}
#circo-gif-j {
position:fixed;
top:370px;
left:47px;
}
#menu {
position:fixed;
top:550px;
left:44px;
color:#00ff00;
}
#lc {
color:#00ff00;
}
#mesabolo {
position:fixed;
top:540px;
left:960px;
}
#bolo {
position:fixed;
top:470px;
left:1018px;
}
#computador {
position:fixed;
top:394px;
left:700px;
}
</style>
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg">
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px">
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png">
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif">
</div>
<div id="menu" class="container"><b>• Cartas<br>• Contato</b></div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px">
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px">
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif">
<div id="balao" class="container">
<img src="https://i.imgur.com/pcJDYM7.gif" height="90px">
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif">
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif">
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: fixed;
background-color: #ffe38a;
height: 310px;
margin:auto;
left:210px;
top:190px;
}
.modal-body {padding: 2px 16px;}
#modal-text {
color:#c83434;
}
</style>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("gaiola");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal) {
modal.style.display = "none";
modal2.style.display = "none";
}
});
</script>
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px">
<style>
/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content2 {
position: fixed;
background-color: #ffe38a;
height: 350px;
margin:auto;
left:210px;
top:190px;
}
.modal-body2 {padding: 2px 16px;}
#modal-text2 {
color:#c83434;
}
</style>
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-body2">
<p id="modal-text2">modal text 2<br></p>
</div>
</div>
</div>
<script>
// Get the modal
var modal2 = document.getElementById("myModal2");
// Get the button that opens the modal
var btn2 = document.getElementById("bolo");
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
modal.style.display = "none";
}
});
</script>
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px">
<style>
/* The Modal (background) */
.modal3 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content3 {
position: fixed;
background-color: #ffe38a;
height: 350px;
margin:auto;
left:210px;
top:190px;
}
.modal-body3 {padding: 2px 16px;}
#modal-text3 {
color:#c83434;
}
</style>
<div id="myModal3" class="modal3">
<!-- Modal content -->
<div class="modal-content3">
<div class="modal-body3">
<p id="modal-text3">modal text 3</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal3 = document.getElementById("myModal3");
// Get the button that opens the modal
var btn3 = document.getElementById("computador");
// When the user clicks the button, open the modal
btn3.onclick = function() {
modal3.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.addEventListener('click', function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
});
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I am not 100% sure if I understood what you wanted to implement. However, The cause of the problem here might be from the complexity of how everything is in one place which leaves large room for mistakes.
Please try to
Place all your CSS should be placed in the head section if you won't use an external file.
Place your JavaScript properly in the head/before end of the body tag based on what it does. if you won't use an external file.
You don't need to duplicate CSS more than once if the group of elements will share the same style. just use the same class across those elements.
The modal should be pushed down to the bottom of the page to make it easier for your to modify your HTML file.
In cases like this one you should use loops and arrays to minimize the repition of actions (I do understand that you are completely new to it, this is why I am trying to tell you what you can look up.)
I modified your code and applied some changes now all you need to do if you will add a new modal is add a new line to the Array with both the modal's id and its container's id.
Your full page code be found at the bottom of my answer, the following is a snippet for you to preview the code. if this not what you needed can you please explain further maybe I can help?
//Array with a list of the modal id and conatiner id
var modalsArray = [
["modal1", "gaiola"],
["modal2", "bolo"],
["modal3", "computador"],
];
//stores the currently visible modal
var visibleModal;
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(e) {
if (e.target == visibleModal) {
visibleModal.classList.remove("visible");
visibleModal = "";
document.getElementById('overlay').style.display = 'none';
}
});
//Iterate through the modalsArray and add a click event listener
for (let modal = 0; modal < modalsArray.length; modal++) {
document
.getElementById(modalsArray[modal][1])
.addEventListener("click", function(e) {
for (let mod = 0; mod < modalsArray.length; mod++) {
if (
e.target.offsetParent ==
document.getElementById(modalsArray[mod][1])
) {
//add the visible class to show the modal
document
.getElementById(modalsArray[mod][0])
.classList.add("visible");
//store the currently visible modal in the visible modal variable
visibleModal = document.getElementById(modalsArray[mod][0]);
// stops the click event from propagating up which would hide the modal again
document.getElementById('overlay').style.display = 'block';
e.stopPropagation();
}
}
});
}
.container {
position: fixed;
top: 150px;
}
.container2 {
position: relative;
right: 20px;
}
.container3 {
position: relative;
}
#intro-j {
position: fixed;
top: 196px;
left: 44px;
color: #ffff00;
}
#balao {
position: fixed;
top: 370px;
left: 966px;
}
#bem-vindo {
position: fixed;
top: 100px;
left: 423px;
}
#logoblog {
position: fixed;
top: -2px;
left: 51px;
}
#gaiola {
position: fixed;
top: 450px;
left: 330px;
}
#lona {
position: fixed;
left: 248px;
top: 15px;
}
#counter {
position: fixed;
top: 540px;
left: 170px;
}
#janela {
position: fixed;
top: 170px;
left: 15px;
}
#circo-gif-j {
position: fixed;
top: 370px;
left: 47px;
}
#menu {
position: fixed;
top: 550px;
left: 44px;
color: #00ff00;
}
#lc {
color: #00ff00;
}
#mesabolo {
position: fixed;
top: 540px;
left: 960px;
}
#bolo {
position: fixed;
top: 470px;
left: 1018px;
}
#computador {
position: fixed;
top: 394px;
left: 700px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: fixed;
background-color: #ffe38a;
height: 50%;
width: 50%;
margin: auto;
left: 25%;
top: 25%;
}
.modal-body {
padding: 2px 16px;
}
#modal-text {
color: #c83434;
}
.visible {
display: block !important;
z-index: 3;
}
#overlay {
position: fixed;
/* Sit on top of the page content */
display: none;
/* Hidden by default */
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
/* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other elements */
cursor: pointer;
/* Add a pointer on hover */
}
<body bgcolor="#FF6842">
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg" />
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px" />
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png" />
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif" />
</div>
<div id="menu" class="container">
<b>• Cartas<br />• Contato</b>
</div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px" />
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px" />
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif" />
<div id="balao" class="container">
<img src="https://i.imgur.com/pcJDYM7.gif" height="90px" />
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif" />
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif" />
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px" />
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 - GAIOLA-->
<div id="modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<!-- Modal 2 - Computador-->
<div id="modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 2</p>
</div>
</div>
</div>
<!-- Modal 3 - Computador-->
<div id="modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 3</p>
</div>
</div>
</div>
<div id="overlay"></div>
<html>
<head>
<style>
.container {
position: fixed;
top: 150px;
}
.container2 {
position: relative;
right: 20px;
}
.container3 {
position: relative;
}
#intro-j {
position: fixed;
top: 196px;
left: 44px;
color: #ffff00;
}
#balao {
position: fixed;
top: 370px;
left: 966px;
}
#bem-vindo {
position: fixed;
top: 100px;
left: 423px;
}
#logoblog {
position: fixed;
top: -2px;
left: 51px;
}
#gaiola {
position: fixed;
top: 450px;
left: 330px;
}
#lona {
position: fixed;
left: 248px;
top: 15px;
}
#counter {
position: fixed;
top: 540px;
left: 170px;
}
#janela {
position: fixed;
top: 170px;
left: 15px;
}
#circo-gif-j {
position: fixed;
top: 370px;
left: 47px;
}
#menu {
position: fixed;
top: 550px;
left: 44px;
color: #00ff00;
}
#lc {
color: #00ff00;
}
#mesabolo {
position: fixed;
top: 540px;
left: 960px;
}
#bolo {
position: fixed;
top: 470px;
left: 1018px;
}
#computador {
position: fixed;
top: 394px;
left: 700px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: fixed;
background-color: #ffe38a;
height: 50%;
width: 50%;
margin: auto;
left: 25%;
top: 25%;
}
.modal-body {
padding: 2px 16px;
}
#modal-text {
color: #c83434;
}
.visible {
display: block !important;
z-index: 3;
}
#overlay {
position: fixed;
/* Sit on top of the page content */
display: none;
/* Hidden by default */
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
/* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other elements */
cursor: pointer;
/* Add a pointer on hover */
}
</style>
</head>
<body bgcolor="#FF6842">
<div class="container">
<img src="https://i.imgur.com/0uGRDgL.png" alt="Cortinas" height="600px" width="1250px" id="bg" />
<div id="mesabolo" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/MKP2Ezx.png" height="170px" />
<div id="janela" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/TEFvChC.png" />
<div id="intro-j" class="container">text</div>
<div id="circo-gif-j" class="container">
<img src="https://www.gif.ovh/portuguese-gif/Palha%C3%A7o%20Gif/Palha%C3%A7o%20Gif%20(21).gif" />
</div>
<div id="menu" class="container">
<b>• Cartas<br />• Contato</b>
</div>
</div>
<div id="lona" class="container" class="container2">
<img src="https://i.imgur.com/ZHX8oEe.png" height="700px" />
<div id="counter" class="container" class="container2" class="container3">
<img src="https://i.imgur.com/pGkiIuH.png" height="200px" width="850px" />
<div id="bem-vindo" class="container">
<img src="https://gifimage.net/wp-content/uploads/2018/05/seja-bem-vindo-gif-6.gif" />
<div id="balao" class="container">
<a href="javascript:alert('---');"><img src="https://i.imgur.com/pcJDYM7.gif"
height="90px" /></a>
</div>
<div id="logoblog" class="container">
<img src="https://i.imgur.com/CLC5YzA.gif" />
<!--GAIOLA-->
<div id="gaiola" class="container">
<img src="https://i.imgur.com/zlmgazC.gif" />
</div>
<!--BOLO-->
<div id="bolo" class="container">
<img src="https://i.imgur.com/RjoYsYb.gif" height="90px" />
</div>
<!--COMPUTADOR-->
<div id="computador" class="container">
<img src="https://i.imgur.com/s4sHQ1V.gif" height="200px" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal 1 - GAIOLA-->
<div id="modal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 1</p>
</div>
</div>
</div>
<!-- Modal 2 - Computador-->
<div id="modal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 2</p>
</div>
</div>
</div>
<!-- Modal 3 - Computador-->
<div id="modal3" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<p id="modal-text">modal text 3</p>
</div>
</div>
</div>
<div id="overlay"></div>
<!--Scripts start-->
<script>
//Array with a list of the modal id and conatiner id
var modalsArray = [
["modal1", "gaiola"],
["modal2", "bolo"],
["modal3", "computador"],
];
//stores the currently visible modal
var visibleModal;
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function (e) {
if (e.target == visibleModal) {
visibleModal.classList.remove("visible");
visibleModal = "";
document.getElementById('overlay').style.display = 'none';
}
});
//Iterate through the modalsArray and add a click event listener
for (let modal = 0; modal < modalsArray.length; modal++) {
document
.getElementById(modalsArray[modal][1])
.addEventListener("click", function (e) {
for (let mod = 0; mod < modalsArray.length; mod++) {
if (
e.target.offsetParent ==
document.getElementById(modalsArray[mod][1])
) {
//add the visible class to show the modal
document
.getElementById(modalsArray[mod][0])
.classList.add("visible");
//store the currently visible modal in the visible modal variable
visibleModal = document.getElementById(modalsArray[mod][0]);
// stops the click event from propagating up which would hide the modal again
document.getElementById('overlay').style.display = 'block';
e.stopPropagation();
}
}
});
}
</script>
</body>
</html>
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
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! :)
I (newbie in MVC) added a preloader with jquery in the layout page, which should be loaded on every page load in MVC.
The problem is it fires only on the login page, but does not fires on the subsequent pages. Is there any way to make it generic ?
......................
<script type="text/javascript">
$(window).load(function () {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
<style type="text/css">
.no-js #loader
{
display: none;
}
.js #loader
{
display: block;
position: absolute;
left: 100px;
top: 0;
}
.se-pre-con
{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(images/Preloader_3.gif) center no-repeat #fff;
}
</style>
</head>
<body>
<div id="wrapper">
#Html.Action("Navbar", "Navbar", new { controller = ViewContext.RouteData.Values["Controller"].ToString(), action = ViewContext.RouteData.Values["Action"].ToString() })
<div id="page-wrapper">
<div id="main">
<div class="ptcontainer">
<div id="loader" class="se-pre-con"></div>
#RenderBody()
</div>
<div id="footer">
</div>
</div>
</div>
</div>
Thanks in Advance!
You code is correct but you need to but slash to the background url image
background: url(/images/Preloader_3.gif) center no-repeat #fff;
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.