Display Image Uploaded Area in Dropzone - javascript

Hello!
I am implementing Dropzone.js for making gallary.
I am facing a little problem. By deafult, Dropzone shows blank container area with clickable effect to upload one or more photos. But i want to override this effect and wants to show image upload options like in image given above .
So far,i tried to override this by overriding css but the result was like this.
What css code should i target to achieve the desired effect ?
dropzone.css
.dropzone, .dropzone * {
box-sizing: border-box; }
.dropzone {
min-height: 150px;
border: 2px dotted rgba(0, 0, 0, 0.3);
background: white;
padding: 20px 20px; }
.dropzone.dz-clickable {
cursor: pointer; }
.dropzone.dz-clickable {
cursor: default; }
.dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
cursor: pointer;
border: 2px dotted black;
}
.dropzone.dz-started .dz-message {
display: none; }
.dropzone.dz-drag-hover {
border-style: solid; }
.dropzone.dz-drag-hover .dz-message {
opacity: 0.5; }
.dropzone .dz-message {
text-align: center;
margin: 2em 0; }
.dropzone .dz-preview {
//border: 2px dotted grey;
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px; }
.dropzone .dz-preview:hover {
z-index: 1000; }
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
.dropzone .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd); }
.dropzone .dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dropzone .dz-preview.dz-image-preview {
// background: yellow;
background: white;}
.dropzone .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 .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none; }
.dropzone .dz-preview .dz-remove:hover {
text-decoration: underline; }
.dropzone .dz-preview:hover .dz-details {
opacity: 1; }
.dropzone .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 .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px; }
.dropzone .dz-preview .dz-details .dz-filename {
white-space: nowrap; }
.dropzone .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 .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis; }
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent; }
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px; }
.dropzone .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 .dz-preview .dz-image {
//border: 1px double grey;
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10; }
.dropzone .dz-preview .dz-image img {
display: block; }
.dropzone .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 .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 .dz-preview .dz-success-mark, .dropzone .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 .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px; }
.dropzone .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 .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 .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 .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 .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 .dz-preview.dz-error .dz-error-message {
display: block; }
.dropzone .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto; }
.dropzone .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: white; }
.dropzone .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; }

On your HTML just wrap the form element assigned to dropzone in a div like:
<div id="wrapper">
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone">
</form>
</div>
and then assign an image to your wrapper div on your css:
#wrapper{
background-image: url(dropText.png);
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 15em;
border: 2px dashed #ccc;
padding: 0px 0px;
margin: 20px auto;
opacity: 0.8;
}
#wrapper:hover{
-moz-transition: background-image 0.4s ease-in-out 1s;
-webkit-transition: background-image 0.4s ease-in-out 1s;
-ms-transition: background-image 0.4s ease-in-out 1s;
-o-transition: background-image 0.4s ease-in-out 1s;
background-image: url(uploadPic.png);
opacity: 1;
}
remember to change the form opacity too:
#my-awesome-dropzone{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}

Related

navbar help - flickering

