komenda "onclick" dodana po div z klasą "point" nie wywołuje żadnej funkcji,
(Próbowałam napisać osobną funkcję, która nie wywoływała się, podpięłam więc działającą funkcję expand pod ten element [point], co również nic nie dało, stąd stwierdziłam, że problem musi być z kliknięciem, a element na pewno leży na najwyższej warstwie, nie wiem więc, skąd się bierze problem)
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Plastic</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" >
<script src="main.js"> </script>
</head>
<body>
<h2> Main Page <h2>
<div class= "toggle" id="toggle" onclick="expand()"></div>
<div class= "menuv2" id="menuv2">
<a href ="present.html"> <div class="presentv2" id="presentv2"> </div> </a>
<a href ="future.html"> <div class="futurev2" id="futurev2"> </div> </a>
</div>
<div class="stuff" id="stuff"></div>
<div class="exit"id="exit" onclick="exit()"> x </div>
<div class="controler">
<div class="bar"> </div>
<div class="loadingbar" id="loadingbar"> </div>
<div class="points">
<li><div class= "point" id="point" onclick="expand()"> </div></li>
<li><div class= "point2" id="point2" > </div></li>
<li><div class= "point3" id="point3"> </div>
</div>
</div>
</body>
</html>
CSS:
h2{
text-align: center;
}
.bar{
background-color: grey;
width: 500px;
height: 25px;
border: 2px solid black;
position: absolute;
z-index: 0;
}
.loadingbar{
background-color: green;
width: 500px;
height: 20px;
position: absolute;
top:72px;
z-index: 1;
}
.points li{
background-color: grey;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid black;
list-style: none;
position: absolute;
z-index: 2;
cursor: pointer;
}
.points li:nth-child(2){
left:225px;
}
.points li:nth-child(3){
left:450px;
}
.stuff{
width: 500px;
height: 500px;
background-color: black;
transform: scale(1);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: -2;
opacity: 0;
transition: 0.7s;
border-radius: 30%;
}
.exit{
width:50px;
height:50px;
background-color: orange;
position: absolute;
top: 150px;;
bottom: 0;
left: 500px;
right: 0;
border-radius: 50%;
z-index: -1;
transform: scale(0);
transition: 0.7s;
cursor:pointer;
}
.toggle{
background-color: pink;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
text-align: center;
height: 100px;
width: 100px;
transition: 0.7s;
z-index: 1;
}
.presentv2{
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
text-align: center;
height: 100px;
width: 100px;
transition: 0.7s;
opacity: 0;
z-index: -1;
}
.futurev2{
background-color: blue;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
text-align: center;
height: 100px;
width: 100px;
transition: 0.7s;
opacity: 0;
z-index: -1;
}
javascript
function expand(){
document.getElementById("presentv2").style.left="400px";
document.getElementById("presentv2").style.opacity="1";
document.getElementById("futurev2").style.left="-400px";
document.getElementById("futurev2").style.opacity="1";
document.getElementById("stuff").style.opacity="0.5";
document.getElementById("exit").style.transform="scale(1)";
document.getElementById("toggle").style.zIndex="-3";
}
function exit(){
document.getElementById("presentv2").style.left="0";
document.getElementById("presentv2").style.opacity="0";
document.getElementById("futurev2").style.left="0";
document.getElementById("futurev2").style.opacity="0";
document.getElementById("stuff").style.opacity="0";
document.getElementById("exit").style.transform="scale(0)";
document.getElementById("toggle").style.zIndex="1";
}
[Tak wiem, że kod może mieć masę błędów, naprawde zaczynam dopiero z tematem]