We Keep Coding

How to add scroll class to element and remove it when done

Am trying to add a scrolling class to a text every 1 minute once the text finished scrolling i will remove the class and wait for the next 1 minute. Please can anyone help me out on this below is my sample code but it doesn't work as expected.
$(function(event){
$infoLongMessage = $("#infoLongMessage");
var wait = 60000;
var timer = ($infoLongMessage.text().length + wait);
setInterval(function(){
$infoLongMessage.toggleClass("scroll-left");
}, timer);
})
.content{
background-color: #000;
color: #fff;
padding: 6px 10px;
overflow: hidden;
}
#infoLongMessage{
overflow: hidden;
white-space: pre;
display:block;
}
.scroll-left{
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scrollleft 15s linear infinite;
-webkit-animation: scrollleft 15s linear infinite;
animation: scrollleft 15s linear infinite;
}
/* Move it (define the animation) */
#-moz-keyframes scrollleft {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scrollleft {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scrollleft {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<span id="infoLongMessage" class="scroll-left">Browser sources let you display a webpage from the internet or a local file and are commonly used for widgets and alerts</span>
</div>

You don't need any js to achieve your idea. You need a ticker. Also you can put delay to your animation if you need.
#-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.ticker-wrap {
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
background-color: #9a1f1f;
color: #fff;
padding: 6px 10px;
padding-left: 100%;
box-sizing: content-box;
}
.ticker-wrap .ticker {
display: inline-block;
height: 2rem;
line-height: 2rem;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 30s;
animation-duration: 30s;
}
.ticker-wrap .ticker__item {
display: inline-block;
padding: 0 1rem;
font-size: 1rem;
color: white;
}
<div class="ticker-wrap">
<div class="ticker">
<div class="ticker__item">Hi Lea!</div>
<div class="ticker__item">Look at them !!!</div>
<div class="ticker__item">Owww new items...</div>
<div class="ticker__item">
offers | save up to 50% — shop now
</div>
</div>
</div>

Slide element in when opening page, and slide it out when closing page

I went through dozens of questions here, but nothing answers my problem.
Basically I want to have the same feature as on this website: http://madebyheart.co.uk/work/thrively/ - when you load the page the [X] and MENU buttons slide from top, and when you click [X] to close the page they slide back up...
I tried looking at their code but it gives me headache.
I assume that's done with CSS + JS, but I have no clue where to start.

Check this out.
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.site__title.mega {
text-align: center;
font-size: 60px;
}
.ji:hover {
cursor: pointer;
}
.ji {
padding: 2px 14px;
border: 1px solid black;
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ji").click(function(){
$("#animationSandbox").removeClass("fadeInDown");
$("#animationSandbox").addClass("fadeInUp");
});
});
</script>
</head>
<body>
<span id="animationSandbox" style="display: block;" class="fadeInDown animated">
<h1 class="site__title mega"><span class="ji">X</span></h1>
</span>
</body>
</html>
EDIT:
For achieving fadein animation with display:inline-block; , you have to use fadein classes in inner divs as shown below.
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
body {
background: #f9f9f9;
margin: 0;
}
a {
text-decoration:underline;
color:#000;
position: relative;
}
/* ABOUT + CONTACT */
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 15px;
display: inline;
color: #000;
font-size: 13px;
}
.hlinks2 {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 100px;
display: inline;
color: #000;
font-size: 13px;
}
<span style="display: inline-block;" >
<div id="animationSandbox" class="hlinks fadeInLeft animated">
<span>
ABOUT —
CONTACT
</span>
</div>
</span>

animate.css is good library , Should meet your needs
DEMO:
https://daneden.github.io/animate.css/

Create Image modal for image gallery

