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

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

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.

Related

Copied button won't open

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.

How to to toggle a menu container when clicked on menu item

I am a beginner in JS.
I found a mobile menu on codepen but I need to edit it to make it right for what i need.
Basically, the mobile menu I need to create contains few links that have anchors and redirect users to sections in the page.
The codepen example I found doesn't close the menu once a link is clicked. I tried to modify the code myself but it doesn't work.
Here the link to the original codepen: https://codepen.io/Gatsby/pen/YdWGgW
And this is the version I did but not working.
(function () {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let all = document.querySelectorAll('.menu-item');
icon.onclick = function () {
header.classList.toggle('menu-open');
}
all.onclick = function () {
header.classList.toggle('menu-open');
}
}());
Any help would be greatly appreciated. Thank you.

You can do it this way :
Basically, you get all of the menu classes, and add an event listener on them to close the menu on each click on any of them
(function() {
let header = document.querySelector('.header');
let icon = document.querySelector('.icon-container');
let menu_item = document.getElementsByClassName('menu-item');
icon.onclick = function() {
header.classList.toggle('menu-open');
}
var close = function() {
header.classList.toggle('menu-open');
};
for (var i = 0; i < menu_item.length; i++) {
menu_item[i].addEventListener('click', close, false);
}
}());
#import url(https://fonts.googleapis.com/css?family=Nobile);
/* Just container/placeholder rulesets - remove once in production */
body {
font-family: "Nobile";
margin: 0 auto;
line-height: 1.5;
background: #e0e0e0;
}
.container {
background: #f0f0f0;
position: relative;
overflow: hidden;
width: 375px;
height: 600px;
margin: 50px auto 0;
box-shadow: 0 0 50px 10px #aaa;
}
.container .header {
position: absolute;
display: block;
top: 0;
left: 0;
}
.content {
padding: 40px 5% 20px;
text-align: justify;
max-height: 100%;
color: #333;
overflow-y: scroll;
}
.content img {
width: 100%;
position: relative;
display: block;
margin: 40px auto 30px;
}
#media (max-width: 480px) {
.container {
margin: 0 auto;
width: 100%;
height: 100%;
box-shadow: none;
}
.container .header {
position: fixed;
}
.content {
overflow-y: hidden;
}
}
/* End container/placeholder */
/* Menu Header */
.header {
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
height: 55px;
width: 100%;
z-index: 1;
position: fixed;
transition: all 0.4s ease-out, background 1s ease-out;
}
.header.menu-open {
height: 100%;
background: #111;
transition: all 0.45s ease-out, background 0.8s ease-out;
}
/* Menu List items */
.mobile-menu {
clear: both;
}
.header ul.menu {
position: relative;
display: block;
padding: 0px 40px 0;
list-style: none;
}
.header ul.menu li.menu-item a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
font-size: 18px;
line-height: 2.8;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
.header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.header ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.35s;
}
.header ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.3s;
}
.header ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.25s;
}
.header ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.15s;
}
.header ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.1s;
}
.header ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item {
opacity: 1;
}
.header.menu-open ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.05s;
}
.header.menu-open ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.1s;
}
.header.menu-open ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.15s;
}
.header.menu-open ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.header.menu-open ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.25s;
}
.header.menu-open ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.3s;
}
.header.menu-open ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.35s;
}
/* Menu Icon */
.icon-container {
position: relative;
display: inline-block;
z-index: 2;
float: right;
/* Simply change property to float left to switch icon side :) */
height: 55px;
width: 55px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.icon-container #menuicon {
width: 20px;
height: 10px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
#menuicon .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
#menuicon .bar.bar1 {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
#menuicon .bar.bar2 {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.menu-open .icon-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.menu-open .icon-container #menuicon .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.1s;
}
.menu-open .icon-container #menuicon .bar.bar1 {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.menu-open .icon-container #menuicon .bar.bar2 {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
<div class="container">
<div class="header">
<div class="icon-container">
<div id="menuicon">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
</div>
</div>
<div class="mobile-menu">
<ul class="menu">
<li class="menu-item">Mac
</li>
<li class="menu-item">iPad
</li>
<li class="menu-item">iPhone
</li>
<li class="menu-item">Watch
</li>
<li class="menu-item">TV
</li>
<li class="menu-item">Music
</li>
<li class="menu-item">Support
</li>
</ul>
</div>
</div>
<div class="content">
<img src="https://images.apple.com/v/iphone/home/y/images/overview/hero-iphone-xr_large.jpg" alt="" />
<p>“With so many trees in the city, you could see the spring coming each day until a night of warm wind would bring it suddenly in one morning. Sometimes the heavy cold rains would beat it back so that it would seem that it would never come and that
you were losing a season out of your life. This was the only truly sad time in Paris because it was unnatural. You expected to be sad in the fall. Part of you died each year when the leaves fell from the trees and their branches were bare against
the wind and the cold, wintry light."</p>
<p><em>- Ernest Hemingway, A Moveable Feast</em></p>
<img src="https://images.apple.com/v/iphone/home/y/images/overview/film_large.jpg" alt="" />
<p>"On under the heavy trees of the small town that are a part of your heart if it is your town and you have walked under them, but that are only too heavy, that shut out the sun and dampen the houses for a stranger; out past the last house and on to
the highway that rose and fell straight away ahead with banks of red dirt sliced cleanly away and the second growth timber on both sides. It was not his country but it was the middle of fall and all of this country was good to drive through and
to see. "</p>
<p><em>- Ernest Hemingway, "Fathers and Sons"</em></p>
</div>
</div>
Here I am using document.getElementsByClassName but you could also use document.querySelectorAll which is more useful if you want to use more complex selectors

