I'm using the Magnific popup for to show the popup in my site, it's worked well in all browsers and smartphones, however it happened a problem on the iPhone, when I scroll the page with popup open, the "body" scroll together.
This is my jQuery code:
if ($.fn.magnificPopup) {
$('.open-popup').magnificPopup({
type: 'inline',
alignTop: true,
midClick: true,
fixedContentPos: true,
removalDelay: 300,
mainClass: 'modulos-popup fade-popup'
});
$.extend(true, $.magnificPopup.defaults, {
tClose: 'Fechar (Esc)',
tLoading: 'Carregando...'
});
}
yeah I'm facing the same problem seems like the following patch is working for me:
utils.js(useful if you are using the popup in different places)
window.Utils = {
magnificPopupConfiguration: function() {
var startWindowScroll = 0;
return {
beforeOpen: function() {
startWindowScroll = $(window).scrollTop();
$('html').addClass('mfp-helper');
},
close: function() {
$('html').removeClass('mfp-helper');
setTimeout(function(){
$('body').animate({ scrollTop: startWindowScroll }, 0);
}, 0);
}
}
}
}
css:
.mfp-wrap {
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
}
html.mfp-helper {
height: 100%;
body {
overflow: hidden;
height: 100%;
-webkit-transform: translateZ(0);
}
}
Preparing the js:
$(document).ready(function() {
if ($('.open-popup-link').length) {
startWindowScroll = 0;
$('.open-popup-link').magnificPopup({
type: 'inline',
midClick: true,
fixedContentPos: true,
callbacks: Utils.magnificPopupConfiguration()
});
}
});
html:
<a class="open-popup-link" href="#your-html-content">text link</a>
Related
I have an issue with jQuery not firing on the else statement and I'm pretty sure its pretty simple why it's not but unable to solve it myself due to the lack of my JavaScript knowledge, I'm hoping that someone can tell me the issue.
My jQuery script has two sets of actions, one for above 639px and one set below. It works on the page load but if you reduce the size from 1600px to 600px, the height remains of the element remains the height of the window despite going under 639px it does not change it to height-min: auto.
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto');
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
}
}).resize();
});
The min-height declaration does not work because you have a typo: the selectors in your if-else conditions are not the same:
In the if block: $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
In the else block: $('.nanoContainer, .flexAligner .vegas-container')
A comma is missing from the latter, and without your markup I cannot tell which one is the intended selector.
With regards to the issue with .vegas() not working as it should, that is because you are only initialising the plugin at different breakpoints, but never destroying the other instance. In this case, I refer you to the code: the plugin appears to expose a destroy function, which you can call to destroy the instance when switching between breakpoints, e.g. $selector.vegas('destroy').
Here is a code that might work: no guarantees since you have not provided an MCVE and I am unable to test it:
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
// Set min-height
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
// Create new Vegas instance
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$(".home .intro").vegas('destroy');
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto');
// Create new Vegas instance
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$("body.home").vegas('destroy');
}
}).resize();
});
I'm using the javascript library tooltipster and I don't know why the text is wrapping in the tooltip box.
HTML:
<div id="spanBackground" style="background: rgba(238, 0, 140, 120);"
class="tooltipjs" title="Touch to interact">
Javascript:
function AnimateUpDown(toolTipElement) {
$(toolTipElement).animate({ top: '+=20' }, 1000);
$(toolTipElement).animate({ top: '-=20' }, 1000, AnimateUpDown);
}
$(document).ready(function () {
$('.tooltipjs')
.tooltipster(
{
animation: 'grow',
arrow: false,
//Custom trigger effectively disables the default onhover trigger
trigger: 'custom',
functionReady: function (instance, helper) {
AnimateUpDown(helper.tooltip);
}
});
toolTipOpenAndClose();
});
There is an open issue about that, that's the first place to check. Should be fixed in a few days. https://github.com/iamceege/tooltipster/issues/600
I'm using Jquery zAccordion plugin , I want it to be responsive . So I tried from the examples of their own website at : http://www.armagost.com/zaccordion/a-responsive-example-using-media-queries/
Anyway , I've included zAccordion , Enquire and the script mentioned below in my wordpress website but nothing happened .
What's the problem ?
Here is the script :
jQuery(document).ready(function($) {
var example = $('#media'), defaults = {
buildComplete: function () {
example.css('visibility', 'visible');
},
timeout: 5500
};
function build(x) {
var opts, current;
if (!$.isEmptyObject(example.data())) { /* If an zAccordion is found, rebuild it with new settings. */
example.css('visibility', 'hidden');
current = example.data('current');
opts = $.extend({
startingSlide: current
}, defaults, x);
example.zAccordion('destroy', {
removeStyleAttr: true,
removeClasses: true,
destroyComplete: {
afterDestroy: function() {
try {
console.log('zAccordion destroyed! Attempting to rebuild...');
} catch (e) {}
},
rebuild: opts
}
});
} else { /* If no zAccordion is found, build one from scratch. */
example.css('visibility', 'hidden');
opts = $.extend(defaults, x);
example.zAccordion(opts);
}
}
/* A unique Media Query is registered for each screen size. */
enquire.register('screen and (min-width: 960px)', { /* Standard screen sizes and a default build for browsers that are unsupported. */
match : function () {
build({
slideWidth: 540,
width: 860,
height: 200
});
} /* The *true* value below means this media query will fire by default. */
}, true).register('screen and (min-width: 768px) and (max-width: 959px)', {
match : function () {
build({
slideWidth: 420,
width: 680,
height: 200
});
}
}).register('screen and (min-width: 480px) and (max-width: 767px)', {
match : function () {
build({
slideWidth: 220,
width: 380,
height: 200
});
}
}).register('screen and (max-width: 479px)', {
match : function () {
if (!$.isEmptyObject(example.data())) {
example.zAccordion('destroy', {
removeStyleAttr: true,
removeClasses: true,
destroyComplete: {
afterDestroy: function() {
try {
console.log('zAccordion destroyed!');
} catch (e) {}
}
}
});
}
}
}).listen(5);
});
And here is the HTML :
<ul id="media">
<li><img src="http://domain.com/wp-content/uploads/2014/11/1.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/2.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/3.jpg" width="750" height="300" alt="Image Title"/></li>
<li><img src="http://domain.com/wp-content/uploads/2014/11/4.jpg" width="750" height="300" alt="Image Title"/></li>
</ul>
<pre class="js">
$("#media").zAccordion({
timeout: 4000,
slideWidth: 600,
width: 960,
height: 270
});
</pre>
Include above the code after ul tag. and remove "$" with "jQuery".
So, i'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(
Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position
I want to run my code inside Modernizr.mq whatever after I resize my browser window.
Here is my code:
jQuery(document).ready(function () {
function callResize(){
if (Modernizr.mq('only screen and (min-width: 800px)')==true) {
$(window).scroll( function() {
var value = $(this).scrollTop();
if ( value > 150 ){
$("#logo").fadeOut();
$(".header-container").addClass("small");
$(".stick-menu").css("bottom",24);
$(".signup").addClass("small");
}else{
$("#logo").fadeIn();
$(".header-container").removeClass("small");
$(".stick-menu").css("bottom",35);
$(".signup").removeClass("small");
}
});
$('#wwdTab').responsiveTabs({
startCollapsed: 'true',
collapsible: true,
rotate: false,
animation: 'fade'
});
}
if (Modernizr.mq('only screen and (max-width: 759px)')==true) {
$('#wwdTab').responsiveTabs({
startCollapsed: 'true',
collapsible: true,
rotate: false,
animation: 'slide'
});
}
}
callResize();
$(window).resize(function() {
callResize();
});
});
But the code above doesn't work. I need to reload my page to see the Modernizr.mq work.
Any idea to slove it?
Maybe try restructing everything like this, so that the callResize() function is outside docuement ready block.
Good luck!
$(function() {
// callResize to execute after the document has loaded
callResize();
$(window).resize(function() {
// callResize to execute after window resize
callResize();
});
});
function callResize(){
if (Modernizr.mq('only screen and (min-width: 800px)')==true) {
$(window).scroll( function() {
var value = $(this).scrollTop();
if ( value > 150 ){
$("#logo").fadeOut();
$(".header-container").addClass("small");
$(".stick-menu").css("bottom",24);
$(".signup").addClass("small");
}else{
$("#logo").fadeIn();
$(".header-container").removeClass("small");
$(".stick-menu").css("bottom",35);
$(".signup").removeClass("small");
}
});
$('#wwdTab').responsiveTabs({
startCollapsed: 'true',
collapsible: true,
rotate: false,
animation: 'fade'
});
}
if (Modernizr.mq('only screen and (max-width: 759px)')==true) {
$('#wwdTab').responsiveTabs({
startCollapsed: 'true',
collapsible: true,
rotate: false,
animation: 'slide'
});
}
}