I am implementing David DeSandro's JQuery Masonry plugin for a site i'm trying to build. I am trying to run a callback on the masonry function so that i can scroll to the relevant part in the page after it runs but for some reason can't get it to work when I have the animation turned on. The docs can be seen at http://desandro.com/demo/masonry/docs/#options. When I run the following code it works fine and the alert only happens once the masonry function has run:
$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: false
},
function()
{
alert("Finished?");
}
);
However when i run the following code with the animation options included the alert runs before the animation has finished:
$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
duration: speed,
queue: false
}
},
function()
{
alert("Finished?");
}
);
I would really appreciate any pointers anyone can give me as to how to prevent the alert happening until the animation has completed as i'm stumped! Thanks so much for your help,
Dave
There's something you can do, but it to work in your sense requires a small hack:
The object to animationOptions passed can take a complete property, which defines a function which will be fired after the animation is complete.
The problem is, this will be the case for each and every of your blocks, since every block is animated separately. But you could get around this like so:
var boxCount = $wall.find('box').size(),
counter = 0,
onComplete = function() {
if (counter < boxCount) counter++;
else {
alert("Finished?"); // <-- Here goes your actual callback!
counter = 0;
}
}
$wall.masonry({
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
duration: speed,
queue: false,
complete: onComplete
}
});
Related
I'm trying to integrate jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the plugin - jquery cycle2 plugin.
Everything was fine until I discovered that mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.
On GitHub I found a plugin (https://github.com/amondit/jquery.scrollsteps.js) designed specifically for this plugin to handle with this problem.
I used the file jquery.scrollsteps-full-min.js.
That's how I call the plugin:
$(function() {
var $slider = $('.slider_overlay');
// slider initialize
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list',
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
// initialize scrollsteps plugin
$slider.scrollsteps({
up: $slider.cycle('prev'),
down: $slider.cycle('next')
});
});
And, when I start to scroll the page up and down, I get the following error message from firebug console:
"TypeError: i.down is not a function" or "TypeError: i.up is not a function"
Perhaps someone has any ideas or thoughts why this error may occur?
If I use a default mousewheel init (without scrollsteps plugin) - everything worked fine:
$slider.mousewheel(function(e) {
if (e.deltaY > 0) {
$slider.cycle('prev');
} else {
$slider.cycle('next');
}
});
but as I mentioned it triggers a lot of scrolling events.
Maybe I'm solve this problem incorrectly ? If somebody knows other solutions - will be very grateful for the help.
Аnswer )
$(function() {
var $slider = $('.slider_overlay');
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list'
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
function prev() {
$slider.cycle('prev')
}
function next() {
$slider.cycle('next')
}
$slider.scrollsteps({
up: prev,
down: next
});
});
I've implemented the baraja jquery plugin for a section on a 'web app' that I need to create.
Rather than the plugin spreading the cards on the click of a button, I've opted to alter the script and spread out the cards on hover. On the face of it this works but if you hover over the cards and back off quickly before the animation is finished the cards will stay open. And then when you hover over the 'deck' they close. I've created a codepen below to show this:
http://codepen.io/moy/pen/OPyGgw
I've tried using .stop(); but it doesn't seem to have an impact on the result. Can anyone help me with this?
Additionally I'd like the deck to be open on page load, then close after a second or 2. I tried this with $( document ).ready() including the baraja.fan call but that didn't trigger it - any ideas?
this one really tickled me ;) tried several things, but - as already told - the plugin doesn't expect to get the close animation call faster, then the opening animation will run.
so finally i build you the following.
- opening the fan, right at document ready
- created a timeout for the mouseleave, to wait for the opening animation duration, before closing it - you will have a 400ms delay when mouseleave the element, but it will close, even when you've been to fast...
$(document).ready(function () {
if ($("#baraja-el").length) {
var $el = $('#baraja-el');
baraja = $el.baraja();
}
//initial open
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
$('.baraja-container').addClass('open');
// navigation
$('#baraja-prev').on('click', function (event) {
baraja.previous();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1000") {
$(this).addClass('visited');
}
});
});
$('#baraja-next').on('click', function (event) {
baraja.next();
$('.baraja-container li').each(function () {
if ($(this).css('z-index') === "1010") {
$(this).addClass('visited');
}
});
});
$('.baraja-container').hover(function (event) {
if(!$(this).hasClass('open'))
{
$(this).addClass('open');
baraja.fan({
speed: 400,
easing: 'ease-in-out',
range: 80,
direction: 'right',
origin: {
x: 0,
y: 0
},
center: true
});
}
}, function (event) {
curBarCon = $(this);
setTimeout(function(){
curBarCon.removeClass('open');
baraja.close();
}, 400);
});
$('.baraja-container li').click(function () {
$(this).addClass('visited');
});
});
since i fiddled in your codepen, you should have the working version here: http://codepen.io/moy/pen/OPyGgw
but... it's really no perfect solution. i'd suggest to get another plugin or rework baraja to get callback functions, which would test if the animation is currently running and dequeue them if needed.
rgrds,
E
I have a timeline definition which lists selectors and a list of delays and animations to apply to that object. You can specify that the steps for a particular object be looped.
Here is the function that's used to queue the animations:
function animateWithQueue(e, obj) {
if ($.queue(e[0]).length == 0) {
e.queue(function doNext(next) {
$.each(obj.steps, function(i, step) {
e.delay(step.pause).animate(step.anim, step.options);
});
if (obj.loop) {
e.queue(doNext);
}
next();
});
}
}
Here is the timeline information
var timeline = {
'.square': {
loop: true,
steps: [
{ pause: 800, anim: { right: '+=200' }, options: { duration: 400} },
{ pause: 1000, anim: { right: '-=200' }, options: { duration: 400} }
]
},
'.circle': {
loop: true,
steps: [
{ pause: 1200, anim: { top: '+=200' }, options: { duration: 400} },
{ pause: 1200, anim: { top: '-=200' }, options: { duration: 400} }
]
}
};
And here is the function that puts the timeline into the above animate function:
$.each(timeline, function(selector, obj) {
animateWithQueue($(selector), obj);
});
Here is a full example. http://jsfiddle.net/sprintstar/Tdads/
This code appears to work fine, the animations loop and the stop button can be clicked to stop the animations, clear the queues etc. However the issue we're facing can be triggered by hitting stop and start over and over (say 10 times). Then notice that the delays are not functioning correctly any more, and the shapes move about much faster.
Why is this, and how can it be fixed?
Something is not working quite right with delay...
As a work around, I've replaced it with doTimeout in this fiddle, so the following:
e.delay(step.pause).animate(step.anim, step.options);
Becomes:
var timerName = e[0].className + $.now();
timeouts.push(timerName);
e.queue(function(next) {
e.doTimeout(timerName, step.pause, function() {
this.animate(step.anim, step.options);
next();
});
});
timeouts is an array of unique timeout ids - each of which is cleared when the stop button is pressed.
As I've said, more of a workaround than a fix, as you'll also need to reset the position of the elements on stop too. (notice I've removed the += and -= from the top/right definitions)
looking at your stop handler i woudl suspect the .stop() to be miss placed.
i would target it on .circle and .square instead of the holding div.
Had an issue once with animate, as the element was moving faster and faster and faster and cam to the conclusion that animate was stacking up on himself.
api.jquery.com/clearQueue/ and http://api.jquery.com/stop/ might be usefull
I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});
Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj
I've created somewhat of a complicated slider with jquery Cycle. You can see it running perfectly here
However, when you click it a bunch of times (before the slide has finished its transition), it starts to go wacky and even hides the text..
Here is my code:
$('#dmzSlideHolder').cycle({
fx: 'uncover',
pager: '#slideNav',
timeout: '8000',
before: function() {
var dmzTitle = $('.dmzSlideTitle p', this).html() + '<span class="arrow">»</span>';
$('#slideTitle').stop().animate({width: 1}, 1000);
$('#slideTitle p').stop().html(dmzTitle).hide().delay(2000).slideDown();
},
after: function() {
var dmzTitle = $('.dmzSlideTitle', this);
$('#slideTitle').stop().animate({width: 575}, 1000);
},
});
Any ideas? I thought .stop() would remedy this, but it didnt..
Figured it out. Had to set the .slideUp and .slidedown to happen on the callback of .animate()