Develop Reference

How to prevent the click event in JQuery?

There is one toggle switch, When click on a toggle it switches ON and popup with close and Ok button appears.
But if I again click on a toggle then it switches off and toggle disappears.
The actual requirement is, with a every click for which the toggle switches ON and popup appears, the toggle switch should not get switch OFF until user click on close button which is present in popup.
http://jsfiddle.net/5rdbe08a/3/
<script>
$(document).ready(function () {
var status = 0;
$(document).on('click', '#isImpliedDelete', function () {
status++;
console.log(status);
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
if (status % 2 == 0) {
$("#submitBtn").prop('disabled', false);
} else {
$("#submitBtn").prop('disabled', true);
}
});
$("#isImpliedDelete").click(function () {
$("#myPopup").show();
if ($("#submitBtn").prop('disabled', false) == true) {
$("#myPopup").show();
}
});
$("#ok").on('click', function () {
$("#myPopup").hide()
$("#submitBtn").prop('disabled', false);
});
$("#close").on('click', function () {
if ($("#myPopup").show() == true) {
$("#myPopup").hide();
}
$("#isImpliedDelete").click();
$("#submitBtn").prop('disabled', false);
console.log("close");
});
});

In terms of logic, what you want to do is check first if the modal is visible or not. If it isn't, then the switch should launch the modal. If it's visible, then the switch should remain in it's current state (we'll use e.preventDefault(); to do this).
Here is a modified version of your fiddle:
EDIT2: updated fiddle based on new comment:
http://jsfiddle.net/5fb4xc0L/1/
One observation about your code:
I see that you are using the jquery hide function BUT you are also using separate "show" and "hide" classes to visually toggle the visibility of the modal. You cannot use hide() to hide the element then expect that toggling the class .show to bring it back. Here is an explanation

