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 });

give animation to div when a button click

css Of that Div:-
.PostBox {
position: fixed;
height: 60%;
width: 100%;
background-color: white;
bottom: 0;
border-radius: 10px;
border-top: 5px solid rgb(16, 150, 233);
padding: 20px;
display: inline-table;
animation: SlidUp 3s ease-out backwards;
}
Animaion Of Div
#keyframes SlidUp {
from {
visibility: hidden;
bottom: -60%;
opacity: 0;
}
to {
visibility: visible;
bottom: 0;
opacity: 1;
}
}
I Want to give this Animation Whenever a button is clicked, That Button just turns the visibility of this div to visible or hidden.
in short, I want to give animation when ever a button click or given animation whenever visibility change

You can do this in pure CSS/HTML without JavaScript if that is suitable for your particular use case.
The trick is to use an input of type checkbox. It needs to be before the PostBox and a sibling of PostBox.
Here's a simple example:
.PostBox {
position: fixed;
height: 60%;
width: 100%;
background-color: white;
bottom: 0;
border-radius: 10px;
border-top: 5px solid rgb(16, 150, 233);
padding: 20px;
display: inline-table;
}
input:checked~.PostBox {
animation: SlidUp 3s ease-out backwards;
}
#keyframes SlidUp {
from {
visibility: hidden;
bottom: -60%;
opacity: 0;
}
to {
visibility: visible;
bottom: 0;
opacity: 1;
}
}
<label>Click me </label><input type="checkbox">
<div class="PostBox">I am the div that is going to slide up</div>
Obviously you'll want to refine things a bit - for example do you want the div to be there from the start? But that's a different question.

How can i change my css overflow depending on the content?

I'm making my own dropdown with CSS. You hover on it, then some options appear below it, you pick one and that's it. If there are too many options to fit there is a scroll bar. You can see the whole thing here: JSFiddle
let testData = [
"qwertyuiop",
"asdfghjkl",
"zxcvbnm",
"axdxfcbhdhvhv",
"äöäööäöääöää",
"zoinkszoinks",
"brrrrrrrrrr",
"gygygygyasdasda",
];
getTestStuff();
function getTestStuff() {
let content = document.getElementById("content");
let text = document.getElementById("text");
for (let group of testData) {
let div = document.createElement("div");
div.innerHTML = group;
div.addEventListener("click", function() {
text.innerHTML = group; // update button text
}, false);
content.appendChild(div);
}
}
let dropdown = document.getElementById("dropdown");
let arrow = document.getElementById("arrow");
let content = document.getElementById("content");
dropdown.addEventListener("mouseenter", function () {
arrow.className = "open";
content.classList.add("open");
}, false);
dropdown.addEventListener("mouseleave", function () {
arrow.className = "closed";
content.classList.remove("open");
}, false);
.dropdown-wrapper {
height: 40px;
float: left;
margin: 0px 5px;
}
.dropdown-wrapper, .dropdown-content {
width: 300px;
}
.dropdown-wrapper .header {
width: 100%;
height: 100%;
margin: 0;
background-color: #f1f1f1;
text-align: center;
border-radius: 5px;
font-size: 16px;
border: 1px solid grey;
display: table;
}
.dropdown-wrapper .header span {
text-align: center;
vertical-align: middle;
display: table-cell;
width: 100%;
}
.dropdown-wrapper .header div span {
font-size: 20px;
}
.dropdown-wrapper .header div {
margin-left: -40px;
width: 40px;
height: 40px;
float: right;
text-align: center;
display: table;
position: absolute;
}
.dropdown-content {
display: none;
float: none;
max-height: 300px;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
font-size: 16px;
background-color: #f1f1f1;
min-width: 0px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
margin-right: auto;
text-align: center;
}
.dropdown-content div {
color: black;
float: none;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-right: -15px;
}
.dropdown-content div:hover {
background-color: #ddd;
}
.dropdown {
height: 100%;
width: 100%;
}
.dropdown:hover .dropdown-content {
display: block;
}
#arrow.open {
-webkit-animation-name: openArrowAnimation;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
#arrow.closed {
-webkit-animation-name: closeArrowAnimation;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes openArrowAnimation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
}
}
#-webkit-keyframes closeArrowAnimation {
from {
-webkit-transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
}
}
#content.open {
-webkit-animation-name: openDropdownAnimation;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes openDropdownAnimation {
from {
max-height: 0px;
}
to {
max-height: 300px;
}
}
<div class="dropdown-wrapper">
<div class="dropdown" id="dropdown">
<div class="header">
<span id="text">Test Thing</span>
<div id="arrow"><span>^</span></div>
</div>
<div id="content" class="dropdown-content">
</div>
</div>
</div>
The Problem:
The scrollbar appears during my animation. Which is not a problem, if it is going to stay, but when the content fits, it disappears again.
When the scroll bar is not there, the space that the scrollbar would take, does not have the right background color, when i hover over the option. Making a very ugly gap.
I know about overflow: auto; but i still use overflow: scroll; with margin-right: -16px; on the children, because my scrollbar moves the children and i only have that scrollbar sometimes.
I need some kind of CSS conditional hack to set overflow to hidden if we don't need it or use JS to change the margin-right but trying to check the parent height after adding the kids gave me this:
content.height: undefined
content.style.height: empty string
So i'm very lost with this.

