Position div to the corner of the button clicked - javascript

As shown in above image, I need to position DIV on the corner of the button clicked. This button can be any where on the page but when clicked it is opening a div and I want to set the position so it opens the div on its corner like in the image.
The div I want to open will be outside of div containing the button.
function openPopup() {
document.getElementById('test').style.display = 'contents';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
.popup-div {
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
display: none;
}
.popup {
position: absolute;
top: 0px;
left: 0px;
margin: 100px auto;
width: 200px;
height: 150px;
font-family: verdana;
font-size: 13px;
padding: 10px;
background-color: rgb(240, 240, 240);
border: 2px solid grey;
z-index: 100000000000000000;
display: none
}
.cancel {
display: relative;
cursor: pointer;
margin: 0;
float: right;
height: 10px;
width: 14px;
padding: 0 0 5px 0;
background-color: red;
text-align: center;
font-weight: bold;
font-size: 11px;
color: white;
border-radius: 3px;
z-index: 100000000000000000;
}
.cancel:hover {
background: rgb(255, 50, 50);
}
<div id="test" class=" popup-div">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
<button onClick="openPopup();">BUTTON</button>

html:
<div class="container">
<button>Button</button>
<div id="popup"></div>
</div>
css:
.cont {
position: relative;
}
#popup {
position: absolute;
top: /* insert button height (incl. padding) here */
}

.container {
border: 2px solid red;
}
#popup {
display: none;
position: absolute;
top: 10px;
right: 15px;
height: 85%;
width: 40%;
background: red;
font-size: 55px;
color: #fff;
text-align: center;
}
h1 {}
.clsbtn {
margin-left: 80%;
}
<br> <br> <br> <br> <br> <br>
<div class="container">
<br> <br> <br>
<button onclick="document.getElementById('popup').style.display='block'">Button</button>
<div id="popup">
<span onclick="document.getElementById('popup').style.display='none'" class="clsbtn">×</span>
<h1> div </h1>
</div>
</div>

Related

How to place the top left of a div element to the top right of a button?

