Develop Reference

how to get callback when scrollTo mCustomScrollbar or run function

how to get alert when scrollTo mCustomScrollbar or run function
$('.section-wrap').mCustomScrollbar("scrollTo", 0, {
scrollInertia: 1500,
scrollEasing: "easeOut",
callback:{
alert() or somefunc ();
}
});
function somefunc(){
alert();
}

Use onScroll or some other callback:
jQuery('.section-wrap').mCustomScrollbar("scrollTo", 0, {
scrollInertia: 1500,
scrollEasing: "easeOut",
callbacks: {
onScroll: function() {
// your code
alert('content scrolled...');
}
}
});

jQuery deferred - when multiple timeout tasks have completed

Having a few teething problems with $.deferred, $.when and $.done.
I'm calling a method which has a couple of tasks inside on a timer. I'm looking at getting a callback when everything inside this method has completed, including the stuff in timers, so started looking at $.when() and $.done() to achieve this.
The problem I am getting is the function is firing before the tasks have completed, immediately as the method is called. So, I started playing with $.deferred and resolve(), but haven't managed to get anything working. Without the timers, I can do it.
This is where I call the method:
$.when(cover.start()).done(function() {
console.log("Cover has started.");
});
This is the entire method:
return {
other: function() {},
start: function() {
var dfd = $.Deferred();
el.filter.animate({
"opacity": "0.6", "filter": "alpha(opacity=60)"
}, 2000, "easeInOutCirc", function() {
el.share.removeClass('fa-spin');
setTimeout(function() {
el.share.removeClass('fa-cog').addClass('fa-bars');
},1000);
setTimeout(function() {
el.scroll.animate({
"opacity": "1",
"bottom": "40px"
}, 1200, "easeOutBounce", function() {
var pulseOptions = { opacity: "0" };
setTimeout(function() {
el.scroll.pulse(pulseOptions, {
duration : 400,
pulses: 3,
interval: 500,
returnDelay: 800
});
}, 2000);
dfd.resolve();
});
}, 2000);
return dfd.promise();
});
}
} // end return
As you can see, after my original attempt failed, I added dfd.resolve() to where I want the callback and tried to return the promise. However, the function still fires too early. Where am I going wrong?

The problem is, you need to return promise from the start method
return {
other: function () {},
start: function () {
var dfd = $.Deferred();
el.filter.animate({
"opacity": "0.6",
"filter": "alpha(opacity=60)"
}, 2000, "easeInOutCirc", function () {
el.share.removeClass('fa-spin');
setTimeout(function () {
el.share.removeClass('fa-cog').addClass('fa-bars');
}, 1000);
setTimeout(function () {
el.scroll.animate({
"opacity": "1",
"bottom": "40px"
}, 1200, "easeOutBounce", function () {
var pulseOptions = {
opacity: "0"
};
setTimeout(function () {
el.scroll.pulse(pulseOptions, {
duration: 400,
pulses: 3,
interval: 500,
returnDelay: 800
});
}, 2000);
dfd.resolve();
});
}, 2000);
});
//need to return from start
return dfd.promise();
}
} // end return

Not fishing to steal APJ's rep' but out of interest, you could avoid callback hell by exploiting .delay() and .promise(), both of which relate to the default "fx" animation queue.
Something along the following lines would fix the problem, and would be more readable :
//animation maps
var maps = [];
maps[0] = { 'opacity':0.6, 'filter':'alpha(opacity=60)' };
maps[1] = { 'opacity':1, 'bottom':'40px' };
maps[2] = { 'opacity':0 };
maps[3] = { 'duration':400, 'pulses':3, 'interval':500, 'returnDelay':800 };
//animation functions
var f = [];
f[0] = function () {
return el.filter.animate(maps[0], 2000, "easeInOutCirc").promise();
};
f[1] = function () {
return el.share.removeClass('fa-spin').delay(1000).promise();
};
f[2] = function () {
return el.share.removeClass('fa-cog').addClass('fa-bars').delay(1000).promise();
};
f[3] = function () {
el.scroll.animate(maps[1], 1200, "easeOutBounce").promise();
}
f[4] = function () {
return el.scroll.delay(2000).promise();//delay() could be called on any element. `el.scroll` is arbitrary.
};
f[5] = function () {
el.scroll.pulse(maps[2], maps[3]);
};
return {
other: function () {},
start: function () {
//animation sequence
var p = f[0]().then(f[1]).then(f[2]).then(f[3]);
p.then(f[4]).then(f[5]);
return p;//<<<< and here's the all important return
}
}
Not sure this is 100% correct - might need some work.
It's worth noting that there are performance pros and cons with this approach :
Pros: Reusable animation maps; Reusable functions;
Cons: More liberal use of promises will cause a larger memory spike.

