Copied button won't open - javascript

On my site http://the-stone-quest.000webhostapp.com/test/test1.html you can see that the left button works perfectly and I wanted to have more than one on those buttons so I thought that you could just copy the code and use the same script, but the copied version never works and I don't understand why. If you go to the page you would understand what I mean. How do I get the other button to work?
Here the left one doesn't work either but it does on my site.
var formContainer = $('#form-container');
bindFormClick();
//Opening the form
function bindFormClick() {
$(formContainer).on('click', function(e) {
e.preventDefault();
toggleForm();
//Ensure container doesn't togleForm when open
$(this).off();
});
}
//Closing the form
$('#form-close, .form-overlay').click(function(e) {
e.stopPropagation();
e.preventDefault();
toggleForm();
bindFormClick();
});
function toggleForm() {
$(formContainer).toggleClass('expand');
$(formContainer).children().toggleClass('expand');
$('body').toggleClass('show-form-overlay');
$('.form-submitted').removeClass('form-submitted');
}
//Form validation
$('form').submit(function() {
var form = $(this);
form.find('.form-error').removeClass('form-error');
var formError = false;
form.find('.input').each(function() {
if ($(this).val() == '') {
$(this).addClass('form-error');
$(this).select();
formError = true;
return false;
} else if ($(this).hasClass('email') && !isValidEmail($(this).val())) {
$(this).addClass('form-error');
$(this).select();
formError = true;
return false;
}
});
if (!formError) {
$('body').addClass('form-submitted');
$('#form-head').addClass('form-submitted');
setTimeout(function() {
$(form).trigger("reset");
}, 1000);
}
return false;
});
function isValidEmail(email) {
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")#(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
return pattern.test(email);
};
social("twitter/joeharry__", "codepen/woodwork",
"disco");
body {
font-family: Roboto, sans-serif;
width: 100%;
font-size: 16px;
margin: 0;
padding: 0;
}
h1,
h2 {
font-weight: 700;
color: #FFF;
font-weight: 700;
font-size: 4em;
margin: 0;
padding: 0 20px;
}
.form-overlay {
width: 0%;
height: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 0;
background: #000;
transition: background 1s, opacity 0.4s, width 0s 0.4s;
}
.show-form-overlay .form-overlay {
width: 100%;
opacity: 0.7;
z-index: 999;
transition: background 1s, opacity 0.4s, width 0s;
}
.show-form-overlay.form-submitted .form-overlay {
background: #119DA4;
transition: background 0.6s;
}
#form-container {
cursor: pointer;
color: #FFF;
z-index: 1000;
position: sticky;
margin: 0 auto;
left: 0;
right: 0;
bottom: 5vh;
background-color: #f72f4e;
overflow: hidden;
border-radius: 50%;
width: 60px;
max-width: 60px;
height: 60px;
text-align: center;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.2s 0.45s, height 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s, width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.35s;
}
#form-container.expand {
cursor: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.17);
border-radius: 0;
width: 70%;
height: 350px;
max-width: 610px;
padding: 0;
transition: all 0.2s, max-width 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, height 0.3s ease 0.25s;
}
#form-close {
cursor: pointer;
}
.icon::before {
cursor: pointer;
font-size: 30px;
line-height: 60px;
display: block;
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.icon:hover::before {
-webkit-animation: wiggle 0.1s linear infinite;
animation: wiggle 0.1s linear infinite;
}
.fa-pencil::before {
display: block;
}
.fa-close::before {
display: none;
}
.expand.fa-pencil::before {
display: none;
}
.expand.fa-close::before {
display: block;
-webkit-animation: none;
animation: none;
}
#form-content {
font-family: Roboto, sans-serif;
-webkit-transform: translateY(150%);
transform: translateY(150%);
width: 100%;
opacity: 0;
text-align: left;
transition: opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s 0.2s, -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
#form-content.expand {
-webkit-transform: translateY(0px);
transform: translateY(0px);
opacity: 1;
transition: opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s, opacity 0s, -webkit-transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
#form-content form {
color: #FFF;
width: 100%;
height: 100%;
padding: 0 20px 20px 20px;
margin-bottom: 10px;
box-sizing: border-box;
text-align: left;
}
#form-head {
font-size: 100%;
padding: 0;
margin: 0 20px;
color: #FFF;
text-align: center;
transition: all 0.8s 0.6s;
}
#form-head h1,
#form-head p {
padding: 0;
margin: 5;
}
#form-head .pre {
display: block;
}
#form-head .post {
display: none;
}
.form-submitted#form-head {
-webkit-transform: translateY(250%);
transform: translateY(250%);
}
.form-submitted#form-head .pre {
display: none;
}
.form-submitted#form-head .post {
display: block;
}
.input {
background: rgba(0, 0, 0, 0.2);
display: block;
height: 50px;
width: 100%;
margin: 10px 0;
padding: 0 10px;
border-width: 0;
box-sizing: border-box;
border: none;
outline: none;
box-shadow: none;
-webkit-transform: translateX(0);
transform: translateX(0);
}
::-webkit-input-placeholder {
/* Safari, Chrome and Opera */
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Firefox 18- */
:-moz-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Firefox 19+ */
::-moz-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* IE 10+ */
:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Edge */
::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
/* Default */
:placeholder-shown {
color: rgba(255, 255, 255, 0.8);
font-size: 90%;
}
input,
select,
textarea {
color: #FFF;
}
.input.message {
resize: none;
height: 150px;
padding: 10px;
}
.input.submit {
background-color: #FFF;
color: #f72f4e;
font-size: 120%;
height: 80px;
box-shadow: 0 5px rgba(0, 0, 0, 0.5);
transition: all 0.1s, -webkit-transform 0s 0.6s;
transition: all 0.1s, transform 0s 0.6s;
transition: all 0.1s, transform 0s 0.6s, -webkit-transform 0s 0.6s;
}
.input.submit:active {
margin-top: 15px;
box-shadow: 0 0 rgba(0, 0, 0, 0.5);
}
.input.form-error {
-webkit-animation: error 0.8s ease;
animation: error 0.8s ease;
background: rgba(0, 0, 0, 0.7);
}
select option {
background: #f72f4e;
color: #FFF;
border: none;
box-shadow: none;
outline: none;
}
select option:disabled {
font-style: italic;
color: rgba(255, 255, 255, 0.9);
font-size: 90%;
}
.input {
transition: -webkit-transform 0s 1s;
transition: transform 0s 1s;
transition: transform 0s 1s, -webkit-transform 0s 1s;
}
.form-submitted .input {
-webkit-transform: translateX(150%);
transform: translateX(150%);
opacity: 0;
transition: all 0.5s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
transition: all 0.5s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s, -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.form-submitted .input:nth-child(1) {
transition-delay: 0.1s;
}
.form-submitted .input:nth-child(2) {
transition-delay: 0.2s;
}
.form-submitted .input:nth-child(3) {
transition-delay: 0.3s;
}
.form-submitted .input:nth-child(4) {
transition-delay: 0.4s;
}
.form-submitted .input:nth-child(5) {
transition-delay: 0.5s;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px #FFF inset;
}
#media (max-width: 600px) {
#form-container.expand {
height: 100%;
width: 100%;
max-width: 100%;
overflow: initial;
overflow-x: hidden;
bottom: 0;
}
h1 {
font-size: 300%;
}
.icon:hover::before {
-webkit-animation: none;
animation: none;
}
.form-overlay {
display: none;
transition: none;
}
}
#-webkit-keyframes error {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
}
#keyframes error {
0%,
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
20%,
40%,
60%,
80% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
}
#-webkit-keyframes wiggle {
0%,
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
50% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
#keyframes wiggle {
0%,
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
50% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
}
<html lang="en" class="gr__the-stone-quest_000webhostapp_com">
<head>
<meta charset="UTF-8">
<title>Expanding Contact Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-gr-c-s-loaded="true" class="">
<div class="form-overlay"></div>
<div class="icon fa fa-pencil" id="form-container">
<span class="icon fa fa-close" id="form-close"></span>
<div id="form-content" class="">
<div id="form-head">
<h1 class="pre">Chapter 1</h1>
<p class="pre">ENTER CHECKPOINT PASSWORD . . . </p>
</div>
<form>
<label for="pswd"></label>
<input class="input name" type="password" placeholder="Checkpoint Passcode" id="pswd">
<input class="input submit" type="button" value="Enter Chapter 1" onclick="checkPswd();">
<center>
<p id="span" class="pre form-error"></p>
</center>
</form>
</div>
</div>
<div class="icon fa fa-pencil" id="form-container">
<span class="icon fa fa-close" id="form-close"></span>
<div id="form-content" class="">
<div id="form-head">
<h1 class="pre">Chapter 1</h1>
<p class="pre">ENTER CHECKPOINT PASSWORD . . . </p>
</div>
<form>
<label for="pswd"></label>
<input class="input name" type="password" placeholder="Checkpoint Passcode" id="pswd2">
<input class="input submit" type="button" value="Enter Chapter 1" onclick="checkPswd();">
<center>
<p id="span" class="pre form-error"></p>
</center>
</form>
</div>
</div>
<script type="text/javascript">
function checkPswd() {
var confirmPassword = "pus";
var password = document.getElementById("pswd").value;
if (password == confirmPassword) {
window.location = "form.html";
} else {
document.getElementById("span").textContent = "Invalid Passcode";
}
}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