Prevent scroll when open menu

I would like to use the apple style mobile menu on non-mobile larger screens.
The menu is part of several elements visible in the body and it does not cover the entire screen.
Is it possible to prevent scrolling when the menu is opened?
I know I could do that with
position: fixed;
overflow: hidden;
but not sure where to place them.
Michelle.
(function(){
var burger = document.querySelector('.burger-container'),
header = document.querySelector('.header');
burger.onclick = function() {
header.classList.toggle('menu-opened');
}
}());
#import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);
body {
margin: 0;
line-height: 1.4;
}
.window {
position: relative;
display: block;
width: 50%;
height: 567px;
float: left;
margin: 20px;
-webkit-box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 3px;
}
.window .header {
position: absolute;
display: block;
top: 0;
left: 0;
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s ease-out, background 1s ease-out;
transition: all 0.5s ease-out, background 1s ease-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 1;
}
.window .header .burger-container {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.window .header .burger-container #burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.window .header .burger-container #burger .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #FFF;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.window .header .burger-container #burger .bar.topBar {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
.window .header .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.window .header .icon {
display: inline-block;
position: absolute;
height: 100%;
line-height: 50px;
width: 50px;
height: 50px;
text-align: center;
color: #FFF;
font-size: 22px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.window .header .icon.icon-bag {
right: 0;
top: 0;
left: auto;
-webkit-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.65s;
transition-delay: 0.65s;
}
.window .header ul.menu {
position: relative;
display: block;
padding: 0px 48px 0;
list-style: none;
}
.window .header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
-webkit-transform: scale(1.15) translateY(-30px);
transform: scale(1.15) translateY(-30px);
opacity: 0;
-webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.window .header ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.window .header ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.window .header ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.window .header ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.window .header ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.window .header ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.window .header ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s;
}
.window .header ul.menu li.menu-item a {
display: block;
position: relative;
color: #FFF;
font-family: "Ek Mukta", sans-serif;
font-weight: 100;
text-decoration: none;
font-size: 22px;
line-height: 2.35;
font-weight: 200;
width: 100%;
}
.window .header.menu-opened {
height: 100%;
background-color: #000;
-webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
transition: all 0.3s ease-in, background 0.5s ease-in;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.window .header.menu-opened .burger-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.window .header.menu-opened .burger-container #burger .bar {
-webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.window .header.menu-opened .burger-container #burger .bar.topBar {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.window .header.menu-opened .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
.window .header.menu-opened ul.menu li.menu-item {
-webkit-transform: scale(1) translateY(0px);
transform: scale(1) translateY(0px);
opacity: 1;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.27s;
transition-delay: 0.27s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.34s;
transition-delay: 0.34s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.41s;
transition-delay: 0.41s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.62s;
transition-delay: 0.62s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.69s;
transition-delay: 0.69s;
}
.window .header.menu-opened .icon.icon-bag {
-webkit-transform: translateX(75px);
transform: translateX(75px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.window .content {
font-family: "Ek Mukta", sans-serif;
padding: 67px 4% 0;
text-align: justify;
overflow: scroll;
max-height: 100%;
}
.window .content::-webkit-scrollbar {
display: none;
}
.window .content h2 {
margin-bottom: 0px;
letter-spacing: 1px;
}
.window .content img {
width: 95%;
position: relative;
display: block;
margin: 75px auto 75px;
}
.window .content img:nth-of-type(2) {
margin: 75px auto;
}
.outside-text {
width: 40%;
display: inline-block;
}
.outside-text p {
margin: 40px;
}
<div class="window">
<div class="header">
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<div class="icon icon-apple"></div>
<ul class="menu">
<li class="menu-item">Mac</li>
<li class="menu-item">iPad</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">Watch</li>
<li class="menu-item">TV</li>
<li class="menu-item">Music</li>
<li class="menu-item">Support</li>
</ul>
<div class="shop icon icon-bag"></div>
</div>
<div class="content"> <img src="https://images.apple.com/v/ipad-air-2/c/images/overview/performance_large.png" alt=""/>
</div>
</div>
<div class="outside-text">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>

I generally recommend javascript based solution instead of regular body overflow: hidden fix as page won't jump to the top when you open the menu somewhere in the middle of the page
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
var preventKeys = {
37: 1, 38: 1, 39: 1, 40: 1
};
function preventDefaultForScrollKeys(e) {
if (preventKeys[e.keyCode]) {
preventDefault(e);
return false;
}
}
function disableScroll() {
var target = $('.page').get(0)
if (window.addEventListener) // older FF
target.addEventListener('DOMMouseScroll', preventDefault, false);
target.onwheel = preventDefault; // modern standard
target.onmousewheel = target.onmousewheel = preventDefault; // older browsers, IE
target.ontouchmove = preventDefault; // mobile
target.onkeydown = preventDefaultForScrollKeys;
}
function enableScroll() {
var target = $('.page').get(0)
if (window.removeEventListener)
target.removeEventListener('DOMMouseScroll', preventDefault, false);
target.onmousewheel = target.onmousewheel = null;
target.onwheel = null;
target.ontouchmove = null;
target.onkeydown = null;
}
The original idea is not mine, I found this on Stackoverflow long time ago and take this part from project to project. Unfortunately, I can't credit an author. Please let me know the topic in comments below if you know one
To keep overflow scrolling on the menu (if the height is greater than 100vh) you should make menu outside target disableScroll() / enableScroll() functions
i.e.
<body>
<div class="menu> .. menu .. </div>
<div class="page"> .. site content .. </div>
</body>

Not quiet sure if this is what you actually want. The following code prevent scrolling if the menu is opend!
if(header.getAttribute("class").indexOf("menu-opened") > -1)
alert("opend"); // opend
else
alert("closed"); // closed
Check if class contains menu-opened.
EDIT: As Sergey Khmelevskoy mentioned in his answere it is very usefull if you scroll to top once the menu is open.
(function(){
var body = document.getElementsByTagName("body")[0],
burger = document.querySelector('.burger-container'),
header = document.querySelector('.header');
burger.onclick = function() {
header.classList.toggle('menu-opened');
if(header.getAttribute("class").indexOf("menu-opened") > -1){
body.classList.add("overflow_hidden");
window.scrollTo(0, 0); // scroll to the top of the page
}
else
body .classList.remove("overflow_hidden");
}
}());
#import url(https://fonts.googleapis.com/css?family=Ek+Mukta:200);
body {
margin: 0;
line-height: 1.4;
}
.overflow_hidden {
overflow-y: hidden !important;
}
.window {
position: relative;
display: block;
width: 50%;
height: 567px;
float: left;
margin: 20px;
-webkit-box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 65px 0px rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 3px;
}
.window .header {
position: absolute;
display: block;
top: 0;
left: 0;
height: 50px;
width: 100%;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s ease-out, background 1s ease-out;
transition: all 0.5s ease-out, background 1s ease-out;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
z-index: 1;
}
.window .header .burger-container {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.window .header .burger-container #burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.window .header .burger-container #burger .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #FFF;
-webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.window .header .burger-container #burger .bar.topBar {
-webkit-transform: translateY(0px) rotate(0deg);
transform: translateY(0px) rotate(0deg);
}
.window .header .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.window .header .icon {
display: inline-block;
position: absolute;
height: 100%;
line-height: 50px;
width: 50px;
height: 50px;
text-align: center;
color: #FFF;
font-size: 22px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.window .header .icon.icon-bag {
right: 0;
top: 0;
left: auto;
-webkit-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.65s;
transition-delay: 0.65s;
}
.window .header ul.menu {
position: relative;
display: block;
padding: 0px 48px 0;
list-style: none;
}
.window .header ul.menu li.menu-item {
border-bottom: 1px solid #333;
margin-top: 5px;
-webkit-transform: scale(1.15) translateY(-30px);
transform: scale(1.15) translateY(-30px);
opacity: 0;
-webkit-transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.window .header ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.49s;
transition-delay: 0.49s;
}
.window .header ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.42s;
transition-delay: 0.42s;
}
.window .header ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.window .header ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.28s;
transition-delay: 0.28s;
}
.window .header ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.21s;
transition-delay: 0.21s;
}
.window .header ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.14s;
transition-delay: 0.14s;
}
.window .header ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.07s;
transition-delay: 0.07s;
}
.window .header ul.menu li.menu-item a {
display: block;
position: relative;
color: #FFF;
font-family: "Ek Mukta", sans-serif;
font-weight: 100;
text-decoration: none;
font-size: 22px;
line-height: 2.35;
font-weight: 200;
width: 100%;
}
.window .header.menu-opened {
height: 100%;
background-color: #000;
-webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
transition: all 0.3s ease-in, background 0.5s ease-in;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.window .header.menu-opened .burger-container {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.window .header.menu-opened .burger-container #burger .bar {
-webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.window .header.menu-opened .burger-container #burger .bar.topBar {
-webkit-transform: translateY(4px) rotate(45deg);
transform: translateY(4px) rotate(45deg);
}
.window .header.menu-opened .burger-container #burger .bar.btmBar {
-webkit-transform: translateY(3px) rotate(-45deg);
transform: translateY(3px) rotate(-45deg);
}
.window .header.menu-opened ul.menu li.menu-item {
-webkit-transform: scale(1) translateY(0px);
transform: scale(1) translateY(0px);
opacity: 1;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(1) {
-webkit-transition-delay: 0.27s;
transition-delay: 0.27s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(2) {
-webkit-transition-delay: 0.34s;
transition-delay: 0.34s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(3) {
-webkit-transition-delay: 0.41s;
transition-delay: 0.41s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(4) {
-webkit-transition-delay: 0.48s;
transition-delay: 0.48s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(5) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(6) {
-webkit-transition-delay: 0.62s;
transition-delay: 0.62s;
}
.window .header.menu-opened ul.menu li.menu-item:nth-child(7) {
-webkit-transition-delay: 0.69s;
transition-delay: 0.69s;
}
.window .header.menu-opened .icon.icon-bag {
-webkit-transform: translateX(75px);
transform: translateX(75px);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.window .content {
font-family: "Ek Mukta", sans-serif;
padding: 67px 4% 0;
text-align: justify;
overflow: scroll;
max-height: 100%;
}
.window .content::-webkit-scrollbar {
display: none;
}
.window .content h2 {
margin-bottom: 0px;
letter-spacing: 1px;
}
.window .content img {
width: 95%;
position: relative;
display: block;
margin: 75px auto 75px;
}
.window .content img:nth-of-type(2) {
margin: 75px auto;
}
.outside-text {
width: 40%;
display: inline-block;
}
.outside-text p {
margin: 40px;
}
<div class="window">
<div class="header">
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<div class="icon icon-apple"></div>
<ul class="menu">
<li class="menu-item">Mac</li>
<li class="menu-item">iPad</li>
<li class="menu-item">iPhone</li>
<li class="menu-item">Watch</li>
<li class="menu-item">TV</li>
<li class="menu-item">Music</li>
<li class="menu-item">Support</li>
</ul>
<div class="shop icon icon-bag"></div>
</div>
<div class="content"> <img src="https://images.apple.com/v/ipad-air-2/c/images/overview/performance_large.png" alt=""/>
</div>
</div>
<div class="outside-text">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>

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

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

We Keep Coding

JavaScript is the programming language of the Web.

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

Related

Copied button won't open

How to to toggle a menu container when clicked on menu item

Prevent scroll when open menu

How to use jquery function in a tag

How can i improve my javascript? codepen included

Categories

Resources