We Keep Coding

JavaScript Code not running on a Live Sever nor Local Host

I have looked for this solution for days on end and I could not find the answer to why Javascript is not running correctly on the live server extension or local file host. I use Visual Studio Code and I am currently creating a webpage and trying to add JavaScript animations on it. However, its gotten to a point where I decided to copy other people's JS animations to see if it work for me and it still has not. For this code, I've made sure there are no errors whatsoever in the console and that the JS works properly on visual studio code. Both work but animations do not. Heres my code for a simple JS animation taken from https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671.
Note: while even inputting this into the code snippet, it seems to run but it never works on live server or local hosts
const scrollElements = document.querySelectorAll(".js-scroll");
const elementInView = (el, dividend = 1) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
(window.innerHeight || document.documentElement.clientHeight) / dividend
);
};
const elementOutofView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop > (window.innerHeight || document.documentElement.clientHeight)
);
};
const displayScrollElement = (element) => {
element.classList.add("scrolled");
};
const hideScrollElement = (element) => {
element.classList.remove("scrolled");
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 1.25)) {
displayScrollElement(el);
} else if (elementOutofView(el)) {
hideScrollElement(el)
}
})
}
window.addEventListener("scroll", () => {
handleScrollAnimation();
});
<style>
#import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght#300&display=swap");
/*General styling for structure*/
body {
margin: 0;
font-family: "Merriweather Sans", sans-serif;
}
.container {
max-width: 1280px;
width: 95%;
margin: 0 auto;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-family: "Merriweather", serif;
height: 100vh;
}
header h2 {
font-weight: 400;
}
.scroll-container {
height: 100vh;
min-height: 450px;
padding: 2rem 1rem;
display: flex;
align-items: center;
box-sizing: border-box;
}
.scroll-container:nth-of-type(1) {
background-color: #bdd0c4;
}
.scroll-container:nth-of-type(2) {
background-color: #f5d2d3;
}
.scroll-container:nth-of-type(3) {
background-color: #9ab7d3;
}
.scroll-container:nth-of-type(4) {
background-color: #dfccf1;
}
.scroll-container:nth-of-type(even) {
flex-direction: row-reverse;
}
.scroll-element,
.scroll-caption {
width: 50%;
}
.scroll-element {
min-height: 300px;
height: 100%;
background-color: #eaeaea;
}
.scroll-caption {
margin: 1rem;
}
footer {
text-align: center;
padding: 0.5rem 0;
background-color: #faddad;
}
footer p {
font-size: 0.75rem;
margin: 0.25rem 0;
color: #221133;
}
footer a {
text-decoration: none;
color: inherit;
}
#media screen and (max-width: 650px) {
.scroll-container,
.scroll-container:nth-of-type(even) {
flex-direction: column;
align-content: inherit;
}
.scroll-element {
height: 100%;
}
.scroll-element,
.scroll-caption {
width: 100%;
}
}
/**Styling scrollable elements*/
.js-scroll {
opacity: 0;
transition: opacity 500ms;
}
.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in {
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
animation: slide-in-right 1s ease-in-out both;
}
#keyframes slide-in-left {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slide-in-right {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<head></head>
<body>
<header class="container">
<h1>How to Animate on Scroll With Vanilla JavaScript</h1>
<h2>Scroll to see the effects
<p class="animate-arrow">↓
</p>
</h2>
</header>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in">
</div>
<div class="scroll-caption">
This animation fades in.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in-bottom">
</div>
<div class="scroll-caption">
This animation slides in to the top.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-left">
</div>
<div class="scroll-caption">
This animation slides in from the left.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-right">
</div>
<div class="scroll-caption">
This animation slides in from the right.
</div>
</section>
<footer>
<p>Animation styles from animista.net</p>
<p>
Pen by Jemima Abu<span style="color: #D11E15"> ♥</span>
</p>
</footer>
</body>

Thank you all who responded to my question -
the answer was very simple and was actually mentioned by StackSlave
The script tag was in head and not at the end of the html file. The way around this is to add 'defer' at the end of the script tag. JS works perfectly now.

How to fix my header getting cut off on mobile browsers?

