Javascript on checked box clone this div, on unchecked remove this div

Javascript on checked box clone this div, on unchecked remove this div - javascript

When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, accompanied by localStorage. Can someone help me to fix this?
function onClickAvGamesCheckBox() {
var arr = $('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
localStorage.setItem("checked", JSON.stringify(arr));
}
$(document).ready(function() {
var arr = JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
$('.AvGamesCheckBox').eq(i).prop('checked', checked);
});
$(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});
//* Clone script
$(".avclone :checkbox").change(function() {
var name = $(this).closest("div").attr("name");
if (this.checked)
$(".columns[name=" + name + "]").clone().appendTo("#favorite");
else
$("#favorite .columns[name=" + name + "]").remove();
});
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked~.AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input~.AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked~.AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite"></div>
When the checkbox is checked clone the correct div and show it on example: <div id="favorite"></div> when the checkbox is unchecked remove the clone, accompanied by localStorage. Can someone help me to fix this?

You have a click handler, so we wire that up to do the storage (will not work here due to sandbox), we also can use data and filter by that, adding an index to each columns container to use to filter the cloned items so we can target them and remove no matter which one is added first.
Here is a fiddle with custom event and slightly more complex storage example:
https://jsfiddle.net/MarkSchultheiss/5Luyn18j/47/ done as a fiddle to avoid the sandbox on SO.
Original:
//borrow some code from https://stackoverflow.com/a/15651670/125981
(function($) {
$.fn.filterByData = function(prop, val) {
return this.filter(
function() {
return $(this).data(prop) == val;
}
);
}
})(window.jQuery);
function onClickAvGamesCheckBox(event) {
var arr = $('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
// localStorage.setItem("checked", JSON.stringify(arr));
}
$(function() {
//add some data
$('.AvGamesCheckBox').each(function(index, element) {
$(this).closest('.column').data("checkindex", index);
});
// replace [] with the commented out for real stuff
var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
$('.AvGamesCheckBox').eq(i).prop('checked', checked);
});
$(".AvGamesCheckBox").trigger("change");
});
//* Clone script
$(".avclone").on('change', '.AvGamesCheckBox', function() {
var checkContainer = $(this).closest('.column');
var checkIndex = checkContainer.data("checkindex");
var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
if (this.checked && !matcher.length)
checkContainer.clone(true).appendTo("#favorite");
else
matcher.remove();
}).on('click', '.AvGamesCheckBox', onClickAvGamesCheckBox);
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked~.AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input~.AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked~.AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite" ></div>
Addition of the click on the clone:
EDIT: added custom event and comment on how to modify for real use
//borrow some code from https://stackoverflow.com/a/15651670/125981
(function($) {
$.fn.filterByData = function(prop, val) {
return this.filter(
function() {
return $(this).data(prop) == val;
}
);
}
})(window.jQuery);
function onClickAvGamesCheckBox(event) {
var arr = $(".avclone").find('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
//EDIT: un-comment for real use
// localStorage.setItem("checked", JSON.stringify(arr));
}
$(function() {
//add some data
var checks = $(".avclone").find('.AvGamesCheckBox');
checks.each(function(index, element) {
$(this).closest('.column').data("checkindex", index);
});
//EDIT replace []; with commented out code for real use
var arr = []; //JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
checks.eq(i).prop('checked', checked);
});
//checks.trigger("change");
});
//* Clone script
$(".avclone, #favorite").on('change', '.AvGamesCheckBox', function() {
var checkContainer = $(this).closest('.column');
var checkIndex = checkContainer.data("checkindex");
var matcher = $("#favorite").find(".column").filterByData("checkindex", checkIndex);
if (this.checked && !matcher.length) {
checkContainer.clone(true).appendTo("#favorite");
} else {
$(".avclone").find('.AvGamesCheckBox')
.eq(checkIndex).trigger('clickcustom');
matcher.remove();
}
});
$(".avclone").on('click clickcustom', '.AvGamesCheckBox', onClickAvGamesCheckBox);
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked~.AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input~.AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked~.AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
box-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite"></div>