I'm Trying to create Image modal for image gallery,But I don't see result When Click on Image,I Don't Know where is problem
How I can fixed it?where is my Wrong?I Used this
link https://codepen.io/koolhaus/pen/ajwcE
My code is
<script>
$(document).on('ready', function(){
$modal = $('.modal-frame');
$overlay = $('.modal-overlay');
$modal.bind('webkitAnimationEnd oanimationend msAnimationEnd
animationend', function(e){
if($modal.hasClass('state-leave')) {
$modal.removeClass('state-leave');
}
});
$('.close').on('click', function(){
$overlay.removeClass('state-show');
$modal.removeClass('state-appear').addClass('state-leave');
});
$('.open').on('click', function(){
$overlay.addClass('state-show');
$modal.removeClass('state-leave').addClass('state-appear');
});
});
$("button").click(function () {
$.ajax({
method: 'GET',
url: './comment?media_id=' + this.id,
success: function (data) {
$("#comments").html(data);
}
});
});
</script>
<div id="comments">
<div class="modal-frame">
<div class="modal">
</div>
</div>
#foreach($array as $img)
<li style="margin:0 auto">
<a class="fancy-btn open">
<img src="{{$img['image']}}">
</a>
</li>
</ul>
#endforeach
</div>

$(document).on('ready', function() {
$modal = $('.modal-frame');
$overlay = $('.modal-overlay');
$modal.bind('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
if ($modal.hasClass('state-leave')) {
$modal.removeClass('state-leave');
}
});
$('.close').on('click', function() {
$overlay.removeClass('state-show');
$modal.removeClass('state-appear').addClass('state-leave');
});
$('.open').on('click', function() {
$overlay.addClass('state-show');
$modal.removeClass('state-leave').addClass('state-appear');
});
});
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
position: relative;
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 22px;
background-color: #F2E1AC;
}
.fancy-btn {
-webkit-appearance: none;
cursor: pointer;
outline: none;
border: none;
position: relative;
top: 50%;
display: block;
min-width: 10%;
line-height: 55px;
font-size: 14px;
text-transform: uppercase;
margin: 0 auto;
padding: 0 10px;
background-color: #F2594B;
color: #FFF;
border-radius: 3px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.fancy-btn:hover {
background-color: #f46f63;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #fff;
opacity: 0;
visibility: hidden;
z-index: 40;
-moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
-o-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
-webkit-transition: opacity 0.25s ease, visibility 0.35s linear;
-webkit-transition-delay: 0s, 0s;
transition: opacity 0.25s ease 0s, visibility 0.35s linear;
}
.modal-overlay.state-show {
opacity: .7;
visibility: visible;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transition-duration: 0.2s, 0s;
-o-transition-duration: 0.2s, 0s;
-webkit-transition-duration: 0.2s, 0s;
transition-duration: 0.2s, 0s;
}
.modal-frame {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 50;
/* display: table; */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-moz-box-align: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
width: 100%;
text-align: center;
visibility: hidden;
}
.modal-frame.state-appear {
visibility: visible;
}
.modal-frame.state-appear .modal-inset {
-moz-animation: modalComeIn 0.25s ease;
-webkit-animation: modalComeIn 0.25s ease;
animation: modalComeIn 0.25s ease;
visibility: visible;
/* to keep # final state */
}
.modal-frame.state-appear .modal-body {
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
.modal-frame.state-leave {
visibility: visible;
}
.modal-frame.state-leave .modal-inset {
-moz-animation: modalHeadOut 0.35s ease 0.1s;
-webkit-animation: modalHeadOut 0.35s ease 0.1s;
animation: modalHeadOut 0.35s ease 0.1s;
visibility: visible;
}
.modal-frame.state-leave .modal-body {
opacity: 0;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-moz-transition-duration: 0.35s;
-o-transition-duration: 0.35s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
-webkit-transform: translateY(25px);
transform: translateY(25px);
}
#-moz-document url-prefix() {
.modal-frame {
height: calc(100% - 55px);
}
}
.modal {
display: block;
vertical-align: middle;
text-align: center;
}
.modal-inset {
position: relative;
padding: 60px;
background-color: white;
min-width: 320px;
min-height: 126px;
margin: auto;
visibility: hidden;
-moz-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.modal-inset .close {
display: block;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
padding: 10px;
opacity: .4;
}
.modal-inset .close:hover {
opacity: 1;
}
.modal-body {
margin: auto;
opacity: 0;
-moz-transform: translateY(0) scale(0.8, 0.8);
-ms-transform: translateY(0) scale(0.8, 0.8);
-webkit-transform: translateY(0) scale(0.8, 0.8);
transform: translateY(0) scale(0.8, 0.8);
-moz-transition-property: opacity, -moz-transform;
-o-transition-property: opacity, -o-transform;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.modal-body h3 {
font-weight: 700;
padding-bottom: 22px;
display: block;
color: #F2594B;
text-align: center;
}
.modal-body p {
padding-bottom: 20px;
}
.modal-body .ps {
font-size: 12px;
opacity: .3;
}
#-webkit-keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-moz-keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#keyframes modalComeIn {
0% {
visibility: hidden;
opacity: 0;
-moz-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
transform: scale(0.8, 0.8);
}
65.5% {
-moz-transform: scale(1.03, 1.03);
-ms-transform: scale(1.03, 1.03);
-webkit-transform: scale(1.03, 1.03);
transform: scale(1.03, 1.03);
}
100% {
visibility: visible;
opacity: 1;
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
#-webkit-keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
#-moz-keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
#keyframes modalHeadOut {
0% {
visibility: visible;
opacity: 1;
-moz-transform: translateY(0) scale(1, 1);
-ms-transform: translateY(0) scale(1, 1);
-webkit-transform: translateY(0) scale(1, 1);
transform: translateY(0) scale(1, 1);
}
100% {
visibility: hidden;
opacity: 0;
-moz-transform: translateY(35px) scale(0.97, 0.97);
-ms-transform: translateY(35px) scale(0.97, 0.97);
-webkit-transform: translateY(35px) scale(0.97, 0.97);
transform: translateY(35px) scale(0.97, 0.97);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="modal-frame">
<div class="modal">
<div class="modal-inset">
<div class="button close"><i class="fa fa-close"></i></div>
<div class="modal-body">
<h3>Hello header</h3>
<p>body here......</p>
<p class="ps">ps!!!</p>
</div>
</div>
</div>
</div>
<div class="modal-overlay"></div>
<div id="comments">
<li style="margin:0 auto">
<a width="100" height="100" class="fancy-btn open"> <img alt="Image Here" />
</a>
</li>
</div>

Want to close the sidepanel using the minus icon

Currently the sidepanel opens using PLUS symbol and is closed using the close btn on the sidepanel.
PLUS symbol now changes to minus but it doesn't go back to plus when the sidepanel is closed and also I want to be able to click the minus symbol and close the sidepanel as well.
Hope I made my point clear.
Here is the jsfiddle related to it:
https://jsfiddle.net/bob_js/h9yfbden/1/
HTML
<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel-nvv from-right">
<header class="cd-panel-header">
</header>
<div class="cd-panel-container">
Content
</div>
</div>
CSS
.glyphicon-plus-sign, .glyphicon-minus-sign{
top: 30%;
position: absolute !important;
z-index: 1;
color: rgb(255, 133, 102);
background-color: #fff;
border-radius: 50%;
border: 1px solid #fff;
cursor: pointer;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.glyphicon-plus-sign:hover, .glyphicon-minus-sign:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
*, *::after, *::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*::after, *::before {
content: '';
}
a {
color: #89ba2c;
text-decoration: none;
}
.cd-main-content {
text-align: center;
}
.cd-main-content .cd-btn {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-main-content .cd-btn-val {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-val:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
.cd-panel-header {
position: fixed;
height: 27px;
width: 3%;
background-color: transparent;
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0);
-webkit-transition: top 1.3s 0s;
-moz-transition: top 1.3s 0s;
transition: top 1.3s 0s;
}
.from-right .cd-panel-header, .from-left .cd-panel-header {
top: -50px;
}
.from-right .cd-panel-header {
right: 20px;
}
.from-left .cd-panel-header {
left: 0;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 1.3s 0.3s;
-moz-transition: top 1.3s 0.3s;
transition: top 1.3s 0.3s;
}
#media only screen and (min-width: 1471px) {
.cd-panel-header {
height: 30px;
}
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 40px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 11px;
left: 20px;
height: 3px;
width: 15px;
background-color: #fff;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
height: 100%;
top: 0;
background: #901818;
border-left: 1px solid #c8cacc;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 1.8s;
-moz-transition-duration: 1.8s;
transition-duration: 1.8s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
z-index: 1;
overflow-y: auto;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
}
#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 23.5%;
}
}
#media only screen and (min-width: 1271px) {
.cd-panel-container {
width: 23.5%;
}
}
#media only screen and (min-width: 1471px) {
.cd-panel-container {
width: 23.5%;
}
}
jQuery
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
event.preventDefault();
}
});
});