My nav-bar benefits from a function that, once you scroll slightly, the navbar becomes smaller. I have also added a logo that changes on scroll. But during the logo change animation when you scroll UP the page, there is some really bothersome flickering. I believe it's an issue with my JS. Could you please have a look and tell me what you are experiencing? Thanks.
$(document).on("scroll", function() {
if ($(document).scrollTop() > 2) {
$('.miniBanner').addClass('show')
$('.logoBanner').addClass('hide')
$("header").addClass("shrink")
$("header").removeClass("grow")
} else {
$('.miniBanner').removeClass('show')
$('.logoBanner').removeClass('hide')
$("header").removeClass("shrink");
$("header").addClass("grow")
}
});
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
header {
width: 100%;
padding: 30px 0px;
/* revert to 50px 0px if we want the scroll animation */
/*animation magic*/
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: sticky;
margin: 0;
background-color: white;
box-shadow: 1px 1px 16px 2px red;
}
.shrink {
padding: 10px 0;
box-shadow: 1px 1px 16px 2px #0000a0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
}
.grow {
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.shrink .logoBanner {
width: 8vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.grow .logoBanner {
width: 100vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner {
display: none;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner.show {
display: flex;
transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
width: 5vw
}
.logoBanner.hide {
visibility: hidden;
opacity: 0;
display: none;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
list-style: none;
width: 90%;
padding: 0;
margin: 0;
}
a {
width: 80px;
display: block;
margin: 5px;
border-radius: 15px;
padding-top: 5px;
}
li {
justify-content: center;
text-align: center;
}
li a {
background-color: white;
text-decoration: none;
color: #0000a0;
}
.logo {
/* brand guidelines */
display: flex;
justify-content: flex-start;
margin-right: 70%;
justify-content: center;
align-items: center;
}
.logoBanner {
width: 250vw;
background-color: white
}
.page {
height: 200vh;
width: 100vw;
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
</script>
<body>
<header>
<ul>
<a href="#" class="logo">
<img class='logoBanner' src="https://2.bp.blogspot.com/_ORzF0-MDB50/TUI5aoTbDrI/AAAAAAAAEy0/kVSBqTuv1N0/s1600/bufforphington.jpg" alt="">
<img class='miniBanner' src="https://www.almanac.com/sites/default/files/users/AlmanacStaffArchive/hatching-raising-chicken-chicks_full_width.jpg" alt="">
</a>
<li>Portal</li>
<li>Feedback</li>
<li>Logout</li>
</ul>
</header>
<div class=page></div>
</body>

Hamburger menu sliding

I am trying to create a menu like the one on this website: http://sterling.it/en/
I want my menu to slide from the left to the right and then to also disappear sliding to the left. Below is the code that I have written so far but it is not working properly. The menu slides the first time but then never slides again. I would really appreciate it if anyone could help me. Thanks in advance!
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>
What is happening here is animate was not called in first condition and when you call it after completion of that animation you should remove and add the active class.
I have changed your code a little bit,
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$("#hamburgerMenu").animate({
width: "0",
opacity: "0" // We are reducing opacity as it looks good. :)
},
// This is the callback when the animate is completed.
{
complete: function() {
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
}
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200",
opacity: "1"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>01</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>02</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>03</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgereMenu-nav-link hamburgerMenu-menu" href="">
<span>04</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
Tell me if it works fine.
You are removing your active class too quickly thus setting opacity and visibilty to hide your menu. Adding an animation to the width and hiding the menu on the callback will reverse your appear-animation.
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").animate({
width: "0"
}, function() {
$("#hamburgerMenu").removeClass("active");
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>

Change hamburger icon

I'm trying to change my hamburger icon to go to X. What i want to create is the top and bottom lines to go to the middle and then to go X. This is my code so far:
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg) ;
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.icon.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg) ;
transform: rotate(-45deg);
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>
I really appreciate it if anyone would help me. Since I've been stuck in this for so long, it have been three or four days now. and i don't know what else to do!!
How about rotating your other line -45 deg?
EDIT: updated per your request via comments. This now uses keyframes. We say at 0% of the total time do nothing, then at 50% of the total time (1second of 2 total) bring the top and bottom line together in the middle.
Then at 100% of total time(at 2seconds)rotate our lines to make a X. You could also look into chaining animations but i find it kind of unreliable. this solution, takes your work and splits it into what you want to happen The forwards will keep the last frame of the animation, giving you the X look rather than repeating the animation over and over.
$(document).ready(function() {
$(".icon").click(function() {
$(".icon").toggleClass("active");
});
});
body {
margin: 0;
padding: 0;
background: #ff5c40;
}
.icon {
position: absolute;
top: 50%;
Left: 50%;
transform: transition(-50%, -50%);
width: 80px;
height: 80px;
}
.hamburger {
width: 50px;
height: 6px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 50px;
height: 6px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 16px;
}
.hamburger:before {
top: -16px;
}
.icon.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.icon.active .hamburger:before {
animation: makeXLeft 2s forwards;
}
.icon.active .hamburger:after {
animation: makeXRight 2s forwards;
}
/* Standard syntax */
#keyframes makeXLeft {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(45deg);}
}
/* Standard syntax */
#keyframes makeXRight {
0% {}
50% {top: 0px;transform: rotate(0deg);}
100% {top: 0px;transform: rotate(-45deg);}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="icon">
<div class="hamburger">
</div>
</div>

How can i improve my javascript? codepen included

I am using this code pen on my website for a menu button in mobile view: http://codepen.io/anon/pen/LNNaYp
Sometimes the button breaks when it is spam clicked ie. the 'X' state would appear when the menu is closed.
Anyway i want to know how i could improve my javascript because i know i could do it using jQuery, i've tried but failed.
HTML
<body>
<div class="showcase"><button type="button" role="button" aria-label="Toggle Navigation" id="buttonOne" class="lines-button x2">
<span class="lines"></span>
</button>
</div>
</body>
CSS
body {
background-color: #5DC1AF;
}
.showcase {
margin-top: 40px;
text-align: center;
}
.lines-button {
padding: 2rem 1rem;
transition: .3s;
cursor: pointer;
user-select: none;
border-radius: 0.57143rem;
}
/*.lines-button:hover {
opacity: 1;
}*/
.lines-button:active {
transition: 0;
}
.lines {
display: inline-block;
width: 4rem;
height: 0.37143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: relative;
}
.lines:before,
.lines:after {
display: inline-block;
width: 4rem;
height: 0.37143rem;
background: #ecf0f1;
border-radius: 0.28571rem;
transition: 0.3s;
position: absolute;
left: 0;
content: '';
-webkit-transform-origin: 0.28571rem center;
transform-origin: 0.28571rem center;
}
.lines:before {
top: 1rem;
}
.lines:after {
top: -1rem;
}
/*.lines-button:hover .lines:before {
top: 1.14286rem;
}
.lines-button:hover .lines:after {
top: -1.14286rem;
}*/
.lines-button.close {
-webkit-transform: scale3d(0.8, 0.8, 0.8);
transform: scale3d(0.8, 0.8, 0.8);
}
button {
display: inline-block;
margin: 0 1em;
border: none;
background: none;
}
button span {
display: block;
}
.lines-button.x2 .lines {
transition: background 0.3s 0.5s ease;
}
.lines-button.x2 .lines:before,
.lines-button.x2 .lines:after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: top 0.3s 0.6s ease, -webkit-transform 0.3s ease;
transition: top 0.3s 0.6s ease, transform 0.3s ease;
}
.lines-button.x2.close .lines {
transition: background 0.3s 0s ease;
background: transparent;
}
.lines-button.x2.close .lines:before,
.lines-button.x2.close .lines:after {
transition: top 0.3s ease, -webkit-transform 0.3s 0.5s ease;
transition: top 0.3s ease, transform 0.3s 0.5s ease;
top: 0;
width: 4rem;
}
.lines-button.x2.close .lines:before {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
}
.lines-button.x2.close .lines:after {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
}
button:focus {
outline: none !important;
}
JS
var anchor = document.querySelectorAll('button');
[].forEach.call(anchor, function(anchor) {
var open = false;
anchor.onclick = function(event) {
event.preventDefault();
if (!open) {
this.classList.add('close');
open = true;
} else {
this.classList.remove('close');
open = false;
}
}
});
View in JSFiddle
Use following jQuery code
$(document).ready(function() {
$("button").click(function() {
$(this).toggleClass("close");
});
});

Change css:hover effect to jquery.onclick()

I want to create a dropdown menu (for mobile: media queries are already working) but I want to change the :hover effect of my menu button (CSS) to jquery .onclick() function.
I know my code isn't far away of working but I am not beeing able to fix what's wrong.
Anyone could give me a tip?
Heres the Fiddle: http://jsfiddle.net/4G3gg/
HTML
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>
<li class="n1">Home</li>
<li class="n2">Portfolio</li>
<li class="n3">Services</li>
<li class="n4">About</li>
<li class="n5">Contacts</li>
</ul>
CSS
#mobile:hover{background-color: rgba(255, 255, 255, 0.15);}
a{text-decoration: none;color: white; padding: 10px 50px; font-weight: bold}
a:hover { color: #777; font-weight: bold;}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 50px;
height: 40px;
margin: 0 auto;
position: relative;
z-index: 100;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 30px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
}
.navigation:hover a.main {
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.04);
}
.navigation li {
width: 200px;
height: 40px;
background: #131313;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #131313; }
.navigation li:nth-child(odd) { background: #1c1c1c; }
.navigation li.n1 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n2 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n3 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n4 {
-webkit-transition:0.1s linear 0.1s;
-o-transition:0.1s linear 0.1s;
transition:0.1s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.navigation:hover .n4 {
transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
JQUERY/JS
$(".navigation").addClass("js");
$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function(){
$(".navigation").toggle();
});
Instead of the pseudo selector .navigation:hover use a new class like .navigation.open in css, then use .toggleClass() to toggle the menu visibility in the click() handler
jQuery(function ($) {
//$(".navigation").addClass("js");
//$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function () {
$(".navigation").toggleClass('open');
});
})
Demo: Fiddle
Note: In your fiddle, you forgot to add jQuery library

Categories