This should work for you. Note: avoid using camelcase classes or ids. Also relying on elements indexes it's not a good idea I would use some sort of identifier to track elements relations.
JS:
function onClickAvGamesCheckBox() {
var arr = $('.AvGamesCheckBox').map(function() {
return this.checked;
}).get();
localStorage.setItem("checked", JSON.stringify(arr));
}
$(document).ready(function() {
var arr = JSON.parse(localStorage.getItem('checked')) || [];
arr.forEach(function(checked, i) {
$('.AvGamesCheckBox').eq(i).prop('checked', checked).trigger("change");
});
$(".AvGamesCheckBox").click(onClickAvGamesCheckBox);
});
//* Clone script
$(document).on("change", ".avclone [type='checkbox']", function(e){
var column = $(e.target).closest(".column"),
eq = column.index();
if ($(e.target).prop("checked"))
column.clone().attr("data-eq", eq).appendTo("#favorite");
else
$("#favorite .column[data-eq='"+eq+"']").remove();
});
CSS:
* {
box-sizing: border-box;
padding: 5px;
}
.AvGamesContainer {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.AvGamesContainer input {
position: absolute;
opacity: 0;
display: none;
visibility: hidden;
cursor: pointer;
height: 0;
width: 0;
}
.AvGamesCheckmark {
position: absolute;
top: 26px;
right: 0;
height: 25px;
width: 25px;
padding: 3px !important;
background-color: #fff;
background-image: url("https://i.ibb.co/Yyp3QTL/addstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomleft: 8px;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
z-index: 5;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark {
background-color: #fff;
color: yellow !important;
background-image: url("https://i.ibb.co/0J7XxyK/favstar.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.AvGamesContainer:hover input ~ .AvGamesCheckmark {
background-color: #fff;
}
.AvGamesCheckmark:after {
content: "";
position: absolute;
display: none;
}
.AvGamesContainer input:checked ~ .AvGamesCheckmark:after {
display: none;
}
.AvGamesContainer .AvGamesCheckmark:after {
display: none;
}
img {
width: 100%;
height: auto;
background: #fff;
border-radius: 10px;
-webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
transition: all 0.5s ease-in-out 0s;
z-index: 4;
}
img:hover {
-webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.75);
-webkit-filter: saturate(150%);
}
.column {
float: left;
width: 50%;
padding: 5px;
height: auto;
}
.columns {
position: relative;
border-radius: 10px;
text-align: center;
width: 99%;
margin: 0 auto;
padding: 5px;
}
.row:after {
content: "";
display: table;
clear: both;
}
#favorite .column .AvGamesCheckmark {
display: none!important
}
HTML:
<div class="avclone">
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
<div class="column">
<div class="columns">
<label class="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer1" class="AvGamesCheckBox">
<span class="AvGamesCheckmark"></span>
</label>
</div>
</div>
</div>
<div id="favorite"></div>

#Leo since you asked how to do this in React.
DEMO: https://react-krwy1w.stackblitz.io/
CODE: https://stackblitz.com/edit/react-krwy1w?file=index.js
import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
const GAME_IMAGES = [
{
title: "some title 01",
href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
},
{
title: "some title 02",
href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/daily-sudoku/teaser.jpg?p=pub-15088-15357"
},
{
title: "some title 03",
href: "https://games.softgames.com/games/aquablitz-2/gamesites/7665/",
img: "https://d1bjj4kazoovdg.cloudfront.net/assets/games/aquablitz-2/teaser.jpg?p=pub-15088-15357"
},
];
const GameCard = ({title, href, img, onChange}) => {
return (
<div className="column">
<div className="columns">
<label className="AvGamesContainer">
<input type="checkbox" name="AvGamesContainer" className="AvGamesCheckBox" onChange={(e) => onChange(e.target.checked, {title, href, img})}/>
<span className ="AvGamesCheckmark"></span>
</label>
<a href={href}>
<img src={img} title={title}/>
</a>
</div>
</div>
);
};
class App extends Component {
constructor() {
super();
this.state = {
display: null
}
}
handleChange(isChecked, obj) {
this.setState({
display: isChecked ? obj : null
});
}
render() {
return (
<div>
{
this.state.display !== null ?
<div id="favorite">
{<GameCard {...this.state.display} />}
</div> : null
}
<p>
Start editing to see some magic happen :)
</p>
{
GAME_IMAGES.map(prop => <GameCard {...prop} onChange={this.handleChange.bind(this)} />)
}
</div>
);
}
}
render(<App />, document.getElementById('root'));

Related

Onclick Function in Dropdown Menu not working

I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.

You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>

css animation does not get triggered a second time

I have a problem, which is for sure simple to solve, except for me. Let me explain, the snippet below shows a dialogue-box. I added an interaction feedback. If the input field is empty and a user tries to access the cross, the field blinks red.
In case the input field is set, the cross can be clicked which displays options. If this are clicked too the input field blinks green. The problem: Unfortunately it works just once, even than I try to remove those CSS classes afterwards. Further if green appeared once and the input field is empty again, I can´t trigger the red blinking again.
My thoughts are, that JavaScript can´t remove and add CSS classes during the same time action. Or the animation will not start over again. I am not sure. I would be glad if somebody can enlighten me.
var dialogSettingToggle = document.getElementById("dialog-setting-toggle")
var dialogSettingInput = document.getElementById("dialog-setting-input")
dialogSettingToggle.addEventListener("click", function() {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.toggle("dialog-input-alert")
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
}
})
function isEmpty(str) {
return !str.trim().length
}
body {
height: 100%;
background: #e6e7ee;
}
section {
word-wrap: break-word;
word-break: normal;
width: 95%;
max-width: 350px;
margin: 40px auto;
border-radius: 10px;
}
hr {
color: white;
height: 0px;
cursor: default;
}
h5 {
margin: 10px;
font-size: 1.2em;
font-weight: normal;
color: #7b7e8c;
cursor: default;
}
button {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
background: #f2f3f7;
cursor: pointer;
border: 0;
padding: 10px;
margin: 7px;
margin-top: 10px;
width: 150px;
font-size: 1rem;
transition-property: background-color, box-shadow;
transition-duration: .2s;
color: #7b7e8c;
}
select {
appearance: none;
width: 270px;
background: url(data:image/png;base64,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);
background-repeat: no-repeat;
background-position: right;
background-size: 1.8em;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: pointer;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
input {
width: 270px;
background: #f8f9fb;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: text;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
button:hover,
select:hover,
input:hover {
color: #3498db;
}
button:active {
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
.border-round {
border-radius: 10px;
}
.dialog {
position: absolute;
left: 0;
right: 0;
padding: 10px 20px 20px;
margin-top: 20px;
width: 340px;
min-height: 100px;
font-size: 1.2em;
background: #f2f3f7;
}
.box-shadow {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-button-delete {
position: relative;
margin-top: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-close {
position: absolute;
width: 25px;
height: 25px;
padding: 0px;
margin: 0px;
left: 350px;
top: 5px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: none;
}
.dialog-input-alert {
animation: input-alert 1.5s;
}
#keyframes input-alert {
from {
background: red;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
.dialog-input-confirm {
animation: input-confirm 1.5s;
}
#keyframes input-confirm {
from {
background: greenyellow;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
/****************************************
******** dialog-setting-toggle ***********
****************************************/
.dialog-setting-toggle {
position: relative;
margin-top: 7px;
margin-right: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-toggle::before,
.dialog-setting-toggle::after {
content: "";
background: #7b7e8c;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.dialog-setting-toggle::before {
transform: rotate(0deg);
}
.dialog-setting-toggle::after {
transform: rotate(-90deg);
}
.dialog-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.dialog-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open .dialog-setting-button {
opacity: 1;
pointer-events: auto;
}
.dialog-setting-toggle.open .dialog-setting-button:first-of-type {
right: -50px;
justify-content: center;
align-items: center;
}
.dialog-setting-toggle.open .dialog-setting-button:nth-of-type(2) {
right: -100px;
justify-content: center;
align-items: center;
transition-delay: 0.05s;
}
.dialog-setting-toggle.open .dialog-setting-button:last-of-type {
right: -150px;
justify-content: center;
align-items: center;
transition-delay: 0.1s;
}
.dialog-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
color: #7b7e8c;
display: flex;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
}
.dialog-setting-button:hover {
transform: scale(1.2);
color: #3498db;
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="dialog-setting" class="dialog box-shadow">
<div>
<h5 style="text-align:center">Options</h5>
<button style="float: right" id="dialog-setting-close" class="dialog-setting-close border-round"><i class="fas fa-times"></i></button>
</div>
<hr class="border-round">
<input style="float: left" id="dialog-setting-input" type="search" placeholder="context / link / object" class="item dialog-setting-input"></input>
<div style="float: right" id="dialog-setting-toggle" class="dialog-setting-toggle">
<div title="Kontext" id="dialog-setting-button-context" class="dialog-setting-button"><i class="fab fa-uncharted"></i></div>
<div title="Link" id="dialog-setting-button-link" class="dialog-setting-button"><i class="fas fa-link"></i></div>
<div title="Objekt" id="dialog-setting-button-object" class="dialog-setting-button"><i class="fas fa-server"></i></div>
</div>
</section>

It isn´t the best solution but it is one solution. I added a timeout with the same duration as the animation goes. Works fine for my needs.
dialogSettingToggle.addEventListener("click", function () {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.add("dialog-input-alert")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-alert")
}, 1000)
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
resetInput()
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
resetInput()
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
resetInput()
})
}
})
function resetInput() {
dialogSettingInput.classList.add("dialog-input-confirm")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-confirm")
}, 1000)
dialogSettingInput.value=""
dialogSettingToggle.classList.remove("open")
}

HTML Change the Background-Color of a Checked Checkbox [duplicate]

This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 1 year ago.
I have a really simple question but I could'nt find one simple answers for this.
I have a checkbox like below:
<input type="checkbox">
And I want to change just the background color when this checkbox is checked.
Is there a simple way to do this in CSS or JS ?

You can simply use :checked pseudo class and :after pseudo element to color your background when its checked.
Edit: For a complete background on a checkbox you we need full customised the checkbox. Its a complete CSS solution.
input[type="checkbox"]:checked {
background: blue;
color: white;
}
input[type="checkbox"] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background: lightgray;
height: 16px;
width: 16px;
border: 1px solid white;
color: white;
}
input[type="checkbox"]:after {
content: ' ';
position: relative;
left: 40%;
top: 20%;
width: 15%;
height: 40%;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(50deg);
display: none;
}
input[type="checkbox"]:checked:after {
display: block;
}
<input type="checkbox" />