You didn't provide any code. I still went digging and took a look. Your problem is that you have two divs with the same ID.
<div class="icon fa fa-pencil" id="form-container">
<div class="icon fa fa-pencil" id="form-container">
I changed the 2nd one to id="form-container2" and then I changed var formContainer to look at the new ID and it worked as intended.
<div class="icon fa fa-pencil" id="form-container">
<div class="icon fa fa-pencil" id="form-container2">
var formContainer = $('#form-container2');
So your JS functions are confused because you have more than 1 element with the same ID is what it comes down to.

Related

How to use jquery function in a tag

I am trying to use some functionality like a sidepanel to open but using an <a> tag.
Could you please help me, below is the code related to it.
HTML
Click Me
jQuery
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();
}
});
});
I want to make use of the above jQuery and use it in my <a> tag.
Attach the click event to body and delegate to cd-btn. Adding event handler to element directly doesn't handle dynamic elements. The element cd-btn is in your pop-up. The pop-up HTML is dynamically injected, so when you attach the event the HTML is probably not present. But you can easily add the handler to body and delegate it like:
$('body').on('click', '.cd-btn',function(event) {
event.preventDefault();
$('.cd-panel').addClass('is-visible');
});
jQuery(function($) {
//open the lateral panel
$('body').on('click', '.cd-btn',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();
}
});
});
$(function() {
$("#popover-a").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
trigger: 'click hover',
delay: {
show: 50,
hide: 3500
},
content: function() {
return $('#popover-content-b').html();
}
});
});
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden {
display: 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-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;
}
.cd-panel-header {
position: fixed;
height: 27px;
background-color: transparent;
z-index: 2;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: top 0.3s 0s;
-moz-transition: top 0.3s 0s;
transition: top 0.3s 0s;
}
.from-right .cd-panel-header,
.from-left .cd-panel-header {
top: -50px;
}
.from-right .cd-panel-header {
right: 0;
}
.from-left .cd-panel-header {
left: 0;
}
.is-visible .cd-panel-header {
top: 0;
-webkit-transition: top 0.3s 0.3s;
-moz-transition: top 0.3s 0.3s;
transition: top 0.3s 0.3s;
}
.cd-panel-container {
position: fixed;
height: 100%;
top: 0;
background: #fafafa;
border-left: 1px solid #c8cacc;
z-index: 1;
width: 70%;
-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;
-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: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me
</p>
</div>
</div>
</div>
<div class="cd-panel from-right">
<header class="cd-panel-header">
Close
</header>
<div class="cd-panel-container">
CD PANEL
</div>
<!-- cd-paneCD PANELl-container -->
</div>
<!-- cd-panel -->

facebook reaction buttons / javascript gets called only once in PHP loop

I'm trying integrate facebook animated reaction emoji's to my website and suprised that there are not many sources about it. Actually I'm almost done. I found nice script and modified it in parts to my purpose and happy to share it with you. But it only works in the way I want for one post. There is a problem when the page has multiple posts that can be liked. I ve found that javascript doesnt gets called more than one times inside php loop and dont know why. I both tried to keep javascript externally and internally. Didnt work. Here is my code. For demo purpose I have added some php lines inside html section in snippet. Any ideas?
'use strict';
(function() {
var likeLink = document.querySelector('.Like__link');
likeLink.addEventListener('mouseenter', function() {
likeLink.classList.remove('js-hover');
});
likeLink.classList.remove('js-hover');
}());
.Like {
position: relative;
display: inline-block;
margin-top: 5rem;
}
.Like__link {
cursor: pointer;
}
.Emojis {
position: absolute;
left: 0;
bottom: 120%;
-webkit-transform: translate3d(-10%, 0, 0);
transform: translate3d(-10%, 0, 0);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: .125rem;
border-radius: 100rem;
-webkit-transition: .3s .3s;
transition: .3s .3s;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.15);
opacity: 0;
visibility: hidden;
}
.Emojis:hover,
.Like__link.js-hover ~ .Emojis,
.Like__link:hover ~ .Emojis {
-webkit-transition-delay: 0s;
transition-delay: 0s;
opacity: 1;
visibility: visible;
}
.Emoji {
position: relative;
width: 3rem;
height: 3rem;
color: #ffd972;
cursor: pointer;
-webkit-transition-delay: .6s, .3s;
transition-delay: .6s, .3s;
-webkit-transition-duration: 0s, .3s;
transition-duration: 0s, .3s;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0) scale(0.3);
transform: translate3d(0, 100%, 0) scale(0.3);
}
.Emojis:hover .Emoji,
.Like__link.js-hover + .Emojis .Emoji,
.Like__link:hover + .Emojis .Emoji {
-webkit-transform: none;
transform: none;
opacity: 1;
}
.Emoji .icon {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: -webkit-transform .2s ease;
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease;
}
.Emoji:hover .icon {
-webkit-transform: scale(1) translate3d(0, -10%, 0);
transform: scale(1) translate3d(0, -10%, 0);
}
.Emojis:hover .Emoji:nth-of-type(1),
.Like__link:hover + .Emojis .Emoji:nth-of-type(1) {
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1);
}
.Emojis:hover .Emoji:nth-of-type(2),
.Like__link:hover + .Emojis .Emoji:nth-of-type(2) {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.02s;
transition-delay: 0.02s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.2);
}
.Emojis:hover .Emoji:nth-of-type(3),
.Like__link:hover + .Emojis .Emoji:nth-of-type(3) {
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-delay: 0.04s;
transition-delay: 0.04s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.4);
}
.Emojis:hover .Emoji:nth-of-type(4),
.Like__link:hover + .Emojis .Emoji:nth-of-type(4) {
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-delay: 0.06s;
transition-delay: 0.06s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.6);
}
.Emojis:hover .Emoji:nth-of-type(5),
.Like__link:hover + .Emojis .Emoji:nth-of-type(5) {
-webkit-transition-duration: 0.6s;
transition-duration: 0.6s;
-webkit-transition-delay: 0.08s;
transition-delay: 0.08s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 1.8);
}
.Emojis:hover .Emoji:nth-of-type(6),
.Like__link:hover + .Emojis .Emoji:nth-of-type(6) {
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
transition-timing-function: cubic-bezier(0.6, 0.6, 0.5, 2);
}
.Emoji--like {
/* color: $c-blue; */
}
.Emoji--love {
/* color: $c-red; */
}
.icon {
background-image: url("https://media.giphy.com/media/xT9DPr2QnsfTFoykFO/giphy.gif");
background-repeat: no-repeat;
}
.icon--like {
background-position: -6px -6px;
}
.icon--heart {
background-position: -68px -4px;
}
.icon--haha {
background-position: -129px -6px;
}
.icon--wow {
background-position: -191px -6px;
}
.icon--sad {
background-position: -252px -5px;
}
.icon--angry {
background-position: -314px -6px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
background-color: #fff;
color: #222;
text-align: center;
}
.intro {
width: 80%;
max-width: 30rem;
padding-bottom: 1rem;
margin: 0 auto 1em;
padding-top: .5em;
text-transform: capitalize;
border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
}
.intro small {
display: block;
opacity: .5;
font-style: italic;
text-transform: none;
}
.info {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 1em;
font-size: .9em;
font-style: italic;
font-family: serif;
text-align: right;
opacity: .5;
}
.info a {
color: inherit;
}
kbd {
display: inline-block;
background-color: rgba(0, 0, 0, 0.05);
color: #666;
text-shadow: 1px 1px #fff;
padding: 1px 4px;
border-radius: 2px;
box-shadow: inset 1px 1px 3px -1px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<?php //queries here. $entries=... foreach ($entries as $item) { ?>
<!-- beginning of foreach loop-->
<script>
// in normal this block is activeve to prevent initial appear but commented now.
// var likeLink = document.querySelector('.Like__link'); likeLink.classList.remove('js-hover');
</script>
<div class="box">
<div class="Like"><a class="Like__link js-hover">Like <kbd>hover me!!</kbd></a>
<div class="Emojis">
<div class="Emoji Emoji--like">
<div class="icon icon--like"></div>
</div>
<div class="Emoji Emoji--love">
<div class="icon icon--heart"></div>
</div>
<div class="Emoji Emoji--haha">
<div class="icon icon--haha"></div>
</div>
<div class="Emoji Emoji--wow">
<div class="icon icon--wow"></div>
</div>
<div class="Emoji Emoji--sad">
<div class="icon icon--sad"></div>
</div>
<div class="Emoji Emoji--angry">
<div class="icon icon--angry"></div>
</div>
<script>
// in normal Im putting the javascript here. and it gets called only one for some raeson.
</script>
</div>
</div>
</div>
<?php } ?>
<!-- end of foreach loop-->
</body>
</html>
reference of the code
You should not insert Javascript functions inside a PHP while fetch loop.
The effect is to output your functions as many time as you have rows.
So something like this will obviously not work:
<script>
function something(){
// code
}
</script>
<!-- some HTML for row[0]-->
<script>
function something(){
// code
}
</script>
<!-- some HTML for row[1]-->
<script>
function something(){
// code
}
</script>
<!-- some HTML for row[2]-->
<!-- and so on... -->
You should see right away that the function something() is defined more than one time...
And this is bad.
I think that THIS IS the problem you're facing.