I need help with fixing my header I can not find the problem! At the beginning it looks fine but when you scroll down it cuts part of it off. But when you scroll back up it goes normal. I think it is with the hamburger menu because when you click on it, it increases the cut off. Here is the link to the website. https://perfectparadox8400.000webhostapp.com/ and here is a gif of what happens!
Link to the picture of what happens!
I only happens when you are on a phone. I used the inspector tools to test it and I did try it on a phone to.
Here is the header code.
<header id="headerrr" class="fixed-top lode">
<div class="container">
<div id="lode" class="logo float-center">
<!-- Uncomment below if you prefer to use an image logo -->
<!-- <h1 class="text-light"><span>NewBiz</span></h1> -->
<a href="#intro">
<img id="headerr" class="bigg" src="img/l.png" heigth="100%"><div id="lod" class="lod" style=display:inline-block;vertical-align:center> Perfect Paradox's 8400</div></a>
<div id="dlod" class="loder">
<div class="fixx">
<div class="float-center lodbar">Loding...
<div id="barr" class="persent"> </div>
</div>
</div>
</div>
</div>
<script>
var w = 5;
var foo = setInterval(function () {
if(w>109) {cancelInterval(foo)}
w = w + 6.25;
document.getElementById('barr').style.width = w + '%';
}, 1000);
</script>
<nav id="lood" class="lod main-nav float-right d-none d-lg-block header">
<ul>
<li class="drop-down"><a>Home</a>
<ul>
<li>About Us</li>
<li>Portfolio</li>
<li>Team</li>
</ul>
</li>
<li class="drop-down" ><a>FTC</a>
<ul>
<li>FTC Page</li>
<li>
FTC At Home
</li>
<li>About FTC</li>
</ul>
</li>
<li>FLL</li>
<li>Junior FLL</li>
<li class="drop-down"><a>More</a>
<ul>
<li>Old Website
</li>
<li>FLL</li>
<li>Junior FLL</li>
<li>More</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav><!-- .main-nav -->
</div>
</header><!-- #header -->
The css.
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.lode {
height: 100% !important;
transition: all 0.5s;
}
.lod {
display: none !important;
transition: all 0.5s;
}
.bigg {
margin-left: 25% !important;
margin-right: 25% !important;
width: 50% !important;
-webkit-animation-name: rotate;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
transition: all 0.5s;
}
.float-center {
margin-top: 8% !important;
transition: all 0.5s;
}
.loder {
width: 80%;
transition: all 0.5s;
}
.fixx {
position: relative;
}
.lodbar {
width: 125%;
transition: all 0.5s;
background-color: #afb0b3;
height: 0.5%;
}
.persent {
width: 0%;
transition: all 0.5s;
background-color: #5e068a;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#headerrr {
height: 80px;
transition: all 0.5s;
z-index: 997;
transition: all 0.5s;
padding: 0px 0;
background: #fff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.3);
transition: all 0.5s;
}
.header {
height: 80px;
transition: all 0.5s;
z-index: 997;
padding: 20px 0;
background: transparent !important;
}
#headerrr.header-scrolledd {
height: 60px;
transition: all 0.5s;
}
#headerr.header-scrolleddd {
width: 76px;
transition: all 0.5s;
}
#headerr {
width: 100px;
transition: all 0.5s;
}
.header.header-scrolled,
.header.header-pages {
height: 60px;
padding: 10px 0;
transition: all 0.5s;
}
#headerrr .logo h1 {
font-size: 36px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 400;
letter-spacing: 3px;
text-transform: uppercase;
transition: all 0.5s;
}
#headerrr .logo h1 a {
margin: 7px 0;
transition: all 0.5s;
}
#headerrr .logo h1 a:hover {
color: #5e068a;
text-decoration: none;
transition: all 0.5s;
}
#headerrr .logo img{
padding: 0;
margin: 0px 0;
height: 100%;
transition: all 0.5s;
}
The javascript.
(function ($) {
"use strict";
// Preloader (if the #preloader div exists)
$(window).on('load', function () {
if ($('#preloader').length) {
$('#preloader').delay(100).fadeOut('slow', function () {
$(this).remove();
});
}
});
// Back to top button
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
}
});
$('.back-to-top').click(function(){
$('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
return false;
});
// Initiate the wowjs animation library
new WOW().init();
// Header scroll class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
} else {
$('.header').removeClass('header-scrolled');
$('#headerrr').removeClass('header-scrolledd');
$('#headerr').removeClass('header-scrolleddd');
}
});
if ($(window).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
}
// Smooth scroll for the navigation and links with .scrollto classes
$('.main-nav a, .mobile-nav a, .scrollto').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
var top_space = 0;
if ($('#headerrr').length) {
top_space = $('#headerrr').outerHeight();
if (! $('#headerrr').hasClass('header-scrolledd')) {
top_space = top_space - 0;
}
}
$('html, body').animate({
scrollTop: target.offset().top - top_space
}, 1500, 'easeInOutExpo');
if ($(this).parents('.main-nav, .mobile-nav').length) {
$('.main-nav .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});
// Navigation active state on scroll
var nav_sections = $('section');
var main_nav = $('.main-nav, .mobile-nav');
var main_nav_height = $('#headerrr').outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
nav_sections.each(function() {
var top = $(this).offset().top - main_nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
main_nav.find('li').removeClass('active');
main_nav.find('a[href="#'+$(this).attr('id')+'"]').parent('li').addClass('active');
}
});
});
// jQuery counterUp (used in Whu Us section)
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Porfolio isotope and filter
$(window).on('load', function () {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item'
});
$('#portfolio-flters li').on( 'click', function() {
$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({ filter: $(this).data('filter') });
});
});
// Testimonials carousel (uses the Owl Carousel library)
$(".testimonials-carousel").owlCarousel({
autoplay: true,
dots: true,
loop: true,
items: 1,
delay: 100
});
})(jQuery);
These are the parts with the header involved!
Please help!
I tried removing the javascript but it did not help!

