after click on Open Modal button. it's disappear . i did not see anything wrong with my code.
Code Example - Scenario
let nrSanckbar = (function(){
const modalContent = `<div class="nr-modal-container" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>`;
document.addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation()
const modal = document.querySelector(".nr-modal-container");
if(e.target.classList.contains('close')){
console.log(e.target)
modal.classList.remove("visible");
modal.remove();
return false;
}
})
const shwoModal = function(){
document.body.innerHTML = modalContent;
const modal = document.querySelector(".nr-modal-container");
modal.classList.add("visible");
return false;
}
return {
deleteConfirm: function(data) {
shwoModal()
},
}
})();
document.addEventListener("click",function(e){
e.preventDefault();
e.stopPropagation()
if(e.target.classList.contains('open-modal-button')){
nrSanckbar.deleteConfirm()
}
})
.modal {
position: fixed;
z-index: 10;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
border-radius: 5px;
box-shadow: 0 24px 38px 3px rgba(60, 75, 100, 0.14);
display:none;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.visible {
display: block;
}
.visible > .modal-content {
display: block;
-webkit-animation: scale .3s ease-out;
-moz-animation: scale .3s ease-out;
}
#-webkit-keyframes scale {
0% { opacity: 0; -webkit-transform: scale(1.3); }
100% { opacity: 1; -webkit-transform: scale(1); }
}
#-moz-keyframes scale{
0% { opacity: 0; -moz-transform: scale(1.3); }
100% { opacity: 1; -moz-transform: tscale(1);}
}
<button class="open-modal-button">Open Modal</button>
Your button is being removed due to document.body.innerHTML = modalContent; (as inner HTML contains the button)
You should be able to do something like document.body.innerHTML += modalContent;
Or: document.body.insertAdjacentHTML( 'beforeend', modalContent);
Related
I am trying to create a notification system that gives custom notifications. Here is my function:
var notificationCount = 0;
document.querySelector("body").innerHTML += '<div class="notification-holder"></div>';
function notification(content){
notificationCount+=1;
document.querySelector(".notification-holder").innerHTML += `
<div class="notification" id="notification-${notificationCount}">
<p>${content}</p>
</div>
`;
var msg = document.querySelector(`#notification-${notificationCount}`);
msg.style.animation = "notificationAnimate 0.2s forwards"
msg.addEventListener("animationend", () => {
msg.style.visibility = "visible";
msg.style.animation = "";
setTimeout(() => {
msg.style.animation="notificationAnimate 0.2s reverse"
msg.addEventListener("animationend", () => {
msg.remove()
})
}, 1000)
})
};
:root{
--black: #151515;
--white: #EDEDEE;
}
.notification-holder{
position: absolute;
bottom: 0px;
right: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.notification{
width: 250px;
padding: 10px;
text-align: center;
background-color: var(--black);
color: var(--white);
font-size: 14px;
font-family: "Poppins", sans-serif;
border-radius: 10px;
}
.notification:not(:first-of-type){
margin-top: 10px;
}
#keyframes notificationAnimate{
0%{
opacity: 0;
max-height: 1px;
transform: translateY(100px);
scale: 0;
}
100%{
opacity: 1;
max-height: fit-content;
transform: translateY(0px);
/* visibility: visible; */
scale: 1;
}
}
<html>
<head>
</head>
<body>
<button onclick="notification('Dark theme has been enabled!')">Dark theme </button>
</body>
</html>
The code works perfectly fine for 1 notification at a time. However, when there are multiple notifications at a time, only the latest one goes through the reverse animation.
Regenerate Problem:
Click on the button twice
You will see only the latest notification goes back down. Earlier ones just stick there.
Expectation: I want all of them to go back down after 1s of when they were shown.
As noted in my earlier comment, I think the problem comes with you using notificationCount in the ID/selector. That changes over time.
My solution removes the need for that, as well as all the document re-querying you were doing over time. Instead of tracking IDs and querying the DOM repeatedly, I create elements and store references to them, which I later act upon as needed.
My changes are in the JS, the rest of this snippet is from your post:
var notificationContainer,
notification;
notificationContainer = document.createElement('div');
notificationContainer.className = 'notification-holder';
document.body.appendChild(notificationContainer);
notification = function (content) {
var msg = document.createElement('div');
msg.className = 'notification';
msg.innerHTML = `<p>${content}</p>`;
msg.style.animation = 'notificationAnimate 0.2s forwards';
msg.addEventListener('animationend', function () {
msg.style.visibility = 'visible';
msg.style.animation = '';
setTimeout(function () {
msg.style.animation='notificationAnimate 0.2s reverse';
msg.addEventListener('animationend', function () {
msg.remove();
});
}, 1000);
});
notificationContainer.appendChild(msg);
};
:root{
--black: #151515;
--white: #EDEDEE;
}
.notification-holder{
position: absolute;
bottom: 0px;
right: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.notification{
width: 250px;
padding: 10px;
text-align: center;
background-color: var(--black);
color: var(--white);
font-size: 14px;
font-family: "Poppins", sans-serif;
border-radius: 10px;
}
.notification:not(:first-of-type){
margin-top: 10px;
}
#keyframes notificationAnimate{
0%{
opacity: 0;
max-height: 1px;
transform: translateY(100px);
scale: 0;
}
100%{
opacity: 1;
max-height: fit-content;
transform: translateY(0px);
/* visibility: visible; */
scale: 1;
}
}
<html>
<head>
</head>
<body>
<button onclick="notification('Dark theme has been enabled!')">Dark theme </button>
</body>
</html>
Here you go, may require some fine tuning, but works as expected:
document.querySelector("body").innerHTML += '<div class="notification-holder"></div>';
function notification(content){
var msg = document.createElement('div');
msg.innerHTML += `
<div class="notification">
<p>${content}</p>
</div>
`
document.querySelector(".notification-holder").appendChild(msg);
msg.style.animation = "notificationAnimate 0.2s forwards"
msg.addEventListener("animationend", () => {
msg.style.visibility = "visible";
msg.style.animation = "";
setTimeout(() => {
msg.style.animation="notificationAnimate 0.2s reverse"
msg.addEventListener("animationend", () => {
msg.remove()
})
}, 1000)
})
};
:root{
--black: #151515;
--white: #EDEDEE;
}
.notification-holder{
position: absolute;
bottom: 0px;
right: 10px;
padding-bottom: 10px;
overflow: hidden;
}
.notification{
width: 250px;
padding: 10px;
text-align: center;
background-color: var(--black);
color: var(--white);
font-size: 14px;
font-family: "Poppins", sans-serif;
border-radius: 10px;
}
.notification:not(:first-of-type){
margin-top: 10px;
}
#keyframes notificationAnimate{
0%{
opacity: 0;
max-height: 1px;
transform: translateY(100px);
scale: 0;
}
100%{
opacity: 1;
max-height: fit-content;
transform: translateY(0px);
/* visibility: visible; */
scale: 1;
}
}
<html>
<head>
</head>
<body>
<button onclick="notification('Dark theme has been enabled!')">Dark theme </button>
</body>
</html>
BTW, nice script :-)
;
(function($) {
class Popup {
constructor(options, elem) {
var self = this;
var defaultPopupMenu = `<div>
<i id="faInfo" class="fa fa-info"></i>
<i id="faQuest" class="fa fa-question"></i>
<i id="faLink" class="fa fa-external-link"></i>
</div>`;
this.defaultOptions = {
content: defaultPopupMenu, //this option MUST be set when new options passed through, or only the default menu will show
position: "top", //where the popup will show by default- top. Other options: right, bottom, or left
theme: "popupTheme", //Menu Element theme. Defaults to popupTheme, but custom class can be set instead
style: "", //Popup Menu Style. Default no style, will revert to default colours. Other options: Blue, Red, Green, Custom
animation: "standard", //Standard animation by default. Other options: flip, grow, bounce
event: "click", //Default set to "click", can also be set to hover
hideOnClick: true, //When true, clicking off the menu closes it. When false, only clicking on the menu closes it
zIndex: 100, //Individual z-index can be set for each menu for layering if necessary
//function to handle actions when clicking on popup menu icons. MUST be set when options are passed through or an error or default menu actions will occur
popItemClick: function(globalthis) {
//Default actions
var twentyEightSpaces = `
`;
var twentyFourSpaces = `
`;
var eightSpaces = ` `;
var sixteenSpaces = `
`;
var content;
var container = $(event.target).attr("id");
switch (container) {
case "faInfo":
content = {
type: "info",
heading: "Information",
text: `<p>To set a new menu when calling .popup() on an element,
you must set a variable that holds a string with the html for that menu, then
pass that variable through as the "content" part of the options. For example: </p>
<p>var myMenu = '<div>\ <br />
${twentyEightSpaces}<a href="#''><i id="faInfo" class="fa fa-info"></i></a>\<br />
${twentyFourSpaces}</div>'; </p>
<p>would create a menu with one item, and just add more '<a>' tags with icons inside the '<div>' tags to add more menu items. </p>
<p>Then add it to the content when calling the popup: </p>
<p>$("#myPopUp").popup({ <br />
${eightSpaces}content: myMenu, <br />
${eightSpaces}popItemClick(globalthis) { <br />
${sixteenSpaces}...new actions here... <br />
${eightSpaces}} <br />
});</p>
<p>You must set new actions in the "popItemClick" function for your menu
in the options you pass or it will throw an error.</p>`
}
globalthis.alertBox(content);
break;
case "faQuest":
content = {
type: "info",
heading: "Question",
text: `<p>Why is this being shown?</p>
<p>Because you need to set a popup menu of your own (and the popItemClick() function) or you get this default menu.</p>
<p>If you set the popup menu but don't change the popItemClick() function, you will get an error.</p>
<p>Click the "i" button for more info.</p>`
}
globalthis.alertBox(content);
break;
case "faLink":
window.open("http://example.com/");
break;
default:
content = {
type: "danger",
heading: "Error",
text: `<p>Error! You have set a new menu without changing the 'popItemClick' function.
The 'popItemClick' function must be set to new menu actions.</p>`
}
globalthis.alertBox(content);
}
}
}
this.elem = elem;
this.$elem = $(elem);
this.options = $.extend({}, this.defaultOptions, options);
if (!this.$elem.hasClass(this.options.theme)) {
this.$elem.addClass(this.options.theme);
}
this.init();
}
init() {
this.popup = $('<div class="pop-cont" />')
.addClass('pop-' + this.options.position)
.addClass('popupTheme' + this.options.style)
.append('<div class="pop-items" />')
.appendTo('body').css("opacity", 0).hide();
this.setContent();
this.setTriggers();
}
setContent() {
var self = this;
var location = this.popup.find(".pop-items");
var content;
if ((this.options.position == 'top') || (this.options.position == 'bottom')) {
content = $(this.options.content).find("a").addClass("pop-item");
location.html(content);
this.popup.find("i").first().addClass("leftBorder");
this.popup.find("i").last().addClass("rightBorder");
} else if ((this.options.position == 'left') || (this.options.position == 'right')) {
content = $(this.options.content).find("a").addClass("pop-item").addClass('item-side');
location.html(content);
this.popup.find("i").first().addClass("topBorder");
this.popup.find("i").last().addClass("bottomBorder");
}
//popItemClick callback****************************************
location.find('.pop-item').on('click', function(event) {
event.preventDefault();
self.options.popItemClick.call(this, self);
});
}
setTriggers() {
var self = this;
if (this.options.event === 'click') {
this.$elem.on('click', function(event) {
event.preventDefault();
if (self.$elem.hasClass('pressed')) {
self.pophide();
} else {
self.popshow();
}
});
}
if (this.options.event === 'hover') {
this.$elem.on('mouseenter', function(event) {
setTimeout(function() {
self.popshow();
self.popup = $(self.popup[0]);
}, 250);
});
$(this.popup).on('mouseleave', function(event) {
setTimeout(function() {
self.pophide();
}, 1000);
});
}
if (this.options.hideOnClick === true) {
$('html').on('click.popup', function(event) {
if (event.target != self.elem && self.$elem.has(event.target).length === 0 &&
self.popup.has(event.target).length === 0 && self.popup.is(":visible")) {
self.pophide();
}
});
}
}
pophide() {
var self = this;
var animation = {
opacity: 0
};
this.$elem.removeClass('pressed');
switch (this.options.position) {
case 'top':
animation.top = '+=20';
break;
case 'left':
animation.left = '+=20';
break;
case 'right':
animation.left = '-=20';
break;
case 'bottom':
animation.top = '-=20';
break;
}
this.popup.animate(animation, 200, function() {
self.popup.hide();
});
}
popshow() {
this.$elem.addClass('pressed');
this.setPosition();
this.popup.show().css({
opacity: 1
}).addClass('animate-' + this.options.animation);
}
setPosition() {
var self = this;
this.coords = this.$elem.offset();
var x = this.coords.left;
var y = this.coords.top;
var popWidth = this.popup.width();
var popHeight = this.popup.height();
var adjLeft = popWidth / 2;
var adjTop = popHeight / 2;
this.testy = $('<div class="test" />')
.css({
display: 'inline-block',
margin: '0px',
padding: '0px'
})
.appendTo('body');
var measure = this.$elem.clone().css({
padding: "0px",
margin: "0px"
});
var loc = this.testy;
loc.html(measure);
var textWidth = this.testy.width();
var textHeight = this.testy.height();
this.testy.remove();
var adjMenuWidth = textWidth / 2;
var adjMenuHeight = textHeight / 2;
var up = y - (popHeight + 7);
var down = y + textHeight;
if (this.popup.hasClass('pop-top')) {
this.popup.css({
top: up + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-bottom')) {
this.popup.css({
top: (down + 7) + "px",
left: (x - adjLeft + adjMenuWidth + 5) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-left')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x - popWidth - 2) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
if (this.popup.hasClass('pop-right')) {
this.popup.css({
top: (y - adjTop + adjMenuHeight + 5) + "px",
left: (x + textWidth + 12) + "px",
right: "auto",
'z-index': this.options.zIndex
});
}
}
alertBox(content) {
var self = this;
var myAlert = `<div id="alertBox" class="alert">
<div class="alert-content">
<div class="alert-header">
<h2></h2>
</div>
<div class="alert-body"></div>
<div class="alert-footer">
<button class="alert-close">OK</button>
</div>
</div>
</div>`;
$('body').append(myAlert);
this.alert = $('#alertBox');
this.header = this.alert.find('div.alert-header');
this.heading = this.header.find('h2');
this.alertBody = this.alert.find('div.alert-body');
this.footer = this.alert.find('div.alert-footer');
this.close = this.footer.find('button.alert-close');
this.heading.append(content.heading);
this.alertBody.append(content.text);
switch (content.type) {
case "info":
this.header.addClass("info");
this.footer.addClass("info");
this.close.addClass("info");
break;
case "success":
this.header.addClass("success");
this.footer.addClass("success");
this.close.addClass("success");
break;
case "danger":
this.header.addClass("danger");
this.footer.addClass("danger");
this.close.addClass("danger");
break;
case "warning":
this.header.addClass("warning");
this.footer.addClass("warning");
this.close.addClass("warning");
break;
default:
break;
}
this.alert.show();
var closeBtn = $("button.alert-close");
closeBtn.on("click", function() {
self.alert.remove();
});
$(document).on("click", function(event) {
event.preventDefault();
if (event.target == self.alert[0]) {
self.alert.remove();
}
});
}
};
//Set $.fn.popup so it returns an instance of the Popup class when called*******************************
$.fn.popup = function(options) {
return this.each(function() {
var popobject = new Popup(options, this);
});
};
}(jQuery));
/*jshint multistr: true */
//this is a sample .js file that shows how you might set up the popup menus
;
(function($) {
$(document).ready(function() {
$('#defaultTest').popup();
});
}(jQuery));
/*Default theme**************/
.popupTheme {
background-color: #333;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 5px 5px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
.popupTheme i,
.popupThemeRed i,
.popupThemeBlue i,
.popupThemeGreen i,
.popupThemeCustom i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {
background-color: #4d4d4d;
}
.pop-cont.pop-top::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: #333 transparent transparent transparent;
z-index: 100;
}
.pop-cont.pop-bottom::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
margin-left: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent #333 transparent;
z-index: 100;
}
.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
.pop-cont.pop-right::before {
content: "";
position: absolute;
top: 50%;
left: -14px;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent #333 transparent transparent;
z-index: 100;
}
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 5px 5px 3px #888;
}
.pop-cont,
.pop-item,
.popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {
float: none !important;
}
.pop-item i {
margin: -10px 0 0 -10px;
}
.pop-top {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
}
.pop-bottom {
position: absolute;
top: 0;
left: 50%;
margin-left: -5px;
}
.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.pop-right {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -7px;
}
.animate-standard {
animation: animateStandard 0.3s 1 ease;
-webkit-animation: animateStandard 0.3s 1 ease;
}
#-webkit-keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#keyframes animateStandard {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
.animate-grow {
animation: animateGrow 0.4s 1 ease;
-webkit-animation: animateGrow 0.4s 1 ease;
}
#-webkit-keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
#keyframes animateGrow {
0% {
transform: scale(0) translateY(40px);
opacity: 0;
}
70% {
transform: scale(1.5) translate(0px);
}
100% {
transform: scale(1) translate(0px);
opacity: 1;
}
}
.animate-flip {
animation: animateFlip 0.4s 1 ease;
-webkit-animation: animateFlip 0.4s 1 ease;
}
#-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
#keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.hidden {
display: none !important;
}
.clear {
clear: both;
}
/* The Alert Box (background) */
.alert {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1001;
/* Sit on top */
padding-top: 250px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.8);
/* Black w/ opacity */
}
.alert-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
border-radius: 6px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
max-width: 700px;
min-width: 300px;
/*width settings for different browsers. Note that these won't work at all for IE and versions of Edge before v79*/
width: fit-content;
/*works in chrome and opera*/
width: -moz-fit-content;
/*works for firefox */
width: -webkit-fit-content;
/*works for Edge v79 and up*/
width: -ms-fit-content;
width: -o-fit-content;
}
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.alert-header,
.alert-header.info {
padding: 2px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 5px 5px 0px 0px;
text-align: center;
}
.alert-header.success {
background-color: #00cc1b;
}
.alert-header.danger {
background-color: #ff0000;
}
.alert-header.warning {
background-color: #f7931e;
}
.alert-body {
padding: 2px 16px;
text-align: left;
font-size: 18px;
font-weight: bold;
color: #000;
min-height: 40px;
}
.alert-footer,
.alert-footer.info {
padding: 15px 16px;
background-color: #02baf2;
color: #fff;
border-radius: 0px 0px 5px 5px;
text-align: center;
}
.alert-footer.success {
background-color: #00cc1b;
}
.alert-footer.danger {
background-color: #ff0000;
}
.alert-footer.warning {
background-color: #f7931e;
}
.alert-close,
.alert-close.info {
padding: 5px 15px;
border-radius: 3px;
border: 0;
background-color: #fff;
color: #02baf2;
font-weight: bold;
box-shadow: 5px 5px 10px #666;
}
.alert-close.success {
color: #00cc1b;
}
.alert-close.danger {
color: #ff0000;
}
.alert-close.warning {
color: #f7931e;
}
.alert-close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
}
.alert-close:focus {
outline: none;
}
body {
font-family: Helvetica, sans-serif;
}
.displayBox {
background-color: #efefef;
padding: 0px 0px 30px 0px;
display: inline-block;
width: 100%;
}
.header {
text-align: center;
font-size: 12px;
border-bottom: 1px solid #fff;
width: 100%;
color: #fff;
background-color: #130e5a;
}
.header h1 {
margin: 0px;
padding: 5px 0px;
}
div.icon-box-top {
margin: 50px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
div.icon-box {
margin: 25px 0px 25px 0px;
display: block;
float: left;
clear: both;
}
p.icon-text,
p.menuText {
display: block;
margin-left: 45px;
margin-bottom: 0px;
float: left;
}
p.menuText {
margin-left: 20px !important;
margin-top: 0px;
}
.textPopup {
/*When attaching popups to text menus, style text menu separately*/
display: block;
font-size: 28px;
font-weight: bold;
color: #130e5a;
margin: 0px 0px 0px 75px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
float: left;
z-index: 1;
}
p.textPopup.pressed {
color: #02baf2 !important;
}
div#myPopUp,
div#myPopUp2,
div#myPopUp3,
div#myPopUp4 {
margin-left: 75px;
display: inline-block;
}
i.swIcon {
font-size: 208px !important;
margin: 10px;
}
text-decoration: none;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
I have an example I'm working from which works fine. When I duplicate that code in my app, the icon looks too small and off center.
Here is how it is supposed to look, per example:
Here is how it looks when I enter the same code:
It is smaller and the cog is off center.
Here is the example's html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here is my html:
<div class="icon-box-top">
<div id="defaultTest" style="margin-left: 75px">
<i class="fa fa-cog leftBorder rightBorder"></i>
</div>
</div>
Here are the example's dependencies:
<link rel="stylesheet" type="text/css" href="styles/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="styles/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="scripts/Popup-plugin.js"></script>
<script src="scripts/Example.js"></script>
Here are my dependencies:
<link rel="stylesheet" type="text/css" href="css/Popup-plugin.css">
<link rel="stylesheet" type="text/css" href="css/Example.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- necessary for the "draggable" ui -->
<script src="js/Popup-plugin.js"></script>
<script src="js/Example.js"></script>
The only difference that I can see is he stores his javascript in scripts folder and mine is in js folder. And he stores his css in styles folder whereas mine is in css folder.
The javascript is the same too:
$('#defaultTest').popup();
Any ideas?
I finally found the problem. There was a bootstrap css library that was interfering with the Popup-plugin css. But now my bootstrap tabs don't work and I'll have to spend additional time looking at different versions of it, or replacing the tabs with something else. I figured there was a css conflict somewhere but it took me all day to find it. This has happened to me before and it is a painful and time-consuming process to isolate the problem and fix it. If anyone has suggestions of tools or techniques for speeding up this process, please leave comments below for everyone reading this to benefit.
I have created an accordion with an arrow that points right next to it, I would like the arrow to point downwards when clicked on. How would I accomplish this? Should I use images instead of the normal arrow or is it possible to just use the arrow in the way that I used it? Here is my code in jsfiddle: https://jsfiddle.net/homjt76L/2/
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
h1 {
text-align: center;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
margin-right: 50px;
float: left;
transform: rotate(45deg);
-webkit-transform: rotate(45);
}
.right {
margin-right: 50px;
float: left;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.collapsible {
color: black;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid thin;
text-align: left;
outline: none;
font-size: 15px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
<h1>FAQ</h1>
<button class="collapsible" data-toggle="">
<b>Questions and Answers</b><i class="arrow right"></i>
</button>
<div class="content">
<p>Lorem Ipsum...</p>
</div>
I would probably rename the right class to indicator and then just add this
.collapsible.active .indicator{
transform: rotate(45deg);
}
This would mean that you can remove the down class you've written
The indicator class would look like this if you wanted to add a small transition as well
.indicator {
margin-right: 50px;
float: left;
transform: rotate(-45deg);
transition: 0.2s ease transform;
}
Change icon className right to down on change of className.
Check here: https://jsfiddle.net/Dev024/t4fe6quL/2/
if(this.classList.contains("active"))
{
this.childNodes[1].className = "arrow right"
}
else
{
this.childNodes[1].className = "arrow down"
}
You can put a css like this :
.collapsible.active .right:{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
My point is:
If I click OPEN then should open the popup.
If click BACK then should close the popup
If I click outside popup then should close the popup.
Note: If I click anywhere inside popup when is open, then shouldn't close. Popup must closing only on outside click or BACK click.
How it currently work: If I click anywhere then popup is opening and closing.
So how to do this what I expect? I prepared JSFiddle and Code Snippet.
JSFiddle
$('#open-1').on('click touch', function() {
$("#card-1").toggleClass("flip")
});
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").toggleClass("flip");
}
});
$('#open-1').on('click touch', function(event) {
event.stopPropagation();
});
.panel {
width: 45%;
display: inline-block;
margin-bottom: 20px;
background-color: #fff;
margin: 14px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.est {
box-shadow: 0px 0px 0px #333;
background-color: transparent;
}
div {
display: block;
}
#card-1 {
height: 300px;
width: 100%;
margin: 0 auto;
z-index: 1;
display: inline-block;
perspective: 700px;
}
.flip .front {
transform: rotateY(180deg);
}
.front {
transform: rotateY(0deg);
overflow: hidden;
z-index: 1;
}
.front,
.back {
border: 1px solid #ddd;
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.ease {
-webkit-transition: all .45s ease-out 0s;
-moz-transition: all .45s ease-out 0s;
-ms-transition: all .45s ease-out 0s;
-o-transition: all .45s ease-out 0s;
transition: all .45s ease-out 0s;
}
.open-1,
.open-2,
.open-3,
.open-4,
.open-5 {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
line-height: 50px;
}
.back {
transform: rotateY(180deg);
background-color: #ddd;
display: table;
z-index: 2;
font-size: 13px;
line-height: 23px;
padding: 10px 20px;
height: 320px;
}
.info {
color: #333;
font-size: 20px;
z-index: 9999;
}
.flip .back {
transform: rotateY(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="panel e-b est"> <div class="wrapper">
<div id="card-1">
<div class="front ease">
open
<p>
test content
</p>
</div>
<div class="back ease">
<div class="back-info">
<div class="info">
test content
</div>
</div>
<div class="social-bar">Back</div>
</div>
</div> </div> </div>
JSFiddle
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").toggleClass("flip");
}
});
You are toggle()ing the class here, instead use removeClass():
$(document).on('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#open-1')) {
$("#card-1").removeClass("flip");
}
});
Then select the flipped div instead of the front one to stop toggling when the user clicks on the flipped div
$('.back.ease').on('click touch', function(event) {
event.stopPropagation();
});
Then add a class (for example close-1) to the back button:
Back
And then add a function to remove the flip class upon clicking it
$('.close-1').on('click touch', function() {
$("#card-1").removeClass("flip");
});
I have a popup that opens on a button click and then closes if you click on another button or outside of the popup. I want the popup to fade in on opening and fade out on closing. How can I switch between the two keyframes with javascript?
I tried to do it with switching classes with javascript, but that doesn't work.
var popup = document.getElementById("popup");
var popup_content = document.getElementById("popup_content");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
popup.style.display = "block";
popup.className = "opened";
popup_content = "opened";
}
span.onclick = function() {
popup.style.display = "none";
popup.className = "closed";
popup_content = "closed";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
popup.className = "closed";
popup_content = "closed";
}
}
#popup {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
#popup_content {
position: relative;
margin: auto;
background-color: white;
width: 80%;
max-width: 500px;
border-radius: 5px;
padding: 20px;
text-decoration: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}
.closed {
-webkit-animation-name: animate-in;
-webkit-animation-duration: 0.6s;
animation-name: animate-in;
animation-duration: 0.6s;
}
.opened {
-webkit-animation-name: animate-out;
-webkit-animation-duration: 0.6s;
animation-name: animate-out;
animation-duration: 0.6s;
}
#-webkit-keyframes animate-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
#keyframes animate-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
#-webkit-keyframes animate-out {
from {
opacity: 1
}
to {
opacity: 0
}
}
#keyframes animate-out {
from {
opacity: 1
}
to {
opacity: 0
}
}
#close {
float: right;
cursor: pointer;
margin: -15px -15px 0 0;
}
<button id="add">Open popup</button>
<div class="closed" id="popup">
<div class="closed" id="popup_content">
<i class="fas fa-times-circle" id="close">Close</i> //////content
</div>
</div>
What would be the best way to achieve my goal?
I would use a transition - see the comments in the css and js as to what I changed:
var popup = document.getElementById("popup");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
popup.className = "opened"; // only need to transition the popup
}
span.onclick = function() {
popup.className = "closed";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.className = "closed";
}
}
#popup {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
/* add the following and remove the display:none */
transition: opacity 0.6s;
opacity: 0; /* start off closed and opacity 0 to hide */
}
#popup.opened {
opacity: 1; /* add opacity 1 so it transitions to be shown */
}
#popup.closed {
/* this stops the popup from overlaying the content when closed */
pointer-events:none;
}
#popup_content {
position: relative;
margin: auto;
background-color: white;
width: 80%;
max-width: 500px;
border-radius: 5px;
padding: 20px;
text-decoration: none;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
}
#close {
float: right;
cursor: pointer;
margin: -15px -15px 0 0;
}
<button id="add">Open popup</button>
<div class="closed" id="popup">
<div id="popup_content">
<i class="fas fa-times-circle" id="close">Close</i> //////content
</div>
</div>
To apply an animation using CSS. do not use the display none / block property or snippet. you can instead use the transition property and the opacity property for the fade in / out.
Here is an example of the code
var popup = document.getElementById("popup");
var popup_content = document.getElementById("popup_content");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
popup.className="opened";
popup_content.className="opened";
}
span.onclick = function() {
popup.className="closed";
popup_content.className="closed";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.className="closed";
popup_content.className="closed";
}
}
#popup {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
#popup_content {
position: relative;
margin: auto;
background-color: white;
width: 80%;
max-width: 500px;
border-radius: 5px;
padding: 20px;
text-decoration: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}
.closed {
opacity:0;
visibility:hidden;
transition: opacity 0.8s ease;
}
.opened {
opacity:1;
visibility:visible;
transition: opacity 0.8s ease;
}
#close {
float: right;
cursor: pointer;
margin: -15px -15px 0 0;
}
<button id="add">Open popup</button>
<div class="closed" id="popup">
<div class="closed" id="popup_content">
<i class="fas fa-times-circle" id="close">Close</i>
//////content
</div>
</div>
Mahmoud is right about using display: none/block while trying to introduce a transition or animation. The transition is also best here vs. animations. I did not include here that using classList.add/remove will give you more flexibility in using classes later since it's not the question, but I think it's important side note. What is different here is the inclusion of the visibility attribute to the transition in your opened/closed classes. Since visibility is binary much like using display: none/block, this will remove the transition from site. For example, when closing the popup, the visibility: hidden; attribute will execute right at the beginning of the transition execution. In result, you never see the transition when closing. If you include visibility in your transition, it will execute at the proper time of your transition. I've tested this on firefox and chrome.
var popup = document.getElementById("popup");
var popup_content = document.getElementById("popup_content");
var add = document.getElementById("add");
var span = document.getElementById("close");
add.onclick = function() {
popup.className="opened";
popup_content.className="opened";
}
span.onclick = function() {
popup.className="closed";
popup_content.className="closed";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.className="closed";
popup_content.className="closed";
}
}
#popup {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
#popup_content {
position: relative;
margin: auto;
background-color: white;
width: 80%;
max-width: 500px;
border-radius: 5px;
padding: 20px;
text-decoration: none;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.5);
}
.closed {
opacity:0;
visibility:hidden;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
.opened {
opacity:1;
visibility:visible;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
#close {
float: right;
cursor: pointer;
margin: -15px -15px 0 0;
}
<button id="add">Open popup</button>
<div class="closed" id="popup">
<div class="closed" id="popup_content">
<i class="fas fa-times-circle" id="close">Close</i>
//////content
</div>
</div>