I didn't understand what you actually want but i just solve your toggle problem. have a look
$(document).ready(function(){
$(document).on('click','#isImpliedDelete',function(){
$(this).attr('disabled', true);
$('#myPopup').addClass('show');
})
$(document).on('click','#ok',function(){
$(this).parents('.popup').next('.input-group-prepend').find('input[type="checkbox"]').prop('checked', false);
$('#myPopup').removeClass('show');
$('#isImpliedDelete').removeAttr('disabled')
})
})
/* Radio Switches */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #3c3c3c;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #00afaa;
}
input:focus+.slider {
box-shadow: 0 0 1px #00afaa;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/* Popup container - can be anything you want */
.popup {
position: relative;
align-content: center;
display: flex;
align-items: center;
display: inline-block;
cursor: pointer;
margin: 0 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
align-content: center;
visibility: hidden;
width: 396px;
border-style: groove;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 10000;
/* bottom: 25%; */
top: -50px;
left: 310px;
/* margin-left: -180px; */
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
/* left: 50%; */
margin-left: -80px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup visible */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .hide {
visibility: hidden;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br> <br> <br>
<div class="popup">
<span class="popuptext" id="myPopup">Hello,How are you?
<button id="ok">Ok</button>
<button id="close">Close</button>
</span>
</div>
<div class="input-group-prepend">
<label class="switch">
<input id="isImpliedDelete" name="isImpliedDelete" type="checkbox">
<span class="slider round"></span>
</label>
</div>
<br> <br> <br>
<button class="btn btn-primary btn-block" type="submit" id="submitBtn" >
<i class="fa fa-file-upload mr-2"></i> Button
</button>
Comment down if you want something different from it.

Used e.preventDefault() in click function.
$('#<id>').on(click,function(e){ e.preventDefault(); //Do your task });

Starting an animation when it is scrolled into view

I have 2 <hr> elements that are animated and move into close to each other. I want the animation to take place once the <hr> elements are in the viewport, instead of occurring right when the page is loaded. I have included my JavaScript code but this code didn't work; not sure if I'm using the right event.
'use strict';
const linebreak = document.querySelector('#hero--one');
const symbolContainer = document.querySelector('.header__container-symbol')
linebreak.addEventListener('scroll', function(e) {
e.preventDefault();
const containerCoords = symbolContainer.getBoundingClientRect();
symbolContainer.scrollIntoView({
behavior: 'smooth'
});
linebreak.classList.remove('hidden');
})
/* Lines and Diamond above title */
.header__container-symbol {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(25, 25, 25, 1);
}
.span-D {
align-self: center;
}
.hr-symbol {
width: 60rem;
display: inline-block;
height: 0.3rem;
background-color: #eee;
}
#hero--one {
margin-right: 3px;
animation: moveInLeftHr;
animation-duration: 2s;
}
#symbol {
font-size: 3rem;
}
#hero--two {
margin-left: 3px;
animation: moveInRightHr;
animation-duration: 2s;
}
#symbol {
color: #eee;
margin-right: 2rem;
margin-left: 2rem;
}
.hidden {
display: none;
}
/* End Diamon and Lines above title */
/* KeyFrames Animations */
#keyframes moveInLeftHr {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#keyframes moveInRightHr {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div class="header__container-symbol">
<span class="span-D"><hr class="hidden hr-symbol" id="hero--one"/></span>
<span id="symbol"> ⬙ </span>
<span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>

You can use the Intersection Observer API to detect when the element intersects with the viewport.
The threshold option is set to 1, meaning it will check for when the element is fully within the viewport.
A test div has been inserted at the top of the html to demonstrate the behavior.
'use strict';
const linebreak1 = document.querySelector('#hero--one');
const linebreak2 = document.querySelector('#hero--two');
const symbolContainer = document.querySelector('.header__container-symbol')
const observer = new IntersectionObserver((entries, observer) => {
if (!entries[0].isIntersecting) return;
linebreak1.classList.remove('hidden');
linebreak2.classList.remove('hidden');
}, { threshold: 1 });
observer.observe(symbolContainer);
/* Lines and Diamond above title */
.header__container-symbol {
display: flex;
justify-content: center;
align-content: center;
background-color: rgba(25, 25, 25, 1);
}
.span-D {
align-self: center;
}
.hr-symbol {
width: 60rem;
display: inline-block;
height: 0.3rem;
background-color: #eee;
}
#hero--one {
margin-right: 3px;
animation: moveInLeftHr;
animation-duration: 2s;
}
#symbol {
font-size: 3rem;
}
#hero--two {
margin-left: 3px;
animation: moveInRightHr;
animation-duration: 2s;
}
#symbol {
color: #eee;
margin-right: 2rem;
margin-left: 2rem;
}
.hidden {
display: none;
}
/* End Diamon and Lines above title */
/* KeyFrames Animations */
#keyframes moveInLeftHr {
0% {
opacity: 0;
transform: translateX(-100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
#keyframes moveInRightHr {
0% {
opacity: 0;
transform: translateX(100px);
}
100% {
opacity: 1;
transform: translate(0);
}
}
<div style="height: 500px;"></div>
<div class="header__container-symbol">
<span class="span-D"><hr class="hidden hr-symbol" id="hero--one"/></span>
<span id="symbol"> ⬙ </span>
<span class="span-D"><hr class="hidden hr-symbol" id="hero--two"/></span>
</div>

adding Lightbox on image click

I have this cool html css card below, where I now need to have that if you click it, it shows a lightbox with multiple photos. I have tried multiple things before, but the problem is everything gets messed up when you do light box.
this is the code for the picture card alone. and this is the link to see it with me trying the light box. https://codepen.io/gianlucaas/pen/rNzBKVz
what am i doing wrong?
function myFunction() {
var modelName = "Angela"
var height = 'My name is Angela'
var myImage = "https://images.unsplash.com/photo-1633594708103-e6e41891b679?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1040&q=80"
document.getElementById("myText").innerHTML = modelName;
document.getElementById("myHeight").innerHTML = height;
document.getElementById("myImg").src = myImage;
}
.card-content {
position: relative;
overflow: hidden;
}
.card-content-details {
padding: 10px;
}
.card-content-details {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 15px;
}
.card-content-details,
.card-content-overlay {
box-sizing: border-box;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.card-content-details {
transform: translateX(1000px);
transition-duration: 800ms;
z-index: 1;
}
.card-content-overlay {
background-color: #02010100;
transition-duration: 800ms;
transition-property: transform, opacity, background-color;
transform: translateX(-1000px);
z-index: 1;
}
.card-content-image {
transition-duration: 800ms;
width: 100%;
max-width: 100%;
}
.card-content:hover .card-content-image {
transform: scale(1.1);
}
.card-content:hover .card-content-overlay,
.card-content:hover .card-content-details {
transform: translateY(0) translateX(0);
opacity: 1;
}
.card-content:hover .card-content-overlay {
background-color: transparent;
background-image: linear-gradient(200deg, #00000000 81%, #000000ba 14%);
}
.card-content-title {
color: #fff;
font-size: 20px;
text-transform: uppercase;
margin: 0 0 10px;
}
.card-content-text {
color: #fff;
font-size: 16px;
margin: 0;
}
<body onload="myFunction()">
<div class="card-content">
<a href="#" target="_blank">
<div class="card-content-overlay"></div>
<img class="card-content-image" src="" id="myImg">
<div class="card-content-details">
<h4 class="card-content-title" id="myText"></h4>
<p class="card-content-text" id="myHeight"></p>
</div>
</a>
</div>
</body>

You can begin by creating a html container on your file of your lightbox (which will be hidden) with inside the buttons (prev, next, close) and the (empty for now).
When you launch the lightbox (with a js function that you'll have to create) you'll be display:block this html container (position: fixed; in CSS and with the highest z-index)

How to properly use style.display in JavaScript?

I have two divs whose role is the one of a burger menu. One of them has the property display:block, and the other one has display:none;.
After I click one one div the nav opens and the div's display property turns to none, however when I use the similar block of code to make the other div visible the code doesn't work (by applying display: block throught JavaScript).
When I check the console, it shows the the div's property has changed from none to block, but I can't locate the div with my mouse or see it.
code below:
HTML
<div class="burger">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="secondBurger">
<div class="line3"></div>
<div class="line4"></div>
</div>
CSS
.burger div {
width: 26px;
height: 2px;
background-color: white;
margin: 5px;
transition: all 0.5s ease;
}
.burger {
position: absolute;
right: 0px;
margin: 10px;
display: block;
cursor: pointer;
}
.secondBurger div {
width: 26px;
height: 2px;
background-color: black;
margin: 5px;
transition: all 0.5s ease;
}
.secondBurger {
position: absolute;
right: 10px;
top: 10px;
margin: 10px;
display: none;
cursor: pointer;
}
.burger .line {
transform: rotate(-45deg) translate(0px, 5px);
}
.burger .line2 {
transform: rotate(45deg) translate(0px, -5.5px);
}
#secondBurger .line3 {
transform: rotate(0deg) translate(0px, 1px);
}
#secondBurger .line4 {
transform: rotate(0deg) translate(0px, 1px);
}
JavaScript
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".bubbles");
const bubbles = document.querySelectorAll(".bubbles p");
const mainNav = document.querySelector(".mainNav");
const main = document.querySelector(".main");
burger.addEventListener("click", () => {
nav.classList.toggle("bubbles-active");
bubbles.forEach((link, index) => {
if (nav.classList.contains("bubbles-active")) {
document.querySelector(".line").style.display = "none";
document.querySelector(".line2").style.display = "none";
document.querySelector(".line3").style.display = "block";
document.querySelector(".line4").style.display = "block";
} else if (main.classList.contains("main")) {
document.querySelector(".line").style.backgroundColor = "";
document.querySelector(".line2").style.backgroundColor = "";
}
});
});
};
Codepen
codepen.io/jelaaxo/pen/JjGQMPM