You adding the on scroll shrink effect to the header
There is two ways to solve this
removing header-scrolled css or change the height of header-scrolled to according to main height mentioned in headerrr css
#headerrr.header-scrolledd {
height: 60px;
transition: all 0.5s;
}
The main height of the header is 80px you adding the header-scrolledcss onscroll in javascript the header-scrolled height of is 66px so when you scroll down the screen get shrink so change the height of header-scrolled to 80px to avoid shrink
second way is to remove the javascript for header
// Header scroll class
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
} else {
$('.header').removeClass('header-scrolled');
$('#headerrr').removeClass('header-scrolledd');
$('#headerr').removeClass('header-scrolleddd');
}
});
if ($(window).scrollTop() > 100) {
$('.header').addClass('header-scrolled');
$('#headerrr').addClass('header-scrolledd');
$('#headerr').addClass('header-scrolleddd');
}
remove this code block it will remove the onscroll function for header removig this will leads to your header will not shrink on scroll
you can choose any one way
my suggestion to remove both header-scrolled and javascript code

I added this: html, body {width: auto!important; overflow-x: hidden!important} and it fixed the problem.

JavaScript slide panel, how to make button usable?

I am trying to make a slide panel, https://codyhouse.co/gem/css-slide-in-panel. when I run the following code, I can't click on my bottom. Can someone please help to fix it.
const panel = document.querySelector('.cd-panel');
var ind = true;
const tr = document.querySelector('.trigger');
btn.addEventListener('click', ()=>{
if(ind){
ind = false;
panel.classList.add('cd-panel--is-visible');
}else{
ind = true;
panel.classList.remove('cd-panel--is-visible');
}
});
tr.addEventListener('click', ()=>{
console.log('here');
});
.cd-panel {
/*...*/
visibility: hidden;
transition: visibility 0s 0.6s;
}
.cd-panel.cd-panel--is-visible {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-panel__header {
/*...*/
position: fixed;
top: 0;
width: 90%;
height: 50px;
transition: transform 0.3s 0s;
transform: translateY(-50px);
}
.cd-panel--from-right .cd-panel__header {
right: 0;
}
.cd-panel--from-left .cd-panel__header {
left: 0;
}
.cd-panel--is-visible .cd-panel__header {
transition: transform 0.3s 0.3s;
transform: translateY(0px);
}
.cd-panel__container {
/*...*/
position: fixed;
width: 90%;
height: 100%;
top: 0;
transition: transform 0.3s 0.3s;
}
.cd-panel--from-right .cd-panel__container {
right: 0;
transform: translate3d(100%, 0, 0);
}
.cd-panel--from-left .cd-panel__container {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.cd-panel--is-visible .cd-panel__container {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
<button id='btn'>BTN</button>
<main class="cd-main-content">
<!-- your main content here -->
</main>
<div class="cd-panel cd-panel--from-right js-cd-panel-main">
<header class="cd-panel__header">
<h1>Title Goes Here</h1>
<button class='trigger'>Trigger</button>
</header>
<div class="cd-panel__container">
<div class="cd-panel__content">
<!-- your side panel content here -->
</div> <!-- cd-panel__content -->
</div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->
I want to see 'here' logged in console as I click on the trigger button, I tried to add a cursor: pointer in .trigger, but it didn't work as well.

The problem in .cd-panel__container it should not be postition:fixed
the .cd-panel__container have specific width and height, when you make it's position as fixed, it will cover the elements behind it.
So you just need to modify class .cd-panel__container's position to static
const panel = document.querySelector('.cd-panel');
var ind = true;
const tr = document.querySelector('.trigger');
const btn = document.querySelector('#btn');
btn.addEventListener('click', ()=>{
if(ind){
ind = false;
panel.classList.add('cd-panel--is-visible');
}else{
ind = true;
panel.classList.remove('cd-panel--is-visible');
}
});
tr.addEventListener('click', ()=>{
console.log('here');
});
.cd-panel {
/*...*/
visibility: hidden;
transition: visibility 0s 0.6s;
}
.cd-panel.cd-panel--is-visible {
visibility: visible;
transition: visibility 0s 0s;
}
.cd-panel__header {
/*...*/
position: fixed;
top: 0;
width: 90%;
height: 50px;
transition: transform 0.3s 0s;
transform: translateY(-50px);
}
.cd-panel--from-right .cd-panel__header {
right: 0;
}
.cd-panel--from-left .cd-panel__header {
left: 0;
}
.cd-panel--is-visible .cd-panel__header {
transition: transform 0.3s 0.3s;
transform: translateY(0px);
}
.cd-panel__container {
/*...*/
/* position: fixed;*/
width: 90%;
height: 100%;
top: 0;
transition: transform 0.3s 0.3s;
}
.cd-panel--from-right .cd-panel__container {
right: 0;
transform: translate3d(100%, 0, 0);
}
.cd-panel--from-left .cd-panel__container {
left: 0;
transform: translate3d(-100%, 0, 0);
}
.cd-panel--is-visible .cd-panel__container {
transform: translate3d(0, 0, 0);
transition-delay: 0s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id='btn'>BTN</button>
<main class="cd-main-content">
<!-- your main content here -->
</main>
<div class="cd-panel cd-panel--from-right js-cd-panel-main">
<header class="cd-panel__header">
<h1>Title Goes Here</h1>
<button class='trigger'>Trigger</button>
</header>
<div class="cd-panel__container">
<div class="cd-panel__content">
<!-- your side panel content here -->
</div> <!-- cd-panel__content -->
</div> <!-- cd-panel__container -->
</div> <!-- cd-panel -->
<script src="index.js"></script>
</body>
</html>

How to call a jquery buttonclick function from inside a javascript function

I have buttonclick function in jquery which gives a magnified popup effect of given div test-popup in button test..
i want that magnified popup effect of div test-popup to happen when i call javascript function caller() when i click button go.
How to achieve this?
function caller() {
$.magnifiedeffect();
};
$.magnifiedeffect = function() {
};
var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
items: {
src: theControl,
},
type: 'inline',
mainClass: 'mfp-zoom-in mfp-with-anim', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
}
});
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/* ====== Zoom effect ======*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<input type="button" value="go" onclick=" caller();">
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div>

You can simulate a click on an element and trigger all the corresponding events with .click().
function caller() {
$('#clickMe').click();
};
var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
items: {
src: theControl,
},
type: 'inline',
mainClass: 'mfp-zoom-in mfp-with-anim', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
}
});
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<input type="button" value="go" onclick=" caller();">
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Congradulations </div>

3d flip animation not working in chrome

I wanted to create a card with text which will flip and show a backside with some other text, whenever you click on the "card" (div). I checked for any mistakes and stuff but somehow its not working on chrome.
HTML:
<div class="card effect__EFFECT">
<div class="card__front">
<span class="card__text">front</span>
</div>
<div class="card__back">
<span class="card__text">back</span>
</div>
</div>
CSS:
.card {
position: relative;
float: left;
padding-bottom: 25%;
width: 25%;
text-align: center;
}
.card__front,
.card__back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.card__front,
.card__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.card__front {
background-color: #ff5078;
}
.card__back {
background-color: #1e1e1e;
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.card.effect__click.flipped .card__back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
Javascript:
(function() {
var cards = document.querySelectorAll(".card.effect__click");
for ( var i = 0, len = cards.length; i < len; i++ ) {
var card = cards[i];
clickListener( card );
}
function clickListener(card) {
card.addEventListener( "click", function() {
var c = this.classList;
c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
});
}
})();

Here is a working fiddle http://jsfiddle.net/hzsbzxw6/ it seems that this should all work, it could be the way you're embedding the script.
<script type = "text/javascript">
Try fixing that, or ultimately not embedding it inline.