You were not that far...
I only changed addClass for toggleClass
in $('.cd-btn').on('click'....
And added $('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");to $('.cd-panel').on('click'....
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
//NVV
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
event.preventDefault();
}
});
});
Updated Fiddle

Use .toggleClass(); and listening to both $('.cd-btn, .cd-panel').
JSFiddle
jQuery(function($) {
//open the lateral panel
$('.cd-btn, .cd-panel').on('click', function(event) {
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
});

dropzone js onclick submit file upload

upload all files with a single button click.
HTML:
<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>
JS:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
But the file is upload after drag and drop..

use simple code
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(element, {
url: "/upload.php",
autoProcessQueue: false,
});
$('#imgsubbutt').click(function(){
myDropzone.processQueue();
});

I accomplished this by placing my dropzone in a div instead of a form, thereby removing the ability for dropzone to automatically POST the uploads to a given URL. The URL I passed to the dropzone instance when I created it is literally 'dummy' since it will never be called. For example,
HTML
<button id="submit-all">Submit all files</button>
<div class="dropzone" id="my-dropzone"></div>
JavaScript
$('#submit-all').on('click', function() {
var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles();
// Do something with the files.
});

Here how i implement delayed uploading (initiated by click on any button, for an example):
Dropzone implementation
var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
maxFilesize: 5, // MB
parallelUploads: 5,
uploadMultiple: true,
acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
maxFiles: 10,
init: function() {
this.on("removedfile", function (file) {
// delete from our dict removed file
delete addedFilesHash[file];
});
},
accept: function(file, done) {
var _id = count++;
file._id = _id;
addedFilesHash[_id] = done;
}
});
Somewhere else
// get all uploaded files in array
var addedFiles = Object.keys(addedFilesHash);
// iterate them
for (var i = 0; i< addedFiles.length; i++) {
// get file obj
var addedFile = addedFiles[i];
// get done function
var doneFile = addedFilesHash[addedFile];
// call done function to upload file to server
doneFile();
}
We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.

