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>
Related
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>
I am making a loading animation and now I am having a loading animation circle type below :
var waitingMask = {
show: function() {
var body = $('body');
var static_pos;
var spinner = body.children('.spinner');
if (spinner.length && !spinner.hasClass('spinner-remove')) return null;
!spinner.length && (spinner = $('<div class="spinner' + (static_pos ? '' : ' spinner-absolute') + '"/>').appendTo(body));
animateSpinner(spinner, 'add');
body.addClass("spinner-fade");
},
hide: function() {
var body = $('body');
var complete;
var spinner = body.children('.spinner');
spinner.length && animateSpinner(spinner, 'remove', complete);
body.removeClass("spinner-fade");
}
}
function animateSpinner(el, animation, complete) {
if (el.data('animating')) {
el.removeClass(el.data('animating')).data('animating', null);
el.data('animationTimeout') && clearTimeout(el.data('animationTimeout'));
}
el.addClass('spinner-' + animation).data('animating', 'spinner-' + animation);
el.data('animationTimeout', setTimeout(function() {
animation == 'remove' && el.remove();
complete && complete();
}, parseFloat(el.css('animation-duration')) * 1000));
}
function showLoading() {
return waitingMask.show();
}
function hideLoading() {
return waitingMask.hide();
}
/* The spinner */
#keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner,
.spinner:before {
width: 80px;
height: 80px;
box-sizing: border-box;
}
.spinner:before {
content: '';
display: block;
border-radius: 50%;
border: 2px solid #ccc;
border-top-color: #333;
animation: spinner .6s linear infinite;
}
.spinner-absolute {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
}
/* Animations */
.spinner-add,
.spinner-remove {
animation-fill-mode: both;
animation-duration: .4s;
}
.spinner-add {
animation-name: spinner-add;
}
#keyframes spinner-add {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.spinner-remove {
animation-name: spinner-remove;
}
#keyframes spinner-remove {
to {
transform: scale(0);
}
}
.spinner-fade {
content: '';
display: block;
/* position: fixed; */
top: 0;
/* bottom: 0; */
left: 0;
/* right: 0; */
width: 100%;
height: 100%;
background-color: transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
ABC
</h1>
<button onclick="showLoading()">Add Spinner</button>
<button onclick="hideLoading()">Remove Spinner</button>
jsfiddle
But I want to improve my to circle loading to floating bar loading like below:
Anyone can give me a solution for my problem?
Thanks.
Context:
an open modal/overlay fullscreen
with parent scrolling disabled
and overlay scrolling y enabled
content push when the open button is clicked
Which works great.
But I can't get the reverse effect when close button is clicked: It's closing without the effect.
If anyone can help me on this. I really appreciate it. Thank you so much.
var body = document.body,
overlay = document.querySelector('.modalbox'),
overlayBtts = document.querySelectorAll('button[class$="modalbox"]');
[].forEach.call(overlayBtts, function(btt) {
btt.addEventListener('click', function() {
/* Detect the button class name */
var overlayOpen = this.className === 'open-modalbox',
overlayClose = this.className === 'close-modalbox';
/* Toggle the aria-hidden state on the overlay and the
no-scroll class on the body */
overlay.setAttribute('aria-hidden', !overlayOpen);
overlay.classList.toggle('modalbox-active', overlayOpen);
overlay.classList.toggle('modalbox-active-reverse', overlayClose);
body.classList.toggle('noscroll', overlayOpen);
/* On some mobile browser when the overlay was previously
opened and scrolled, if you open it again it doesn't
reset its scrollTop property */
overlay.scrollTop = 0;
}, false);
});
.noscroll {
overflow: hidden;
}
.modalbox {
position: fixed;
overflow-y: scroll;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
background-color: orange;
z-index: 50;
}
.modalbox-active {
animation: ease slideright .4s 1 forwards;
}
#keyframes slideright {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.modalbox-active-reverse {
width: 0;
animation: ease slideleft .4s 1 reverse;
}
#keyframes slideleft {
0% {
width: 100%;
}
100% {
width: 0;
}
}
[aria-hidden="true"] {
display: none;
}
[aria-hidden="false"] {
display: block;
}
<div class="content">
<button type="button" class="open-modalbox" id="trigger">OPEN</button>
</div>
<section class="modalbox" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-modalbox">CLOSE</button>
</div>
</section>
$(document).ready(function () {
$(".modalbox").hide();
$("#trigger").on("click", function(){
$(".modalbox").show();
});
});
var body = document.body,
overlay = document.querySelector('.modalbox'),
overlayBtts = document.querySelectorAll('button[class$="modalbox"]');
[].forEach.call(overlayBtts, function(btt) {
btt.addEventListener('click', function() {
/* Detect the button class name */
var overlayOpen = this.className === 'open-modalbox',
overlayClose = this.className === 'close-modalbox';
/* Toggle the aria-hidden state on the overlay and the
no-scroll class on the body */
overlay.setAttribute('aria-hidden', !overlayOpen);
overlay.classList.toggle('modalbox-active', overlayOpen);
overlay.classList.toggle('modalbox-active-reverse', overlayClose);
body.classList.toggle('noscroll', overlayOpen);
/* On some mobile browser when the overlay was previously
opened and scrolled, if you open it again it doesn't
reset its scrollTop property */
overlay.scrollTop = 0;
}, false);
});
.noscroll {
overflow: hidden;
}
.modalbox {
position: fixed;
overflow-y: scroll;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
background-color: orange;
z-index: 50;
}
.modalbox-active {
animation: ease slideright .4s 1 forwards;
}
#keyframes slideright {
0% {
width: 0;
}
100% {
width: 100%;
}
}
.modalbox-active-reverse {
width: 0;
animation: ease slideleft .4s 1;
}
#keyframes slideleft {
0% {
width: 100%;
}
100% {
width: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<button type="button" class="open-modalbox" id="trigger">OPEN</button>
</div>
<section class="modalbox" aria-hidden="true">
<div>
<h2>Hello, I'm the overlayer</h2>
...
<button type="button" class="close-modalbox">CLOSE</button>
</div>
</section>
Use JQUERY to hide the modal on load and when the user clicks the button open the window. also needed to remove the CSS code below.
[aria-hidden="true"] {
display: none;
}
[aria-hidden="false"] {
display: block;
}
I have a situation trying to implement this pulse loader code into my theme pages.
As far as I've read, somehow there should be a setTimeout (function() implemented but not so sure how to integrate this into my js file:
jQuery(document).ready(function(){
setTimeout(function(){
$("div.loader").fadeOut( 500, function(){
$("div#content").fadeIn( 3000);
});
}, 2500);
});
In a few words, the pulse dot, it doesn't show up before the page content appearance, like we have in this site example, it show up in the same time (too late) almost when the content is already loaded.
My result with Live examples:
here;
If this helps, here is the original theme js sequence from the app.min.js file, that should manage a .gif loader:
...
var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
window.SITE = {
init: function() {
var self = this, content = $("#wrapper"), pl = content.find(">.preloader"), count = $("body").data("cart-count");
favicon = new Favico({
bgColor: "#151515",
textColor: "#fff"
}), favicon.badge(count), content.waitForImages(function() {
TweenMax.to(pl, 1, {
autoAlpha: 0,
ease: Quart.easeOut,
onComplete: function() {
pl.css("display", "none");
}
});
...
I've replaced .loader with .sk-spinner-pulse.sk-spinner resulting:
...
var $doc = $(document), win = $(window), Modernizr = window.Modernizr, AnimationsArray = [];
window.SITE = {
init: function() {
var self = this, content = $("#wrapper"), pl = content.find(">.sk-spinner-pulse.sk-spinner"), count = $("body").data("cart-count");
favicon = new Favico({
bgColor: "#151515",
textColor: "#fff"
}), favicon.badge(count), content.waitForImages(function() {
TweenMax.to(pl, 1, {
autoAlpha: 0,
ease: Quart.easeOut,
onComplete: function() {
pl.css("display", "none");
}
});
...
Also in css I had in the preloader section:
...
#wrapper .preloader {
position: fixed;
z-index: 998;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 80px 60px 0;
background: #f9f9f9 url("../img/preloader.gif") center center no-repeat;
-moz-background-size: 55px 55px;
-o-background-size: 55px 55px;
-webkit-background-size: 55px 55px;
background-size: 55px 55px;
}
.site_bars_off #wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
.site_bars_off #wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
#media only screen and (max-width: 40.063em) {
#wrapper .preloader {
margin-left: 0;
margin-right: 0;
}
}
...
modified as follow:
...
#wrapper .sk-spinner-pulse.sk-spinner {
left: 50%;
position: fixed;
top: 50%;
width: 45px;
height: 45px;
margin: 0 auto;
background-color: gold;
border-radius: 100%;
-webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
animation: sk-pulseScaleOut 1s infinite ease-in-out;
}
#-webkit-keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes sk-pulseScaleOut {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
.site_bars_off #wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
#media only screen and (max-width: 40.063em) {
#wrapper .sk-spinner-pulse.sk-spinner {
margin-left: 0;
margin-right: 0;
}
}
...
In header.php I've replaced:
...
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
...
with:
...
<!-- Start Loader -->
<div class="sk-spinner sk-spinner-pulse"></div>
<!-- End Loader -->
...
Any thoughts?
Use window.onload event to make the animation instead of using a timeout. Example:
jQuery(function($){
$(window).load(function(){
$(".sk-spinner-pulse").fadeOut(500);
$("#wrapper").css("opacity","1");
});
});
window.onload waits for the document and all it's images to load.
The pulse loader should be visible once the document loads, it should be outside your #wrapper div.
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.