How to restart animation CSS javascript when clicking a button - javascript

I have two animations for two diferrent buttons which I took from this website https://animate.style/
First animation should run when the help button is clicked. An iframe is then displayed (a chatbot). When the close button is clicked the iframe is hidden and a new animation runs on the help button. However, when I click the help button again the animations do not work. I have tried to add and remove the classes but with no results. Can someone please help me?
Thank you
This is my code:
<button type="button" class="btn" id="btn1" onclick="animationAdd();displayIframe()">
help*
</button>
<div class="callout" data-closable>
<button class="close-button" id="btn2" onclick = "hideIframe();animationRemove(); hide"aria-label="Close alert" type="button" data-close>
<span aria-hidden="true">×</span>
</button>
</div>
<div id="iframeDisplay"></div>
<script>
function animationAdd(){
var z = document.getElementById("btn1");
z.className += " animate__animated animate__bounceOutDown";
setTimeout(function(){
$("#btn1").removeClass("animate__animated animate__bounceOutDown");
},1000);
setTimeout(function(){
$("#btn1").classList.add("animate__animated animate__bounceOutDown");
},1000);
}
</script>
<script>
function animationRemove(){
var z = document.getElementById("btn1");
z.className += " animate__animated animate__fadeInUp";
const el = this;
var newone = elm.cloneNode(true);
elm.parentNode.replaceChild(newone, elm);
}
</script>
<style>
#close {
float:right;
display:inline-block;
padding:2px 5px;
background:#ccc;
}
.animate__animated.animate__bounceInUp {
--animate-duration: 1s;
}
iframe { position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
.btn{
width: 60px;
height: 60px;
padding: 10px 0px;
background: #000000;
color: white;
outline: none;
cursor: pointer;
font-size: 20px;
font-weight: 500;
border-radius: 80%;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9890;
outline: 1px solid;
outline-color: rgba(255, 255, 255, .5);
outline-offset: 0px;
text-shadow: none;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}
.btn:hover {
border: 1px solid;
box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
outline-color: rgba(255, 255, 255, 0);
outline-offset: 15px;
text-shadow: 1px 1px 2px #427388;
}
.close-button{
width: 30px;
height: 10px;
color: white;
outline: none;
cursor: pointer;
font-size: 20px;
font-weight: 500;
position: fixed;
bottom: 510px;
right: 32px;
z-index: 99999;
background: none;
margin: 0;
padding: 0;
border: none;
display: none;
animation: clickit 11s;
}
.close-button:hover{
color: red;
}
#keyframes clickit {
from { opacity : 0 ; /* Or visibility: hidden; */ }
to { opacity : 1; /* Or visibility: visible; */ }
}
}

Related

How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked?