I got just finished messing around with this myself- I wanted to add information about the image to a database at the same time as uploading it. Dropping a file opens the input form for the extra info and then the queue needs sending after the form button is pressed.
I finally achieved this by putting a jquery click event handler inside the init 'on add file' function event:
this.on("addedfile", function(file){
var myDropzone = this;
$('#imageinfoCont').animate({left:'4.5%'});//brings form in
$('#imgsubbutt').click(function(){
$('#imageinfoCont').animate({left:'-10000px'}); //hides the form again
myDropzone.processQueue(); //processes the queue
});
});
I am then adding the extra data in a separate 'on sending' function event (could probably do it in the above code but baby steps I think).
Seems to work like a charm.

Although this has been answered, I ran into a situation where I only wanted to submit the queue IF it was a certain type of file. The bug I ran into was it was ignoring processQueue.
this.dropzone = new Dropzone('#my-dropzone', {
autoProcessQueue: false,
});
return this.dropzone.on('addedfile', (function(_this) {
return function(file) {
var IMAGE_EXTENSIONS, ext;
IMAGE_EXTENSIONS = 'png jpg jpeg gif'.split(' ');
ext = (_.last(file.name.split('.'))).toLowerCase();
if (_.include(IMAGE_EXTENSIONS, ext)) {
return console.log('IMAGE!');
} else {
return setTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!
return _this.dropzone.processQueue();
}, 10);
}
};
})(this));
I had to use the setTimeout seen above because processQueue did nothing if I didn't defer it in this manner.