I am trying to place the top right of the div element friend_info to the top left of the button friend_button.
I have tried to use the code from https://javascript.info/coordinates#element-coordinates-getboundingclientrect but to no avail and I also tried to use this code:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.friend_info').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
> });
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
> });
but the div element disdplays in the middle of the button instead of the left hand side. Here is the html and css for the code I am working on.
HTML:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="test.css">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
</head>
<body>
<div class="header">
<h1 class="Search_Media">Search Media</h1>
<div class="navigationbar">
<form>
<input type="text" placeholder="Search...">
<input type="submit" value="Search">
</form>
</div>
</div>
<br />
<div class="middle">
<div class="headings">
<a class="active" href="Main_Page.html">Home</a>
Messages
Friends
User page
</div>
<div class="friends">
<h2>Friends</h2>
<button type="button" class="friend-button" id="friend-button">
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info">
<video autoplay muted loop class="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-5">
<p class="info">Phone Number: 07914836605</p>
<p class="info">Name: Joe</p>
<p class="info">Surname: Smith</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 14/02/2003</p>
</div>
</div>
</div>
</div>
</div>
<div class="middle-grid">
<div class="user-post">
Create post:<br>
<form>
<textarea id="create_post" rows="10" cols = "50"></textarea><br>
<input type="submit" class="post-button" value="Post">
</form>
</div>
<div class="posts">
<div class="post">
<h3 id="existing_posts"><img src="default-pic.png" class="profile-pic" alt="Default Picture" width="50" height="50">Posts</h3>
<p>This is an example of a post. It will need to be boxed and made so that the name of the user goes above
the name of the likes and dislikes of the posts are to the left of the post and that the reply and report
functionalities are at the bottom right of the posts. It will also need a box around it to show where the post starts and ends.</p>
<div class="options">
Like
Comment
Report
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<button onclick="topFunction()" id="myBtn" title="Go To Top">Top</button>
</div>
<script src="Main_Page.js"></script>
</body>
</html>
CSS:
body{
background-color: black;
color: white;
}
.Search_Media{
position: fixed;
top: 0px;
left: 0%;
padding: 10px;
width: 100%;
background-color: aqua;
z-index: 0;
color: black;
margin-top: 0px;
}
.Search-media{
text-decoration: none;
color: black;
}
.Search-media:hover{
text-decoration: none;
color: black;
}
.navigationbar{
background-color: aqua;
width: auto;
position: fixed;
padding-top:15px;
left: 50%;
margin-left: -88.5px;
color: black;
}
.headings{
left:20.17%;
height: 100;
width: 200;
position: fixed;
margin-top: 40px;
background-color: black;
}
.headings a{
padding: 6px 0px 6px 0px;
text-decoration: none;
font-size: 20px;
color: white;
display: block;
}
.headings a:hover{
color: black;
background-color: aqua;
}
.headings a.active{
background-color: aqua;
color: black;
}
.friend-button{
width: 90%;
margin-bottom: 1px;
background-color: black;
color: white;
cursor: pointer;
border-radius: 5px;
}
.friend-button:hover{
background-color: aqua;
color: black;
}
.middle{
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 10px;
margin: 0% auto;
width: 75%;
height: auto;
text-align: center;
}
.middle-grid{
border-right: 1px solid white;
border-left: 1px solid white;
padding-top: 37px;
width: 50%;
}
.user-post{
width: auto;
margin: 0% auto;
}
.post-button{
margin: 0% auto;
color: black;
padding-right: 50;
padding-left: 50;
padding-top: 5;
padding-bottom: 5;
}
textarea{
resize: none;
color: black;
}
h3{
margin-top: 5px;
margin-bottom: 1px;
}
.posts{
width:75%;
text-align: left;
padding:10px;
margin-left: auto;
margin-right:auto;
}
.post{
padding-bottom: 20px;
}
.post:nth-child(odd){
color: black;
background-color: lightblue;
z-index: 2;
}
.post p{
margin-top: 5px;
}
.options{
float: right;
}
.options .report{
color: red;
}
h2{
margin-top: auto;
margin-bottom: auto;
}
.friends{
position: fixed;
right: 10%;
margin-top: 70px;
padding: 0px;
margin-bottom: auto;
border: 1px solid white;
width: 15%;
overflow-y: scroll;
top: 0;
bottom: 0;
}
.media-body{
text-align: left;
}
h5{
font-size: 20;
margin-bottom: 2px;
}
#myBtn {
display: none;
position: fixed;
top: 95%;
left: 50%;
margin: 0% auto;
transform: translate(-50%, -50%);
z-index: 99;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
font-size: 18px;
}
#myBtn:hover {
background-color: darkred;
}
.friend_info{
display: none;
position: fixed;
width: 20vw;
height: 20vh;
text-align: center;
left: 0px;
right:0px;
top: 0px;
}
.backgroundInfo{
position: inherit;
z-index: -99;
max-width: 800px;
max-height: 600px;
left: inherit;
top: inherit;
}
.d-flex{
color: white;
}
.Friend_Name{
padding: 0px;
margin: 0px;
font-size: 60px;
}
h5{
font-size: 30px;
}
.info{
font-size: 20px;
}
.p-5{
border: 0%;
width: auto;
height: 0px;
bottom: 0px;
left: 0px;
top: 0px;
border-width: 0px;
padding: 2rem !important;
}
I had the correct idea, but wrong execution. The correct javascript is the following:
var friend_button = document.getElementById("friend-button");
var friend_info = document.getElementById("friend_info");
friend_button.addEventListener("mouseover", function(){
var coords = friend_button.getBoundingClientRect();
var coordsOfInfo = $('.backgroundInfo').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
});
friend_button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
});
Notice how I changed which element I got the width off. I changed it to the backgroud width and now displays just how I want.

How to toggle single class in jquery without affecting same class elements?

