We Keep Coding

Delay a jquery plugin by seconds, scroll y or exit intent

Every time I ask a question here, no matter how dumb it is, I do always learn something.
Anyway, I'm hoping to get some more good answers to this one.
I'm calling a jquery plugin for a modal on document.ready
<script>
$(document).ready(function() {
// Initialize the plugin
$('#JPO').popup({
absolute: false,
autoopen: true
});
$.fn.popup.defaults.pagecontainer = '#page'
});
</script>
it auto opens a modal but I only want the modal to open after either a user scrolls down 400px, or after being on the page for 5 seconds, or on exit (exit intent).
This is the jquery plugin I'm using: https://dev.vast.com/jquery-popup-overlay/
Thanks so much in advance!

use setTimeout() function.
Read More about setTimeout
Sample Code:
setTimeout(
function()
{
//do something special
}, 5000);

I used a combination of setTimeout, and onmouseleave to create my popup.
<script>
function openPopup(){
$('#JPO').popup({
autoopen: true,
detatch: true,
transition: 'all 1.0s'
});
};
function exitPopup(){
$('#JPO').popup('show');
};
function cookiePopup(){
$('#JPO').popup({
autoopen: false,
detatch: true,
transition: 'all 1.0s'
});
};
$(document).ready(function(){
$('.modal-content').hide();
var dialogShown = Cookies.get('dialogShown');
if (!dialogShown) {
setTimeout(openPopup, {{ section.settings.delay }});
$(document).mouseleave(function(){
setTimeout(exitPopup,1050)
});
Cookies.set('dialogShown', 1, { expires: 1 });
}
else {
setTimeout(cookiePopup, {{ section.settings.delay }});
}
});
</script>
I also used a plugin called js-cookie to make my pop-up less annoying to repeat visitors.
PS. this is for a shopify section, so it does contain some liquid.
Plugins used:
PopUp https://dev.vast.com/jquery-popup-overlay/
Cookies https://github.com/js-cookie/js-cookie/tree/v1.5.1

Pause all instances of mb.YTPlayer element on single button click

Using a jquery plugin for Youtube backgrounds (https://github.com/pupunzi/jquery.mb.YTPlayer/wiki)
I am trying to pause all the background videos with a single pause button, not sure for which reason it only pauses the first video, no matter the length of divs with background video.
I set up a jsfiddle explaining what I am trying to achieve.
The codes are as follow:
$('.vid').each(function() {
var vid = $(this).data('video');
$(this).YTPlayer({
videoURL: vid,
stopMovieOnBlur: false,
mute: true,
ratio: 'auto',
quality: 'default',
loop: true,
showYTLogo: false,
showControls: false,
containment: 'self'
});
});
$('.pauseit').on('click', function() {
$('.vid').YTPPause()
});
Thanks for any help on this.

Converting comment to answer.
Make sure the button is a button: type="button"
use .each again to pause the videos:
Like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() { $(this).YTPPause(); });
});
https://jsfiddle.net/mplungjan/swnj2bcg/

Take a look here. I modified the jsfiddle:
update
Chnage it like this:
$('.pauseit').on('click', function() {
$('.vid').each(function() {
$( this ).YTPPause();
})
});

Jquery trigger div height change event (animate?)

I need to detect the total height of my div "collectionFilterPage" while the animate event is running. Is there any event to bind?
This is my ja code:
function showMoreItems() {
$("#collectionFilterPage").animate({
height: "+=720"
}, 1000, function() {
if ($("#collectionFilterPage").outerHeight() >= $(".lista").outerHeight())
unbindScrollEvent();
});
}
Basically I would want to fire the "unbindScrollEvent" when both div "collectionFilterPage" and "lista" have the same height.
thanks

You might want to switch to this $().aninate signature and use the step property which allows you to set a callback function that is called during each step of the animation.
function showMoreItems() {
function checkHeight() {
if ($("#collectionFilterPage").outerHeight() >= $(".lista").outerHeight())
unbindScrollEvent();
}
$("#collectionFilterPage").animate({
height: "+=720"
}, {
duration: 1000,
complete: checkHeight,
step: checkHeight
});
}
http://api.jquery.com/animate/
$(...).animate( properties, options );

Solved. It has been very easy
height: $("#collectionFilterPage").outerHeight() >=
$(".lista").outerHeight() ? "+=0" : "+=720"

Start scrolling on mouseover jquery jcarousel

I need to start scroll when user hover. I take a function reference from the question this and this. I notice that even the callback function is not working with initCallback option. Am I missing something or I forgot something to put in the code. Here is example of code fiddle
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.startAuto();
}, function() {
carousel.stopAuto();
});
};

You should use jcarouselAutoscroll plugin for that
Check this updated fiddle
INIT CODE
A(".example").jcarousel({
auto: 1,
wrap: "last"
}).jcarouselAutoscroll({
interval: 1000,
target: '+=1',
autostart: false
});
Code for hovering
$(".example li").hover(function () {
$(".example").jcarouselAutoscroll('start');
},function () {
$(".example").jcarouselAutoscroll('stop');
})

Change jQuery .cycle function value on click

this is my first post on stackoverflow, so please let me know if I've asked my question correctly, and if my terminology is incorrect at any point. Thank you.
I'm using jQuery and the Cycle plugin. I have about 18 images that rotate with no delay. You can view a working example of this here: (http://dev.ctsciencecenter.org/freeze-frame/).
I'm attempting to change the 'speed' value, eventually with a jQuery UI slider, but for now with a link and the .click function.
Here is the Cycle function:
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
I would like to change the 'speed' value to 'slow' when a link with the id #example is clicked.
I really appreciate the help, could you please also tell me the term for properties like 'speed' and 'fx', are these called 'Object Properties?".

Let me know if this is what you are looking for:
$(function () {
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'fast'
});
$('#example').click(function (e) {
e.preventDefault();
$('#slideshow').unbind();
$('#slideshow').cycle({
fx: 'none',
timeout: 1,
continuation: 1,
speed: 'slow'
});
});
});