clear/set interval on hover jquery

I am togglefading two iframes and want it to stop fading on hover. The following code is not clearing the interval.
function mapfade(){
$('#earth').fadeIn(1000).delay(3000).fadeOut(1000).delay(3000).fadeIn(1500);}
var fadestop=setInterval(function(){ mapfade () }, 3000);
$('iframe').hover(
function() {
clearInterval(fadestop);
}, function() {
fadestop=setInterval(function(){ mapfade () }, 2000);
}
);
Help is much appreciated!
Changed glaring error in code to
function mapfade(){
$('#earth').fadeToggle(2000)}
var fadestop=setInterval(function(){ mapfade () }, 3000);
$('iframe').hover(
function() {
clearInterval(fadestop);
}, function() {
fadestop=setInterval(function(){ mapfade () }, 3000);
}
);

jQuery - Return back to splash screen after user clicks on the Yes button on modal

I'm working on a prototype mobile app and having difficulty returning back to the splash screen once the user button presses the Yes button on a modal (on the login page).
This is my code so far:
$("#login_cancel").click(function () {
$(function () {
$("#login_canceldialog").dialog({
resizable: false,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
close_login()
},
"No": function () {
$(this).dialog("close");
}
}
});
});
});
jsFiddle here: http://jsfiddle.net/QaCCH/1/.

try this to avoid reloading as your own answer has nothing to do with giving the #splash a top to down slide
$(document).ready(function () {
$("#splash_logo").hide().fadeIn(1500);
animateSignup()
function animateSignup() { //new function to animate signUp_btn
$("#signup_btn").animate({
"padding-top": "+=100px"
}, "slow");
}
$("#signup_btn").click(function () {
close_splash();
$("#signup").show();
});
$("#login_btn").click(function () {
close_splash();
$("#login").show();
});
function close_splash() {
$("#splash").animate({
"margin-top": "-=568px"
}, "slow").hide(1)
//assign initial padding value to signup_btn to again animate when splash reappear
$('#signup_btn').css('padding-top', '100px');
}
function close_login() {
$('#splash').css("margin-top", "0px"); //in case slide from top to down not required
$('#login').fadeOut("fast", function () {
$('#splash').fadeIn('fast',function(){
animateSignup();
})
})
}
$("#login").hide();
$("#login_canceldialog").hide();
$("#login_btn").click(function () {
close_splash();
$("#login").show();
});
$("#login_cancel").click(function () {
$(function () {
$("#login_canceldialog").dialog({
resizable: false,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
close_login();
},
"No": function () {
$(this).dialog("close");
}
}
});
});
});
$("#signup").hide();
});
DEMO

Used - location.reload();
so code became:
function close_login() {
$("#login").animate({
"margin-top": "-=568px"
}, "slow").hide(1);
location.reload();
}

To apply .delay() on mouseenter in my plugin

I got a div, that on mouseenter, is suppose to show another div. I'm not sure how to achive this in a plugin. This is my code and what I have tried so far.
Code: JsFiddle
<div class="hover-me"></div>
<div class="show-me"></div>
var Nav = {
hover_me: $('.hover-me'),
show_me: $('.show-me'),
init: function() {
Nav.toggle_display();
console.log('init');
},
toggle_display: function() {
Nav.hover_me.mouseenter(function() {
Nav.show();
});
Nav.hover_me.mouseleave(function () {
Nav.hide();
});
},
show: function() {
Nav.show_me.fadeIn();
},
hide: function() {
Nav.show_me.fadeOut();
}
};
I tried to do this, without any luck.
Nav.hover_me.mouseenter(function() {
Nav.delay(1000).show();
});

see Jimbo's comment:
var Nav = {
// [...]
timeoutId: undefined,
// [...]
};
Nav.hover_me.mouseenter(function() {
Nav.timeoutId = setTimeout(function() {
Nav.show();
}, 1000);
});
Nav.hover_me.mouseleave(function () {
if (Nav.timeoutId) { clearTimeout(Nav.timeoutId); }
Nav.hide();
});
SEE THE FIDDLE