I edit the code of reference : reference this is the least you need to write:
input[type="checkbox"] {
visibility: hidden;
}
input[type="checkbox"] + label:before {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
input[type="checkbox"]:checked + label:before {
background: red;
color: green;
content: "\2713";
text-align: center;
}
<input type="checkbox" id="Custom" name="Custom">
<label for="Custom">Custom Check</label>

Here is Reference Link
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
margin: 0;
min-height: 300px;
}
header {
background-color: #f39821;
height: 150px;
}
.content {
background-color: #FFFFFF;
max-width: 80%;
padding: 8px 16px;
margin-top: -56px;
margin-right: auto;
margin-left: auto;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.checkbox {
font-family: 'Roboto', sans-serif;
margin-top: 8px;
margin-bottom: 8px;
}
.checkbox__input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
}
.checkbox__label {
font-size: 16px;
color: rgba(0, 0, 0, 0.87);
position: relative;
cursor: pointer;
line-height: 24px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 28px;
}
.checkbox__label:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
margin: 3px;
border: 2px rgba(0, 0, 0, 0.54) solid;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.checkbox__input:checked ~ .checkbox__label:before {
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
background-color: #f3213d;
border-color: #f3213d;
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiPjx0aXRsZT51bnRpdGxlZDwvdGl0bGU+PHBhdGggZD0iTTAsMFYxSDFWMEgwWk0wLjQ1LDAuNzRsLTAuMDguMDhMMC4yOCwwLjc0LDAuMTQsMC42bDAuMDgtLjA4TDAuMzYsMC42NWwwLjQxLS40MUwwLjg2LDAuMzJaIi8+PC9zdmc+");
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiPjx0aXRsZT51bnRpdGxlZDwvdGl0bGU+PHBhdGggZD0iTTAsMFYxSDFWMEgwWk0wLjQ1LDAuNzRsLTAuMDguMDhMMC4yOCwwLjc0LDAuMTQsMC42bDAuMDgtLjA4TDAuMzYsMC42NWwwLjQxLS40MUwwLjg2LDAuMzJaIi8+PC9zdmc+");
}
.checkbox__input:disabled ~ .checkbox__label {
color: rgba(0, 0, 0, 0.38);
}
.checkbox__input:disabled ~ .checkbox__label:before {
border-color: rgba(0, 0, 0, 0.26);
}
.checkbox__input:checked:disabled ~ .checkbox__label:before {
background-color: rgba(0, 0, 0, 0.26);
background-clip: padding-box;
}
.checkbox__description {
font-size: 12px;
color: rgba(0, 0, 0, 0.54);
margin-left: 28px;
}
.checkbox__input ~ .checkbox__label:after {
content: '';
position: absolute;
top: 0;
left: 0;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.checkbox__input:focus ~ .checkbox__label:after {
-webkit-animation: click-wave .5s;
animation: click-wave .5s;
}
.checkbox__input:checked ~ .checkbox__label:after {
background-color: #f3213d;
}
.checkbox__input:not(:checked) ~ .checkbox__label:after {
background-color: #000;
}
#-webkit-keyframes click-wave {
0% {
width: 24px;
height: 24px;
opacity: 0.5;
}
100% {
width: 48px;
height: 48px;
margin-left: -12px;
margin-top: -12px;
opacity: 0.0;
}
}
#keyframes click-wave {
0% {
width: 24px;
height: 24px;
opacity: 0.5;
}
100% {
width: 48px;
height: 48px;
margin-left: -12px;
margin-top: -12px;
opacity: 0.0;
}
}
<header></header>
<div class="content">
<div class="checkbox">
<input type="checkbox" id="checkbox-1" checked="checked" class="checkbox__input">
<label for="checkbox-1" class="checkbox__label">Checkbox 1</label>
<div class="checkbox__description">Maecenas imperdiet dui velit, nec iaculis felis interdum nec.</div>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-2" class="checkbox__input">
<label for="checkbox-2" class="checkbox__label">Checkbox 2</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-3" checked="checked" class="checkbox__input" disabled>
<label for="checkbox-3" class="checkbox__label">Checkbox 3</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-4" class="checkbox__input" disabled>
<label for="checkbox-4" class="checkbox__label">Checkbox 4</label>
</div>
</div>