I'm setting up a reddit-like commenting system on my website. Every comments has a little button in the right corner that collapses the comment.
I have the comment collapse by JQuery toggleClass.
$(".button").click(function() {
$('.bottomtext').toggleClass('bottomtext-small');
$('.upvote').toggleClass('upvote-small');
$('.downvote').toggleClass('downvote-small');
$('.main-content').toggleClass('main-content-small');
$('.button').toggleClass('button-small');
});
The comment collapsing works fine on one comment, but since I toggle the class, every comment collapses. How can I only affect the comment which button I am clicking?
JSFiddle: https://jsfiddle.net/j765rkpc/7/
It seems that you need to get the elements that have those class names and are part of the same post as the clicked button, here is how you can do that:
$(".button").click(function() {
const $post = $(this).closest('.post-container');
$post.find('.bottomtext').toggleClass('bottomtext-small');
$post.find('.upvote').toggleClass('upvote-small');
$post.find('.downvote').toggleClass('downvote-small');
$post.find('.main-content').toggleClass('main-content-small');
$post.find('.button').toggleClass('button-small');
});
.post-container {
background-color: yellow;
margin: auto;
position: relative;
display: flex;
width: 75%;
max-width: 1440px;
}
/*left side*/
.left-side {
position: relative;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
max-width: 50px;
min-width: 50px;
background: lightblue;
padding-left: 5px;
padding-right: 5px;
}
/*main post*/
.post {
margin: 0;
padding: 0;
flex-grow: 1;
}
.main-content p {
margin: 0;
padding: 0;
padding: 10px;
}
.main-content {
margin: 0;
padding: 0;
flex-grow: 1;
}
.contain img {
width: 50%;
}
.toptext {
margin: 0;
padding: 0;
padding-top: 10px;
padding-left: 10px;
height: 20px;
color: #808486;
font-size: 12px;
background-color: lightgrey;
}
.bottomtext {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
}
.bottomtext img {
margin-bottom: -2px;
padding-right: 5px;
}
.toptext b {
color: black;
}
.left-side .upvote {
padding-bottom: 5px;
}
.left-side .downvote {
padding-top: 7px;
}
.username {
color: blue;
}
.main-content-small {
margin: 0;
padding: 0;
flex-grow: 1;
display: none;
}
.contain-small img {
width: 50%;
display: none;
}
.bottomtext-small {
margin: 0;
padding: 0;
padding-left: 5px;
height: 15px;
background: red;
font-size: 14px;
font-weight: bold;
color: #878a8c;
display: none;
}
.left-side .upvote-small {
padding-bottom: 5px;
display: none;
}
.left-side .downvote-small {
padding-top: 7px;
display: none;
}
.button {
position: absolute;
top: 8px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 14px;
width: 20px;
}
.button:hover {
background-color: grey;
}
.button-small {
position: absolute;
top: 5px;
right: 10px;
background-color: white;
border: 1px solid black;
height: 20px;
width: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
When I want to collapse this comment by clicking the button in the corner...
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>
<div class="post-container">
<div class="left-side">
<div> <img class="upvote" src="https://i.imgur.com/AdwzPRs.png" height="15"> </div>
<div> <img class="downvote" src="https://i.imgur.com/XoJ1Jjy.png" height="15"> </div>
</div>
<div class="post">
<p class="toptext">
<input type="button" class="button"></input>
<span class="username">webdev18</span> 33 points 18 minutes ago
</p>
<div class="main-content">
<p class="contain-com">
...both comments collapse.
</p>
<p class="bottomtext">
<img src="https://i.imgur.com/1IIJe1r.png" height="15">Respond
</p>
</div>
</div>
</div>

Make onClick button overlap content with a div

So I need some help with overlapping content on page when a button is being pressed. Right now I have a function for an active button which helps me with opening a div(div panel) and closing it. I just want to know how you would go about making this div panel stetch across the page, when the button is being pressed.
I made it work with the overlap with a function by making my container active but I realised that it was completely wrong and had to change it. So right now (as I said before) I have active buttons.
Try to make it work through my current function with the buttonS, but nothing really changed. Maybe some z-index? Check the code out.
Any suggestions?
Thanks!
Here's the code:
<!--Accordion script-->
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.nextElementSibling.classList.toggle("show");
}
}
//active container overlap
$('button').click(function(event) {
$(this).toggleClass('active');
})
//onClose function and refresh function
//var inFormOrLink;
//$('a').on('click', function() { inFormOrLink = true; });
//$('form').on('submit', function() { inFormOrLink = true; });
//$(window).on("beforeunload", function() {
//return inFormOrLink ? "Do you really want to close?" : null;
//})
body {
width: 100% margin: 0 auto;
}
.container {
width: 45%;
height: 90%;
position: absolute;
margin-top: 2%;
margin-left: 27%;
background-color: #FAF3E9;
}
#header {
width: 100%;
height: 10%;
background-color: #fff;
}
/*Del 1*/
.d1knapp button {
background-color: #fff;
cursor: pointer;
padding: 18px;
width: 70%;
border: none;
text-align: left;
outline: none;
align-items: center;
margin-top: 3%;
margin-left: 15%;
}
.nextstep button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/*Del 1 slut*/
/*Del 2*/
.box {
width: 70%;
font-size: large;
color: #17202A;
outline: none;
border: none;
padding: 12px;
border: 1px solid grey;
margin-left: 11%;
margin-top: none;
border-radius: 8px;
}
#datum {
width: 80%;
margin: -2% 11%;
}
.datumStart {
width: 30%;
float: left;
padding: 1px;
}
.datumSlut {
width: 30%;
padding: 1px;
float: left;
margin-left: 35%;
}
.skapa button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 5%;
}
/*Del 2 slut*/
/* Del 3 */
button.accordion {
background-color: #fff;
color: #444;
cursor: pointer;
padding: 12px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
margin-top: 2%;
}
button,
.accordion h3 {
text-align: center;
}
button.accordion.active,
button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
max-height: 0;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
}
div.panel.show {
opacity: 1;
max-height: 700px;
}
.container div.active {
height: 91%;
margin-top: 9%;
margin-bottom: 5%;
background-color: #FAF3E9;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
transition-duration: 0.2s;
align-items: center;
text-align: center;
}
#savechanges button {
background-color: #EE7024;
color: #fff;
cursor: pointer;
padding: 5px;
width: 45%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
position: fixed;
}
#addfiles button {
background-color: #158F49;
color: #fff;
cursor: pointer;
padding: 5px;
width: 100%;
border: none;
text-align: center;
outline: none;
margin-top: 16.5%;
}
/* Del 3 slut */
/* Media del 1 */
#media only screen and (max-width: 768px) {
body {
width: 100%;
margin: 0 auto;
}
.container {
width: 80%;
margin: 7% 11%;
}
/* Del 1 */
.d1knapp button {
width: 100%;
align-items: center;
margin-left: 0;
margin-top: 6%;
position: relative;
}
.nextstep button {
position: relative;
width: 100%;
margin-top: 17%;
}
/* Del 1 slut */
/* Del 2 */
#datum {
float: left;
}
.skapa button {
position: relative;
width: 100%;
margin-top: 10%;
}
/* Del 2 slut */
/* Del 3 */
/* Del 3 slut */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="header">
<img class="logo" src="logo.png">
<!--<span style="color: blue; float: right; text-decoration: underline; text-align: center; margin-right: 5%; margin-top: 0.5%; font-family:Arial,serif;"><h3>English</h3></span>-->
</div>
<div class="dokumentation">
<button class="accordion"><h3>Dokumentation</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="rättigheter">
<button class="accordion"><h3>Rättigheter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div class="aktiviteter">
<button class="accordion"><h3>Aktiviteter</h3> </button>
<div class="panel">
<h1> hej </h1>
<div id="addfiles">
<button><h2>Lägg till nya filer</h2></button>
</div>
</div>
</div>
<div id="savechanges">
<button><h2>Spara ändringarna</h2></button>
</div>
</div>
Firstly you have an error in your css, please change body to this:
body {
width: 100%;
margin: 0 auto;
}
Next, Change your container class to this:
.container {
width: 100%;
height: 90%;
position: absolute;
margin-top: 2%;
background-color: #FAF3E9;
}
By setting width:100% each element takes up the entire width of it's parent. So setting the width to 100% for body and container should solve your problem.
As the previous answer stated, you have an error in the definition of the body style. There is a ; missing after width: 100%;
As for your question, you could solve your problem by adding position: absolute to your panels, like so:
div.panel {
padding: 0 18px;
background-color: #FAF3E9;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
text-align: center;
left: 0;
box-sizing: border-box;
position: absolute;
}
You also need to remove the max-height:0 property, to allow the div to expand to the maximum height.
Adding box-sizing: border-box; prevents the panel from adding margings or paddings to the 100% width and in so becoming bigger than their parents.
Also, adding width and height of 100% to your panels when active, makes them fill up the page:
div.panel.show {
opacity: 1;
width: 100%;
height: 100%;
}