I'm trying to make the hint-bubble div slowly slide out (with 'transition: 0.5s') whenever hint-btn is clicked. I managed to make it work so that the hint-bubble shows up when the button is clicked, but it shows up instantly, I can't figure out how to slow down the transition.
HTML:
<body>
<div class="hints">
<p>Need help?</p>
<br>
<p>Click button below to get some hints!<p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
</div>
</body>
CSS:
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
display: none;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
Javascript:
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.display = "none";
isOn = false;
} else {
hintBubble.style.display = "unset";
isOn = true;
}
});
You can also check it on codepen if you prefer: https://codepen.io/gchib00/pen/ExNrvrR
You can't use display to transition visibility of objects, instead use opacity and pointer-event: none to make it not block clicks
You can also use classList.toggle to more easily toggle and not have to worry about the previous state.
It also allows you to put your visible styles in the stylesheet and not in the script which makes it easier to maintain
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
btnHint.addEventListener("click", () => {
hintBubble.classList.toggle("shown")
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: 'Montserrat', sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #F47B13;
color: white;
box-shadow: 0px 0px 1px #F47B13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
transform: translateX(-20px);
opacity: 0;
pointer-events: none;
}
.hint-bubble.shown {
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.hint-bubble::before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<button class="hint-btn">Hints</button>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked</div>
read more:
displaying-div-in-a-smooth-manner
MDN transitions
transition does not work with display rule. Use the rules of opacity and visibility together.
Add visibility: hidden and opacity: 0, as default, to the css, to the selector .hint-bubble. And delete display: none.
Also, pay attention to the javascript code.
const btnHint = document.querySelector(".hint-btn");
const hintBubble = document.querySelector(".hint-bubble");
const hintsBox = document.querySelector(".hints");
let isOn = null;
btnHint.addEventListener("click", () => {
if (isOn) {
hintBubble.style.visibility = "hidden";
hintBubble.style.opacity = "0";
isOn = false;
} else {
hintBubble.style.visibility = "visible";
hintBubble.style.opacity = "1";
isOn = true;
}
});
.hints {
right: 28rem;
bottom: 33.4rem;
border: 1px solid black;
background-color: #707070;
color: white;
box-shadow: 0px 0px 1px 1px black;
border-radius: 3px;
}
.hints p:first-child {
padding-bottom: 0.4rem;
border-bottom: 3px solid #a6a4a4;
margin-bottom: -1rem;
}
.hints p:nth-child(3) {
font-size: 0.7rem;
}
.hint-btn {
font-family: "Montserrat", sans-serif;
background: none;
width: 3rem;
font-size: 0.75rem;
border-radius: 4px;
border: 1px solid #595656;
background-color: #f47b13;
color: white;
box-shadow: 0px 0px 1px #f47b13;
outline: none;
padding-top: 0.2rem;
padding-bottom: 0.2rem;
}
.hint-btn:hover {
background: #c76410;
transition: 0.4s;
}
.hint-btn:active {
background: #f2b683;
transition: 0.6s ease-in-out;
}
.hint-bubble {
width: 15.6rem;
padding: 0.2rem;
text-align: center;
color: white;
background-color: #707070;
font-size: 0.8rem;
border-radius: 3px;
box-shadow: 0px 0px 1px 1px black;
padding: 0.7rem;
transition: 0.8s;
right: 28rem;
bottom: 32.5rem;
visibility: hidden;
opacity: 0;
}
.hint-bubble:before {
position: absolute;
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 0.8rem solid #707070;
right: 7.2rem;
top: -1.3rem;
}
<div class="hints">
<p>Need help?</p>
<br />
<p>Click button below to get some hints!</p>
<p>
<button class="hint-btn">Hints</button>
</p>
</div>
<div class="hint-bubble">I would like this div to slide out when "Hints" button is clicked
</div>

transition delete after i open the navbar. what happen?

I have a navbar opening div when i hover on it, it shows a tip(something like that) and when i hover on tip it will disappear.
the tip has got a transition But when i open and close the navbar the transition will deleted and when i hover on tip it wont disappear.
its the code:
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51, 51, 51, 0.726)";
document.getElementById("menu-icon-tip").style.opacity = "0";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51, 51, 51)";
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255, 255, 255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207, 207, 207);
}
<div class="navbar" id="navbar">
×
<div id="navbar-content" class="navbar-content">
Home
item2
item3
item4
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>
what can i do?
it is the video
you are overriding the transition.
use .active class and toggle this class
function openNav() {
document.getElementById("navbar").style.width = "250px";
document.getElementById("navbar-content").style.marginLeft = "60px";
document.body.style.backgroundColor = "rgba(51, 51, 51, 0.726)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.add('active');
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("navbar").style.width = "0";
document.getElementById("navbar-content").style.marginLeft = "-200px";
document.body.style.backgroundColor = "rgb(51, 51, 51)";
const menuIconTip = document.getElementById("menu-icon-tip");
menuIconTip.classList.remove('active');
}
body{
background : #000;
}
.menu-icon {
width: auto;
height: auto;
position: fixed;
margin: 20px 30px;
cursor: pointer;
float: right;
transition: background 1s;
}
.menu-icon-tip {
visibility: hidden;
width: 110px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 3px 0;
position: absolute;
z-index: 1;
top: 140%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 1s;
font-family: menu;
font-size: 15px;
}
.menu-icon-tip.active {
opacity: 1;
}
.menu-icon-tip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -7px;
border-width: 5px;
border-style: solid;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid #555;
border-top: none ;
}
.menu-icon:hover > .menu-icon-tip {
visibility: visible;
opacity: 1;
}
.rect-menu {
width: auto;
height: auto;
margin-left: 11px;
}
.menu-icon-rect-1 {
width: 65px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 100px;
margin: 3px 1px;
}
.menu-icon-rect-2 {
width: 35px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.menu-icon-rect-3 {
width: 45px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 30px;
margin: 3px 1px;
}
.circle-menu {
width: auto;
height: auto;
margin-top: -36.5px;
}
.menu-icon-circle {
width: 9px;
height: 9px;
background: rgb(196, 196, 196);
border-radius: 50%;
margin-bottom: 3px;
}
.menu-icon:hover .menu-icon-rect-1 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-2 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-rect-3 {
background-color: rgb(255, 255, 255);
}
.menu-icon:hover .menu-icon-circle {
background-color: rgb(255, 255, 255);
}
.navbar {
height: 100%;
/* 100% Full-height */
width: 0;
/* 0 width - change this with JavaScript */
position: fixed;
/* Stay in place */
z-index: 1;
/* Stay on top */
top: 0;
/* Stay at the top */
left: 0;
background-color: #111;
/* Black*/
overflow-x: hidden;
/* Disable horizontal scroll */
padding-top: 60px;
/* Place content 60px from the top */
transition: 1s;
/* 0.5 second transition effect to slide in the sidenav */
font-family: menu;
}
.navbar-content {
position: relative;
top: 30px;
width: 100%;
left: -70px;
margin-top: 30px;
transition: 1s;
}
.navbar-content a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 40px;
}
.navbar a:hover {
color: #f1f1f1;
}
.menu-close-btn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: rgb(207, 207, 207);
}
<div class="navbar" id="navbar">
×
<div id="navbar-content" class="navbar-content">
Home
item2
item3
item4
</div>
</div>
<div class="menu-icon" onclick="openNav()">
<span class="menu-icon-tip" id="menu-icon-tip">open Navigation bar</span>
<div class="rect-menu">
<div class="menu-icon-rect-1"></div>
<div class="menu-icon-rect-2"></div>
<div class="menu-icon-rect-3"></div>
</div>
<div class="circle-menu">
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
<div class="menu-icon-circle"></div>
</div>
</div>
You are overriding your css transition with your javascript
You should remove any style modification you're applying on .menu-icon-tip
document.getElementById("menu-icon-tip").style.opacity = "0";
And
document.getElementById("menu-icon-tip").style.opacity = "1";
document.getElementById("menu-icon-tip").style.transition = "opacity 1s";
They're useless and are messing with your animations.