I got it working with this trick on the children:
margin-right: calc(100% - 300px);
And setting the parent overflow to auto
This works because here 100% is the elements full width. Without a scroll bar, 100% is 300px, so margin is set to 0. With a scroll bar, 100% is around 290px so margin is set to around -10, so the text stays centered.

As #CBroe pointed out, i couldn't get the height of my element, or the children because it had display: none so to get around that:
let content = document.getElementById("content");
content.style.display = "block";
let height = content.offsetHeight;
content.style.display = "";
It's amazing something this dumb works so well. Now i can hide the scrollbar when i don't need it and fix the offset, that the scrollbar creates, when i do need it:
if (height < 300) {
content.style.overflowY = "hidden";
} else {
content.style.overflowY = "scroll";
for (let kid of content.children) {
kid.style.marginRight = "-16px";
}
}
This solution has the added bonus, that it works well with my animation. A problem that the CSS only solution couldn't solve.

Make arrow in button point down after menu slides out

I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?

Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle

Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>

I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps

Make CSS on-hover content on image stay when you click on it

My question is similar to this one : How can you make CSS on-hover content stay in place when you click or stop hovering using Javascript?
However, i did not understand well the solutions that were proposed.
So basically, i would like my CSS on-hover content to stay on top of my image when the user clicks on it. Could someone please tell me how to do so?
#core {
max-width: 960px;
margin-top: 25px;
}
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
height: 120px;
margin: 0 1em 1em 0;
position: relative;
width: 120px;
}
span.background-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover span.background-content {
opacity: 1;
}
span.background-content {
background: rgba(0, 0, 0, 0.5);
color: white;
cursor: pointer;
display: table;
height: 120px;
left: 0;
position: absolute;
top: 0;
width: 120px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
/* --------------------------------------------------------- */
span.title-content-platinum {
background: rgba(215, 215, 0, 0.8);
color: white;
cursor: pointer;
display: table;
height: 20px;
left: 0;
position: absolute;
top: -20px;
width: 120px;
}
span.title-content-platinum span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.title-content-platinum {
background: rgba(215, 215, 0, 0.8);
color: white;
cursor: pointer;
display: table;
height: 20px;
left: 0;
position: absolute;
top: -20px;
width: 120px;
opacity: 0;
}
ul.img-list li:hover span.title-content-platinum {
opacity: 1;
}
span.title-content-platinum {
background: rgba(215, 215, 0, 0.8);
color: white;
cursor: pointer;
display: table;
height: 20px;
left: 0;
position: absolute;
top: -20px;
width: 120px;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
<div id="core">
<ul class="img-list">
<li>
<a>
<a href="">
<img src="http://www.pokepedia.fr/images/thumb/e/e7/Pikachu-RFVF.png/120px-Pikachu-RFVF.png" alt="" width="120" height="120" />
</a>
<span class="title-content-platinum">Pikachu</span>
<span class="background-content"><span></span></span>
</a>
</li>
</ul>
</div>
I'm also learning Javascript (without Jquery for the moment), so a solution involving jscript would be much appreciated!

Here's a simple example using JS to add a CSS class to an element based on it's id. I use the HTML onclick attribute to call a javascript function, and pass in the HTML id to find the element and add the class. You should be able to adjust this to apply it to your situation.
Demo: http://jsfiddle.net/biz79/swxxLj3z/
Update: I've switched it to a toggleClass so that click1 adds the class and click2 removes the class. This code should be able to handle tags that have more than 1 class as well.
There's more elegant solutions on SO which you can look up, however, this will probably work for you in the meantime.
This looks like a good resource: Change an element's class with JavaScript
Anyways, just adjust to fit your purposes. Cheers!
HTML:
<div id='d1' onclick="toggleClass('d1')" class="class1 class2">Hello</div>
<div id='d2' onclick="toggleClass('d2')">there</div>
JS:
function toggleClass( ID ) {
var classToAdd = 'bigFont';
var el = document.getElementById(ID);
var classes = el.className;
var index = classes.indexOf(classToAdd);
if (index < 0) {
el.className += " " + classToAdd;
}
else {
classes = classes.replace(classToAdd, " ");
el.className = classes;
}
}
CSS:
div:hover {
font-size:2em;
}
.bigFont {
font-size:2em;
}

You'd first want to modify your css to take a class that denotes whether an item has been clicked
Here I use '.active-item'
ul.img-list li:hover span.background-content,
.active-item span.background-content
{
opacity: 1;
}
You'd then want to apply the active-item class using element.setAttribute() like so
var items = document.getElementByTagName("li");
for (index = 0; index < items.length; ++index) {
items[index].onmouseclick = function() {
items[index].setAttribute("class", "active-item");\
}
}