I want the div tag with id="hidden-gift-order" to be hidden when I click on the input and the div with class="checkmark". When I click on the input it works but the div tag when clicked on doesn't work. Can someone explain why so?
function Toggle_Visibility(p1) {
document.getElementById(p1).classList.toggle("d-none");
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="form-field col-lg-12 mb-6">
<label class="checkbox-container ps-4 cursor-pointer" id="orderasgift">
<input id="giftbox" onclick="Toggle_Visibility('hidden-gift-order')" class="gift-order-checkbox" type="checkbox">
<div class="checkmark" onclick="Toggle_Visibility('hidden-gift-order')"></div>
</label>
</div>
<div class="d-none" id="hidden-gift-order">...</div>
UPDATE:
So, the div tag is a custom checkbox and I wanted to use that instead of the default one given to us. When I click on input and div inside the label, I want it to trigger Toggle_Visibility() and toggle the d-none class of the div#hidden-gift-order.
I am adding the CSS part of the code too!
PS: The Code snippet is not working so don't mind that, thanks!
CSS:
/* Hide the browser's default checkbox */
.checkbox-container .gift-order-checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: var(--bs-white);
border: solid var(--bs-primary);
}
/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
background-color: var(--bs-light);
}
/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
background-color: var(--bs-white);
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--bs-primary);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
color: var(--bs-primary);
}
try to dont put input and div in label because when you click div the input is clicked too , i try this and its works :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer>
function Toggle_Visibility(p1) {
document.getElementById(p1).classList.toggle("d-none");
}
</script>
</head>
<body>
<div class="form-field col-lg-12 mb-6">
<input
id="giftbox"
onclick="Toggle_Visibility('hidden-gift-order')"
class="gift-order-checkbox"
type="checkbox"
/>
<div
class="checkmark"
onclick="Toggle_Visibility('hidden-gift-order')"
>sdf
</div>
</div>
<div class="d-none" id="hidden-gift-order">...</div>
</body>
</html>
Related
I am currently trying to make a board game in the style of memory (I am self taught, and things like that help me great in understanding javascript). My question is probably basic stuff, but I am new to all of this so I appreciate any help.
My problem is that I have two cards with the same class, and with my code, when I click on first or second one, it only works on the first card.
document.querySelectorAll(".first-card").forEach(container => {
container.addEventListener('click', flipCard)
})
function flipCard() {
document.querySelector(".first-card").classList.toggle("flip")
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 100px;
display: flex;
}
.first-card,
.second-card {
width: 100px;
height: 150px;
border: 3px solid black;
border-radius: 10px;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
margin: 10px;
}
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
.first-card .front {
background: lightblue;
width: 100%;
height: 100%;
}
.second-card .front {
background: red;
width: 100%;
height: 100%;
}
.first-card .back,
.second-card .back {
background: black;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/CSS" href="memory.css" />
</head>
<body>
<div class="first-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="first-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<script src="memory.js"></script>
</body>
</html>
Like I said, I am only beginner, so any help or explanation is welcome.
Thank you
It "doesn't work" because in your flipCard function you're getting the first element that matches with the className fist-card. This element will be always the same one. Just change your function to this:
function flipCard(v){
v.currentTarget.classList.toggle("flip")
}
use below
function flipCard(event){
event.target.classList.toggle("flip")
}
evt.currentTarget, which would refer to the parent in this context. So it would not be handy for you I believe.
see mdn for it
I am creating a sidebar menu composed by 3 divs, these 3 divs should expand in "width" 100% of the menu width but they don't. I have checked to make sure that all tags/divs are closed and make sure that are all displayed as grid and put on each width 100% but still they don't expand to 100% width of their container. Why is that and how to fix it?
Here is my code:
*,
html {
margin: 0;
border: 0;
box-sizing: border-box;
color: #fff;
font-family: pc_seniorregular;
font-weight: 400;
}
.mobile,
.tablet,
.laptop {
display: none;
}
body {
height: 100vh;
width: 100vw;
overflow: hidden;
background-color: #16202a;
/* border: 5px solid blue; */
}
div,
menu,
header,
footer {
border: dotted 2px yellow;
display: grid;
height: 100%;
width: 100%;
}
.desktop {
height: 100%;
width: 100%;
/* border: 5px solid greenyellow; */
}
.dash-desk-wrap {
grid-template-columns: 1fr 4fr;
height: 100%;
width: 100%;
/* border: 5px solid red; */
}
/* SIDEBAR */
/* SIDEBAR */
/* SIDEBAR */
.dash-desk-sidebar {
display: grid;
grid-template-rows: 0.7fr 7fr 1fr;
height: 100%;
width: 100%;
border: 5px dotted blue;
}
.dash-desk-side-logo {
border: 3px dotted beige;
}
.dash-desk-side-list {
border: 3px dotted red;
}
.dash-desk-side-social {
border: 3px dotted green;
}
/* MAIN */
/* MAIN */
/* MAIN */
.dash-desk-main-wrap {
grid-template-rows: 0.5fr 1fr 4fr 0.5fr;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<title>Base Template</title>
</head>
<body>
<div class="mobile">
<h1>mobile</h1>
</div>
<div class="tablet">
<h1>tablet</h1>
</div>
<div class="laptop">
<h1>laptop</h1>
</div>
<div class="desktop">
<div class="dash-desk-wrap">
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<!-- SIDEBAR -->
<menu class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</menu>
<!-- MAIN -->
<!-- MAIN -->
<!-- MAIN -->
<div class="dash-desk-main-wrap">
<header></header>
<div></div>
<div></div>
<footer></footer>
</div>
</div>
</div>
</body>
</html>
Either make the menu class as div
<div class="dash-desk-sidebar">
<div class="dash-desk-side-logo">
<p>Logo</p>
</div>
<div class="dash-desk-side-list">
<p>Side</p>
</div>
<div class="dash-desk-side-social">
<p>Social</p>
</div>
</div>
or make a div below menu uwing the same.
Looking at your layout in code inspector it looks like browsers add default padding to menus.
For example, Google Chrome adds a padding-inline-start: 40px to <menu> elements.
Therefore, you can remove it by either declaring
.dash-desk-sidebar {
padding-inline-start: 0;
}
or
.dash-desk-sidebar {
padding: 0;
}
Alternatively, you can use a div instead of a menu.
If I understand you correctly you just have to add padding: 0 to .dash-desk-sidebar, because it has a "left padding" at the moment.
.dash-desk-sidebar {
padding: 0;
}
I have been trying for hours to get my playing cards to flip when the player clicks on them. When the eventListener is fired it should run the flip function which toggles between the front/backsides of a card. What am I doing wrong?
const playingCards = document.querySelectorAll('.playing-cards');
function flipCard(){;
this.classList.toggle("flip")
}
playingCards.forEach((card) => card.addEventListener("click", flipCard));
.playing-cards{
display: inline-block;
padding: 20px;
position: relative;
cursor: pointer;
}
.playing-cards .flip{
transform: rotateY(180deg);
}
.front-card{
background-color: aqua;
width: 300px;
height: 300px;
transform: rotateX(0deg);
}
.back-card{
background-color: greenyellow;
width: 300px;
height: 300px;
transform: rotateY(180deg);
}
.front-card,
.back-card{
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<div class="memory-game">
<div class="playing-cards">
<div class="front-card">A</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">B</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">a</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">b</div>
<div class="back-card"></div>
</div>
</div>
<body>
<script src=index.js></script>
</body>
</html>
Answer derived from here
const playingCards = document.querySelectorAll('.playing-cards');
function flipCard() {
this.classList.toggle("flip")
}
playingCards.forEach((card) => card.addEventListener("click", flipCard));
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.memory-game {
background-color: transparent;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.playing-cards {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
cursor: pointer;/*clickable-cursor*/
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.playing-cards.flip {
transform: rotateY(180deg);
}
/* Position the front and back side */
.front-card, .back-card {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.front-card {
background-color: aqua;
color: black;
}
/* Style the back side */
.back-card {
background-color: greenyellow;
color: white;
transform: rotateY(180deg);
}
<div class="memory-game">
<div class="playing-cards">
<div class="front-card">A</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">B</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">a</div>
<div class="back-card"></div>
</div>
<div class="playing-cards">
<div class="front-card">b</div>
<div class="back-card"></div>
</div>
</div>
Edit: Added cursor effect
I am trying to create this page where I have different div and buttons that are scattered on the page and connecting them using jquery connections by musclesoft
I have tried this code but it seems that the connection isn't happening at all, I can't figure out what the issue is?
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- Include jQuery and the Connections plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<!-- Connect your elements like in this example -->
<script>
jQuery(document).ready(function() {
$('div').connections();
});
</script>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by rasbsal</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<button>
Text
</button>
</div>
<div>
<button class="about">
About
</button>
</div>
</body>
</html>
The connections are not visible because there's actually no space between the div elements (go to Inspect Element in Dev Tools and see for yourself highlighting the two DIV elements).
Use button as your connecting selector
jQuery(($) => {
$('button').connections();
});
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<div>
<button>Text</button>
</div>
<div>
<button class="about">About</button>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/musclesoft/jquery-connections#1.0.1/jquery.connections.js"></script>
I have a sticky Ads at the footer with a HIDE button, I want when I click HIDE .stickyads content should be hidden by sliding down, but HIDE but should be appearing so as when I clcik again, the .stickyads content should appear by sliding up.
CSS:
#media (max-width: 800px) {
.stickyads {
position: fixed;
bottom: 0px;
left: 0;
}
.stickyadsHide {
width: 30px;
height: 30px;
display: flex;
position: absolute;
right: 0px;
top: -30px;
}
.stickyads .stickyadsContent {
overflow: hidden;
display: block;
position: relative;
width: 100%;
}
}
HTML Part:
<div class='stickyads'>
<div class='stickyadsHide' >
<span>HIDE</span>
</div>
<div class='stickyadsContent'>
Content Here...
</div>
</div>
button = document.querySelector('.stickyadsHide');
adCont = document.querySelector('.stickyadsContent');
hide = document.querySelector('.hide');
show = document.querySelector('.show');
button.addEventListener("click", () => {
adCont.classList.toggle('visbility');
hide.classList.toggle('visbility');
show.classList.toggle('visbility');
});
.stickyadsHide {
width: 50px;
height: 50px;
}
.btn {
position: absolute;
}
.stickyadsContent,
.btn {
opacity: 0;
transition: opacity 0.5s;
}
.visbility {
opacity: 1;
transition: opacity 0.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class='stickyads' id='removeads'>
<div class='stickyadsHide'>
<span class="btn hide visbility">HIDE</span>
<span class="btn show">SHOW</span>
</div>
<div class='stickyadsContent visbility'>
Content Here...
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I think this is what you are looking for. slideToggle
HTML
<div class='stickyads'>
<div class='stickyadsHide' >
<span>HIDE</span>
</div>
<div class='stickyadsContent'>
Content Here...
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
CSS
.stickyads {
position: fixed;
bottom: 0px;
left: 0;
}
.stickyadsHide {
width: 30px;
height: 30px;
}
.stickyads .stickyadsContent {
overflow: hidden;
display: block;
position: relative;
width: 100%;
}
jQuery
$('.stickyadsHide').click(function() {
$('.stickyadsContent').slideToggle();
});
Check this link