jquery side navigation not smooth on mobile devices

I am having a problem with my side nav i made with Jquery it works fine on a laptop or a desktop but on mobile device the transition is not smooth like in the desktops or laptops I don’t know what is causing the problem
if you wondering i did the side nav by toggling a class which takes the position of the side nav from left:-30%; to 30%

I really wanted to show you the difference in performance. Check out my demo. Click a box to see it move. Even on my new MacBook Air, I can tell the difference. On mobile, as you noticed, the difference is much more pronounced.
$(".box").on("click", function() {
$(this).addClass("start");
})
$(".reset").on("click", function() {
$(".box").removeClass("start");
})
#keyframes moveWithLeft {
from {
left: 0;
}
to {
left: calc(100vw - var(--box-width));
}
}
#keyframes moveWithTransform {
to {
transform: translate(calc(100vw - var(--box-width)));
}
}
.box {
--box-width: 80px;
--box-height: 70px;
width: var(--box-width);
height: var(--box-height);
line-height: var(--box-height);
background-color: rgba(0, 128, 0, 1);
position: absolute;
color: white;
display: inline-block;
cursor: pointer;
font-family: helvetica;
transition: 0.3s background-color ease-in-out;
}
.box:hover {
background-color: rgba(0, 128, 0, .8);
}
.box span {
text-align: center;
display: block;
font-size: 85%;
}
.box.two {
top: calc(var(--box-height) + 5px);
}
.one.start {
animation: 3s moveWithLeft forwards;
}
.two.start {
animation: 3s moveWithTransform forwards;
}
button {
position: fixed;
bottom: 0;
left: 0;
font-size: 1.2rem;
font-family: helvetica;
padding: 10px;
border: none;
}
html, body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box one"><span>Left</span></div>
<div class="box two"><span>Transform</span></div>
<button class="reset">Reset</button>
jsFiddle

.parentDiv {
transition: 300ms all;
}