How do I close custom popover when click outside?

I'm developing a Cordova app. For that I'm using Vue.js and jQuery for bindings and script and I'm developing UI on my own. I could do page transitions and animations for most of the UI like, Radio buttons and check boxes etc. But I could not be able to develop a custom popover. I have tried following code.
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>
This works fine for toggling popover on button click. I tried so much. But I could not hide the popover when click on outside of the popover.
How can I hide popover when clicking out side of it?

Please try this. I have added jQuery
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
$('body').click(function(e) {
if (!$(e.target).closest('.drawer').length){
$(".drawer").removeClass("active");
}
});
Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function(e) {
e.stopPropagation();
var pageEl = $(this).closest('.ui-page');
pageEl.find('.drawer').toggleClass('active');
$(el).closest('.ui-page').click(function(e) {
// $('.drawer', this).removeClass('active');
});
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

Vue.directive('popover', {
bind: function(el, bindings, vnode) {
$(el).click(function() {
$(el).closest('.ui-page').find('.drawer').toggleClass('active');
});
$('body').on('click', $(el).closest('.ui-page'), function(e) {
var $drawer = $(el).closest('.ui-page').find('.drawer');
var $target = $(e.target);
if ($target.closest($(el)).length <= 0
&& $drawer.hasClass('active')
&& $target.closest('.drawer').length <= 0) {
$drawer.removeClass('active');
}
});
}
})
var pageInstace = new Vue({
el: '#popover-page',
data: {
options: [1, 2, 3, 4, 5]
}
})
html,
body {
position: relative;
width: 100%;
height: 100%;
}
body {
font-family: 'Open Sans';
font-size: 16px;
margin: 0;
overflow: hidden;
}
* {
box-sizing: border-box;
}
*, *:active, *:hover, *:focus {
outline: 0;
}
button {
padding: 0;
}
img {
max-width: 100%;
}
.ui-page,
.header,
.scroll-content {
position: absolute;
width: 100%;
top: 0;
left: 0;
overflow: hidden;
}
.ui-page {
height: 100%;
background-color: #fff;
}
.page-content {
position: relative;
height: 100%;
overflow-y: auto;
z-index: 1;
}
.header {
height: 54px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
background-color: #607D8B;
color: #fff;
display: flex;
align-items: center;
padding-left: 16px;
padding-right: 16px;
z-index: 1;
}
.scroll-content {
bottom: 0;
overflow: auto;
}
.scroll-content.has-header {
top: 54px;
}
.header button {
color: #fff;
height: 100%;
}
.header .header-title {
margin: 0 22px;
font-size: 18px;
font-weight: 600;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.header .buttons {
position: relative;
display: flex;
}
.header .buttons button {
padding: 4px 8px;
}
.header .buttons button:last-child {
padding: 4px 0 4px 8px;
}
.btn {
position: relative;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border: none;
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
font-family: unset;
overflow: hidden;
}
.btn-clear {
background-color: transparent;
border: none;
}
.item {
position: relative;
display: flex;
overflow: hidden;
border-bottom: 1px solid #bdbdbd;
}
.drawer {
position: absolute;
background-color: #fff;
z-index: 4;
top: 60px;
right: 4px;
border-radius: 2px;
box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
transform: scale(0, 0);
transform-origin: top right;
transition: transform ease 0.3s;
min-width: 180px;
}
.drawer.active {
transform: scale(1, 1);
}
.drawer .drawer-content {
position: relative;
padding: 4px 0;
}
.drawer .drawer-content:after {
content: '';
position: absolute;
border: 8px solid transparent;
border-bottom-color: #fff;
top: -14px;
right: 22px;
}
.drawer .item {
padding: 12px 16px;
font-size: 14px;
}
.drawer .item:last-child {
border-bottom: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div class="ui-page" id="popover-page">
<div class="page-content">
<div class="header">
<div class="header-title">
Page Title
</div>
<button class="btn-clear" v-popover>Popover</button>
</div>
<div class="drawer">
<div class="drawer-content">
<div class="item" v-for="option in options">{{ option }}</div>
</div>
</div>
<div class="scroll-content has-header">
<div class="page-content">
<p>Some Content</p>
</div>
</div>
</div>
</div>

jQuery-UI resizable bug with slide animation

I cannot seem to figure out what the jQueryUI resizable function is doing to cause the anchor point of the "chat box" div element I've created. The problem is that when you resize this element by dragging the top right corner, it does resize correctly, but when you press the close button to play the jQuery animation to collapse it, it will collapse in the wrong direction. If you do not resize the box at all then this collapse animation works correctly.
There seems to be another problem where resizing it causes the box to jump higher on the page, but this only seems to happen on Google Chrome, Firefox works fine, and not sure why!
Try resizing the box and then closing it to see the problem:
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

When you resize from top handle, it changes top coordinate and height. Since you set the position with bottom, normally on animate the height will change but not bottom coordinate. But as soon as resizable sets top coordinate, then the animation will be made but with top coordinate remaining.
What you can do is use resize callback to prevent top coordinate to be set when you resize. Then it'll keep the proper direction on animation, and the resize will work as well.
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
resize: function(event, ui) {
ui.helper.css('top', '');
}
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Javascript on checked box clone this div, on unchecked remove this div - javascript

Related

Onclick Function in Dropdown Menu not working

css animation does not get triggered a second time

HTML Change the Background-Color of a Checked Checkbox [duplicate]

How do I close custom popover when click outside?

jQuery-UI resizable bug with slide animation

Categories

Resources