Can't figure out how to make button be selected

I'm trying to make it so that you can select the buttons on my quiz but I can't figure out how. I have it set so the option to go to the next page is hidden until you select something, however, I've spent most of today trying to find a way to actually select one of the buttons. I have the hover and active events assigned in my css, but don't know what to do to actually make the button when pressed stay selected.
We aren't allowed to use external libraries like JQuery. Is angularJS considered an external library? May have to ask the professor that.
#import url(http://fonts.googleapis.com/css?family=Titillium+Web:900|Roboto:400,100);
body {
background-color: black;
padding: 20px;
}
#myQuiz {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 400;
width: 650px;
650px;
position: relative overflow: hidden;
color: white;
background: black;
}
#myQuiz h1 {
font-weight: 100;
font-size 2em;
margin: 0px;
position: absolute;
top: 25px;
left: 36px;
}
myQuiz h1 span {
display: block;
font-weight: 900;
font-family: 'Titillium Web', sans- serif;
font-size: 3.2 em;
line-height: 65px;
}
#myQuiz h2 {
font-size: 3em;
margin: 0px;
font-weight: 100;
}
#myQuiz h3 {
font-size: 2em;
margin: 0px;
font-weight: 100;
}
#myQuiz p {
margin: 0px 0px 14px 0px;
}
#myQuiz .btn {
display: inline-block;
cursor: pointer;
background-color: #7E3517;
color: white;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .btn:hover {
background-color: white;
color: black;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .btn:active {
background-color: red;
color: black;
text-decoration: none;
padding: 5px 15px;
border-radius: 6px;
}
#myQuiz .progress {
width: 550px;
position: absolute;
top: 160px;
left: 40px;
}
#myQuiz .progress div {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.2);
transition: background-color 1s;
}
#myQuiz .progress div.on,
#myQuiz .progress div.answered {
background-color: #ef0101;
}
#myQuiz .intro {
position: absolute;
top: 225px;
left: 50px;
width: 550px;
}
#myQuiz .intro p {
margin: 0px 0px 40px 0px;
}
#myQuiz .question {
width: 550px;
position: absolute;
top: 225px;
left: 50px;
}
#myQuiz .question .text {
font-size: 1.6em;
margin: 0px, 0px, 20px, 0px;
}
#myQuiz .question .ans {
display: inline-block;
font-size: 1.1em;
width: 225px;
border: 2px solid red;
border-radius: 6px;
padding 10px;
margin: 0px 15px 15px 0px;
}
#myQuiz .question .ans.selected {
border-color: blue;
}
#myQuiz .question.unanswered .ans {
cursor: pointer;
}
#myQuiz .question.unanswered .ans:hover {
background-color: rgba(163, 111, 155, .2);
}
#myQuiz .question.answered .ans {
cursor: default;
}
#myQuiz .done {
color: yellow;
margin-top: 50px;
transition: opacity 1.5s, margin-top 1.5s;
visibility: hidden;
opacity: 0;
}
#myQuiz .done .btn {
margin-top: 5px;
}
myQuiz .answered . done {
visibility: visible;
opacity: 1;
margin-top: 10px;
}
#myQuiz .results {
position: absolute;
top: 225px;
left: 660px;
width: 550px;
}
<div id="myQuiz">
<h1>Spirit Animal Quiz</h1>
<div class="progress">
<div class="on"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="question">
<form action="">
<p> <input type="radio" class="btn" value="male"> Rough<br></p>
<p><input type="radio" class="btn" value="female"> Soft<br></p>
<p> <input type="radio" class="btn" value="other"> both </p>
</form>
<p class="text">How would you describe your skin?</p>
<p class="btn">Rough</p>
<p class="btn">Smooth</p>
<p class="btn">Both</p>
<div class=d one>
<div class="btn">Next</div>
</div>
</div>
</div>
You can use the css property display to show and hide your next button.
use: display: none; to hide an element display: inline; to return to default
I gave the button and ID of "nxt" for easy access, and added event listeners to all of the buttons (because I don't know which one you want pressed before revealing next) With the onClick event you can do anything that should happen after the click in the callback function.
var btns = document.getElementsByClassName("btn");
for( var i =0; i < btns.length; i++){
btns[i].addEventListener("click", function(){
document.getElementById("nxt").style.display = "inline";
});
}
#nxt{
display: none;
}
#nxt, p.btn{
background-color: black;
color: white;
width : 150px;
height: 40px;
text-align: center;
}
<head>
<meta content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Find Out Your Spirit Animal</title>
<link rel="stylesheet" type="text/css" href="quiz.css">
</head>
<body>
<div id= "myQuiz">
<h1>Spirit Animal Quiz</h1>
<div class = "progress">
<div class="on"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class = "question">
<form action="">
<p> <input type="radio" class= "btn" value="male"> Rough<br></p>
<p><input type="radio" class="btn" value="female"> Soft<br></p>
<p> <input type="radio" class="btn" value="other"> both </p>
</form>
<p class = "text">How would you describe your skin?</p>
<p class = "btn">Rough</p>
<p class = "btn">Smooth</p>
<p class = "btn">Both</p>
<div class = done>
<div class="btn" id="nxt">Next</div>
</div>
</div>
</div>
</body>