Height attribute messing with frontend visibility?

I am trying to create a list of notes on my website.
I currently have a problem where I have a gradient background color when you hover over the different note titles. This for some reason requires a height.
If I do not have this height attribute (the height attribute for .blur-container), the background won't switch colors when I hover. However, the note text is shown as expected:
Before clicking the title:
https://gyazo.com/4619429746b1de039987be48a7480917
After clicking the title:
https://gyazo.com/999277ba3939bfd875ca4562c935ac3c
If I DO have the height attribute, The background goes a little white as expected, however when I click on the title, the note text does not show.
When hovering over title:
https://gyazo.com/b70eddd96e45836296e20a21c329754a
What is the issue here and how can I fix it? I pasted my html and CSS below:
HTML:
<div class="task-notes-container">
<input type="text" value="" class="form-control task-notes" placeholder="Title" (keyup)="addNotesItem($event)" [(ngModel)]="newNotesTitle"/>
<i (click)="addNotesItem($event)" class="add-item-icon ion-plus-round"></i>
<div class="box-shadow-border"></div>
<ul class="notes-list">
<li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
(mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
<div class="blur-container" [ngClass]="{'changeHeight': item.expand}"><div class="blur-box"></div></div>
<div class="note-title" (click)="expandItem(item);">
<i class="mark" [ngStyle]="{ 'background-color': item.color }"></i>
<label>
<span class="cut-with-dots"><b>{{ item.title }}</b></span>
</label>
<i class="remove-notes ion-ios-close-empty" (click)="item.deleted = true"></i>
</div>
<div [hidden]="!item.expand">
<p [hidden]="item.hide || item.text == ''" (click)="noteTextClick(item, focusable);" [innerHTML]="item.text"></p>
<div [hidden]="!item.hide && item.text != ''">
<textarea placeholder="haha" [(ngModel)]="item.text" (blur)="onTextBlur(item);" (focus)="onTextFocus(item);" placeholder="Default Input" class="form-control" id="textarea01" #focusable></textarea>
</div>
</div>
</li>
</ul>
</div>
CSS:
#import '../../../theme/sass/conf/conf';
input.task-notes {
margin-bottom: 8px;
}
ul.notes-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
}
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
div.note-title {
height: 42px;
}
i.remove-notes {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: rgba($input-border, 0.5);
visibility: hidden;
line-height: 42px;
&:hover {
color: $input-border;
}
}
&:hover {
i.remove-notes {
visibility: visible;
}
}
&.checked {
.notes-text {
color: $content-text;
}
&:before {
background: $input-border !important;
}
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
height: 42px;
min-width: 4px;
background: $input-border;
cursor: pointer;
transition: min-width 0.3s ease-out;
}
&.active {
i.mark {
min-width: 40px;
}
label.notes-checkbox > span {
&:before {
color: white;
content: '\f10c';
margin-right: 20px;
transition: margin-right 0.1s ease-out;
transition-delay: 0.2s;
float: none;
}
}
label.notes-checkbox > input:checked + span:before {
content: '\f00c';
}
}
}
}
label.notes-checkbox {
width: 100%;
padding-right: 25px;
min-height: 16px;
cursor: pointer;
> span {
white-space: nowrap;
height: 16px;
&:before {
border: none;
color: $help-text;
transition: all 0.15s ease-out;
}
}
}
.add-item-icon {
display: none;
}
.ng2, .blur {
.task-notes-container {
.notes-panel.panel {
color: white;
opacity: 0.9;
}
input.task-notes {
color: white;
width: calc(100% - 25px);
border-radius: 0;
border: none;
background: transparent;
&:focus {
outline: none;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
}
.add-item-icon {
display: block;
float: right;
margin-top: -45px;
margin-right: 5px;
font-size: 25px;
cursor: pointer;
}
ul.notes-list {
li {
margin: 0;
border: none;
font-weight: $font-light;
.blur-container {
height: 40px;
position: absolute;
width: calc(100% + 40px);;
top: 0;
left: -25px;
overflow-y: hidden;
}
.changeHeight {
height: auto;
}
&:hover {
.blur-container {
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
.blur-box {
cursor: pointer;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-filter: blur(3px);
}
}
i.remove-notes {
color: white;
opacity: 0.4;
&:hover {
color: white;
opacity: 0.95;
}
}
i.mark {
min-width: 40px;
display: none;
}
label.notes-checkbox > span {
&:before {
position: absolute;
color: $content-text;
content: '\f10c';
float: none;
margin-right: 6px;
transition: none;
}
}
&.checked {
label.notes-checkbox > span {
&:before {
content: '\f00c';
}
}
}
}
}
.box-shadow-border {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
width: calc(100% + 44px);
margin-left: -22px;
}
}
}

Trigger inner class while activating container class as 'this'

In my current example you see '.collapse' container which is triggered when someone clicks anywhere on the div itself. There are many '.collapse' divs but each one is triggered individually because of 'this' in the JS. The problem is that I don't want the whole container to be the trigger.
How can I replace '.collapse' in JS and use h2:after instead but still trigger .collapse as 'this'.
Let me know if this is confusing so I can edit my question to be more understandable.
HTML
<div class="collapse">
<h2>sometext
::after
</h2>
</div>
JS
$('.collapse').on('click',function(e){
e.preventDefault();
$(this).toggleClass('active');
});
http://codepen.io/mariomez/pen/jyaWax
I don't see any h6 in your code but you can use the h2 and use $(this) and parent() to select it's parent. I hope this is what you're looking for:
$('h2').on('click', function(e) {
$(this).parent().toggleClass('active');
});
#import url(http://fonts.googleapis.com/css?family=Roboto);
html {
height: 100%
}
body {
font-family: 'Roboto', sans-serif;
font-size: 15px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; background:url(https://unsplash.imgix.net/40/OTwgwURiQN6DLk8zIr8E_DSC00953.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=408af6f15369c9d232097a79ff997fa7) center no-repeat;
background-size: cover
}
h1 {
color: #fff;
text-align: center
}
.wrap {
width: 80%;
margin: 0 auto;
}
.collapse {
background-color: rgba(255, 255, 255, 0);
border-bottom: 1px solid #eee;
cursor: pointer;
color: #fff;
padding: 10px;
margin: 0px;
max-height: 40px;
overflow: hidden;
transition: all 0.4s;
}
.collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.collapse.active {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
z-index: 200;
color: #444;
max-height: 3000px;
padding: 10px 20px;
margin: 10px -10px;
transition: all 0.2s, max-height 4.8s;
}
.collapse h2 {
font-size: 18px;
line-height: 20px;
position: relative
}
.transparent {
background-color: rgba(255, 255, 255, 0) !important;
color: #fff !important;
box-shadow: none !important;
margin: 0px !important;
padding: 10px !important
}
.collapse h2::after {
content: "+";
text-align: center;
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 12px;
line-height: 15px;
opacity: 0.5;
right: 0;
top: 0;
}
.collapse:hover h2::after {
opacity: 1
}
.collapse.active h2::after {
content: "-";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<h1>Collapsible drawers</h1>
<div class="collapse transparent">
<h2>I am transparent</h2>
The brain is like a muscle. When it is in use we feel very good. Understanding is joyous.
<b>Carl Sagan</b>
<p>This one keeps the transparency</p>
</div>
</div>

Disable or non-accessible popup background area

I have following html structure :
<div id="content">
<!-- data -->
<div id="popup"></div>
<!-- data -->
</div>
I am displaying my popup on page load , but at the same time I want to disable background area . My popup box is appearing on z-index , and rest background area should be non-accessible at this time .
How can I achieve this ?
I am using this css style :
#popup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 rgb(36, 35, 35);
border: 5px solid rgb(5, 5, 5);
border-radius: 3px 3px 3px 3px;
color: #333333;
font-size: 14px;
left: 50%;
margin-left: -402px;
position: fixed;
top: 250px;
height: 150px;
width: 600px;
z-index: 2;
padding: 50px;
}
You will need a div to cover the entire window.
This will not be enough though since a user might still use the keyboard to navigate in the background. You would have to iterate all the a/input/button/select elements on the page and add an tab-index attribute set to -1. When you hide the pop-up they should remove the 'tab-index' attribute.
The reason for the tab-index manipulation is also one of accessibility. A user that navigates through the keyboard will have a hard time navigating content inside of your pop-up if you let them navigate in the background.
So, how would we go about constructing this? Just to set you off:
Html:
<div id="popup" class="popup">
<div class="cover"></div>
<div class="popupBody">
...
</div>
</div>
Css:
.popup {
background-color:black;display:none;
position:fixed;
left:0;right:0;top:0;bottom:0;
z-index:3000;
opacity:0.5;
}
js+ jQuery for adding tabindex:
$('input, a, button, select').each(function () {
$(this).attr('tabindex', '-1');
});
Note: Here the popup is the 'cover', with popupBody being the actual popup, uggly but working jsfiddle: http://jsfiddle.net/mjfag/1
An alternative would be to use the JQuery UI module for modal dialogues. That does nothing for the keyboard-navigation though but if that is of no concern all the other stuff is already done for you.
Edit: After some quick testing with a newer version of jQuery UI it seems like they've started handling the keyboard to.
try this
<div class="modalpopup">
<div class="modal-backdrop fade in">//for background disable
</div>
<div
class="modal hide fade in" id="myModal" style="display: block;">
<div class="modal-header">
<h3 id="myModalLabel">
Modal Heading</h3>
</div>
<div class="modal-body">
<h4>
Popover in a modal</h4>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
</div>
<style>
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 10%;
left: 50%;
z-index: 1050;
width: 560px;
margin-left: -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
outline: none;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}
.modal.fade.in {
top: 10%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-header h3 {
margin: 0;
line-height: 30px;
}
.modal-body {
position: relative;
max-height: 400px;
padding: 15px;
overflow-y: auto;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
text-align: right;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.modal-footer:before,
.modal-footer:after {
display: table;
line-height: 0;
content: "";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-bottom: 0;
margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-footer .btn-block + .btn-block {
margin-left: 0;
}
</style>
You need to completely cover the div: #content with some other div.
Here's the Complete HTML Code :
<html>
<head>
<title>Pop Up Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
#main {
width: 100%;
height: 100%;
background-color: #EFEFEF;
padding: 50px;
font-size: 14px;
font-weight: bold;
}
#enclosePopUp {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 1;
filter: alpha(opacity = 100);
display: none;
z-index: 2;
}
#popup {
position: absolute;
_position: absolute; /* hack for internet explorer 6 */
height: 45px;
width: 295px;
background: #FFFFFF;
left: 500px;
top: 250px;
text-align: center;
border: 2px solid #BDBDBD;
padding: 15px;
font-size: 15px;
-moz-box-shadow: 0 0 5px #D8D8D8;
-webkit-box-shadow: 0 0 5px #D8D8D8;
box-shadow: 0 0 5px #D8D8D8;
}
#disabledLink {
display: none;
}
</style>
<script type="text/javascript">
function loadPopUp() {
$('#enclosePopUp').fadeIn("slow", function() {
$("#main").css({
"opacity" : "0.3",
"z-index" : "1"
});
$("#disabledLink").show();
});
}
function unLoadPopUp() {
$('#enclosePopUp').fadeOut("slow", function() {
$("#main").css({
"opacity" : "1"
});
$("#disabledLink").hide();
});
}
</script>
</head>
<body>
<div id="main">
Click here to show PopUp
<br> <a id="disabledLink" href="http://www.google.com">Google.com</a>
</div>
<div id='enclosePopUp'>
<div id="popup">
This is a pop up with disabled background. <br> <a href="#"
onclick="return unLoadPopUp();">Close</a>
</div>
</div>
</body>
</html>

Categories