Working example
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('.dropzone-file', {
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
autoProcessQueue: false,
});
$('.upload-files').on('click', function() {
var files = $('.dropzone-file').get(0).dropzone.getAcceptedFiles();
//upload bar
$('.dz-upload').addClass('dz-progress-bar');
// Do something with the files.
console.log(files)
});
.dropzone-file{
border: 1px dashed green;
padding: 1%;
text-align: center;
}
.dropzone-file:hover{
cursor:pointer;
background:whitesmoke;
}
#-webkit-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-moz-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-moz-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.dropzone-file,
.dropzone-file * {
box-sizing: border-box;
}
.dropzone-file {
min-height: 150px;
border: 2px solid rgba(0, 0, 0, 0.3);
background: #fff;
padding: 20px 20px;
}
.dropzone-file.dz-clickable {
cursor: pointer;
}
.dropzone-file.dz-clickable * {
cursor: default;
}
.dropzone-file.dz-clickable .dz-message,
.dropzone-file.dz-clickable .dz-message * {
cursor: pointer;
}
.dropzone-file.dz-started .dz-message {
display: none;
}
.dropzone-file.dz-drag-hover {
border-style: solid;
}
.dropzone-file.dz-drag-hover .dz-message {
opacity: 0.5;
}
.dropzone-file .dz-message {
text-align: center;
margin: 2em 0;
}
.dropzone-file .dz-message .dz-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.dropzone-file .dz-preview {
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px;
}
.dropzone-file .dz-preview:hover {
z-index: 1000;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone-file .dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-image-preview {
background: #fff;
}
.dropzone-file .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.dropzone-file .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none;
}
.dropzone-file .dz-preview .dz-remove:hover {
text-decoration: underline;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%;
}
.dropzone-file .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px;
}
.dropzone-file .dz-preview .dz-details .dz-filename {
white-space: nowrap;
}
.dropzone-file .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis;
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent;
}
.dropzone-file .dz-preview .dz-details .dz-filename span,
.dropzone-file .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px;
}
.dropzone-file .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px);
}
.dropzone-file .dz-preview .dz-image {
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10;
}
.dropzone-file .dz-preview .dz-image img {
display: block;
}
.dropzone-file .dz-preview.dz-success .dz-success-mark {
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview.dz-error .dz-error-mark {
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview .dz-success-mark,
.dropzone-file .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px;
}
.dropzone-file .dz-preview .dz-success-mark svg,
.dropzone-file .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px;
}
.dropzone-file .dz-preview.dz-processing .dz-progress {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.dropzone-file .dz-preview.dz-complete .dz-progress {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
}
.dropzone-file .dz-preview:not(.dz-processing) .dz-progress {
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite;
}
.dropzone-file .dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
border-radius: 8px;
overflow: hidden;
}
.dropzone-file .dz-preview .dz-progress .dz-upload {
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
.dropzone-file .dz-preview.dz-error .dz-error-message {
display: block;
}
.dropzone-file .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto;
}
.dropzone-file .dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: #fff;
}
.dropzone-file .dz-preview .dz-error-message:after {
content: "";
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626;
}
.dz-progress-bar {
width: 0;
animation: progress 1.5s ease-in-out forwards;
}
#keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone#5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone#5/dist/min/dropzone.min.css" type="text/css" />
<!--begin::Dropzone-->
<div class="dropzone-file fileuploader">
<!--begin::Message-->
<div class="dz-message needsclick">
<!--begin::Icon-->
<i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-4">
<h3 class="fs-5 fw-bolder text-gray-900 mb-1">Drop files here or click to upload.</h3>
<span class="fs-7 fw-bold text-gray-400">Upload any kind of files</span>
</div>
<!--end::Info-->
</div>
</div>
<!--end::Dropzone-->
<button class='upload-files'>Upload Files</button>