jQuery animations work on one element and not another

I've been working on a mockup for an app store, and now that I've built the basic framework I wanted to start using jQuery to make certain things interactive. However, none of the jQuery actions I try will work. What's odd is that if I delete all my code, and then try to run a jQuery action with just one div, then it works. Also, if it helps, I am using the Brackets editor.
My code is below. The blue box is the div I animated before all the other code and the green box is the div I animated after the rest of the code. On my end only the blue div hides on click while the green div does nothing.
What's going wrong?
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
z-index: -1;
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
You've given the .box element a z-index of -1. This places the element behind the <body> tag and makes it unable to be clicked.
The purpose of the z-index is not apparent, so I've removed it in my example, below, and both boxes are successfully hidden on click.
$(document).ready(function() {
$(".scroll-menu").click(function() {
$(".scroll-menu").hide();
});
$(".box").click(function() {
$(".box").hide();
});
});
.box {
margin-top: 20em;
position: relative;
width: 10em;
height: 20em;
background: green;
left: 20em
}
.scroll-menu {
background: blue;
height: 300px;
width: 500px;
margin: auto;
}
nav {
position: absolute;
height: 100%;
width: 16em;
left: 0;
top: 0;
background: #f5f5f5;
border-right: .1em solid grey
}
.mini-menu {
position: relative;
background: #E3E0E6;
top: 5em;
height: 32em
}
.top-menu {
position: relative;
top: 5em;
list-style-type: none;
margin-left: -1em;
}
.top-menu li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1.1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.top-menu li:hover {
background: #725490;
}
.top-menu li a {
text-decoration: none;
color: #000000
}
.top-menu li:hover a {
color: white;
}
.mini-menu ul li {
position: relative;
padding-top: .2em;
padding-bottom: .2em;
font-size: 1em;
font-family: droid-sans;
font-weight: ;
border-radius: .5em;
margin-right: .5em;
margin-top: .5em;
margin-left: -.5em;
padding-left: 1em;
}
.mini-menu ul {
position: relative;
top: .9em;
list-style-type: none;
margin-left: -1em;
}
.mini-menu ul li a {
text-decoration: none;
color: rgb(109, 52, 150);
}
.mini-menu a:hover {
color: #ab6bb1
}
.header {
position: absolute;
height: 5em;
width: 100%;
left: 0;
top: 0;
background: white;
z-index: 1;
border-bottom: .12em solid grey
}
.logo {
position: relative;
width: 10em;
height: auto;
left: 2em;
top: 2em
}
.app {
positio: relative;
margin-left: 8.8em;
margin-top: -.1em;
font-family: antic, ;
font-size: 1.4em
}
.search {
position: relative;
left: 12em;
top: -2em;
width: 15em;
border: .06em solid grey;
font-family: antic, ;
font-size: 1.9em;
padding-left: .5em
}
form i {
position: relative;
left: 11.5em;
top: -1.9em;
color: purple;
cursor: pointer;
}
.icon-open {
position: absolute;
top: 5em;
cursor: pointer;
z-index: 4;
left: 19em
}
.icon-open i {
cursor: pointer
}
{
position: relative;
background: green;
height 30em;
width: 6em;
top: 30em;
left: 50em;
border: solid;
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box"></div>
<div class="scroll-menu"></div>
<nav>
<ul class="top-menu">
<li> Home</li>
<li> Popular</li>
<li>Trending</li>
<li>Collections</li>
</ul>
<div class="mini-menu">
<ul>
<li>Diagnosis & Staging</li>
<li>Image Review</li>
<li>Rx & Protocols</li>
<li>Planning</li>
<li>Chart Checks & Reviews</li>
<li>Calibration</li>
<li>Policy & Procedure</li>
<li>Certifications</li>
<li>Connected Clinical</li>
<li>Messaging</li>
<li>Utilities</li>
<li>Interfaces</li>
<li>Acounting & Finance</li>
<li>Clinical Analytics</li>
</ul>
</div>
</nav>
<div class="header">
<img src="MedLever-Logo-HighRes.png" class="logo">
<p class="app">App Store</p>
<form>
<input type="text" autocomplete="on" name="search" class="search">
<i class="fa fa-search fa-2x"></i>
</form>
</div>
<div class="icon-open">
<i class="fa fa-bars"></i>
</div>
Below is a demonstration of an element being placed behind the <body>. I've given the <body> a white background with an opacity of 0.9. Notice that the second green box has a white overlay because it's been placed behind the <body> with z-index:-1. Also notice that the first box can be clicked, but the second cannot.
html,body {
background-color:rgba(255,255,255,.9)
}
.box {
position:relative;
width: 10em;
height: 20em;
background: green;
display:inline-block;
}
.behind {
z-index:-1;
}
CLICK
CAN'T CLICK

Categories