Display Image Uploaded Area in Dropzone

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;
}

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");
});
});

Javascript, How do i adjust this js dropdown menu

I want to have the dropdown menu to close when i click outside it and the arrow turns grey after i clicked on it once , I want it to be same color all the time (black).
http://codepen.io/anon/pen/YXMaGJ
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();
}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();
}
};
})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
Here I am posting complete html file with your snippets of code you just need to set up it locally and run it in browser..
check below code
<html>
<head>
<style type="text/css" rel="stylesheet">
.drop_container {
position:absolute;
right:25px;
width: 150px;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.drop_container > ul {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
display: block;
position: relative;
font-family: 'Open Sans', sans-serif;
padding: 10px 10px;
margin: 0;
outline: 0;
font-size: 1em;
text-decoration: none;
white-space: nowrap;
word-wrap: normal;
vertical-align: middle;
cursor: pointer;
border-radius: 2px;
}
.dropdown [data-toggle="dropdown"] {
color: black;
}
.dropdown [data-toggle="dropdown"]:hover {
}
.dropdown .icon-arrow {
position: absolute;
display: block;
font-size: 0.6em;
color: black;
top: 14px;
right: 60px;
}
.dropdown .icon-arrow.open {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
}
.dropdown .icon-arrow.close {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
-o-transition: -o-transform 0.4s;
transition: transform 0.4s;
}
.dropdown .icon-arrow:before {
content: '\25BC';
}
.dropdown .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.dropdown .dropdown-menu li {
padding: 0;
}
.dropdown .dropdown-menu li a {
display: block;
color: #6e6e6e;
background: #eeeeee;
-webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
-moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
padding: 10px 10px;
}
.dropdown .dropdown-menu li a:hover {
background: #f6f6f6;
}
.dropdown .show, .dropdown .hide {
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.dropdown .show {
display: block;
max-height: 9999px;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.dropdown .hide {
max-height: 0;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-webkit-transition: max-height 0.6s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
body {
width:100%;
height:100%;
}
</style>
<script src=" http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').click(function(){
if($('.dropdown-menu').hasClass('show')){
$('.dropdown-menu').addClass('hide').removeClass('show');
$('i.icon-arrow').addClass('close').removeClass('open');
}
});
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
event.stopPropagation();
if($('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').addClass('hide').removeClass('show');
$('i.icon-arrow').addClass('close').removeClass('open');
}
else {
$('.dropdown-menu').addClass('show').removeClass('hide');
$('i.icon-arrow').addClass('open').removeClass('close');
}
};
});
});
</script>
</head>
<body>
<div class="drop_container">
<ul>
<li class="dropdown">
Hi<i class="icon-arrow"></i>
<ul class="dropdown-menu">
<li>Summary</li>
<li>Purchase History</li>
<li>User Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

Categories