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