resetting flexslider on element click - flexslider

I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.
The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.
I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)
the code in the footer.php is pretty standard issue at the moment:
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
});
});

I know it's been long since this question was posted, but it might help somebody.
I actually faced the same problem. After some poking around I managed to get it working using the following code:
// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");
// Unset the animating flag so we can move back to the first slide quickly
slider.animating = false;
// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);
If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);
I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.

think the answer might lie in the start callback function. Try something like this (untested)
$('.button').click(function() {
$('.flexslider').flexslider({
controlNav: true,
directionNav: false,
slideToStart: 0,
pauseOnHover: true,
start: function(slider) {
if (slider.currentSlide != 0) {
slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
}
}
});
});

use the new api at line 1056 in flexslider like
' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'

Related

Wix element comes on and off when I hover on it?

I'm building a website using Wix.com and I'm trying to add a feature with code. I want a button to appear only when I hover over a document on the page. So far the button appears the way I want, but when I try to click on it, it keeps flickering so it's hard for me to click it.
I'm pretty new to this so I just tried basic debugging But still I don't know why this is happening. Also, I couldn't find much help from Wix forum
here are the code and a screenshot from the site (code examples is the button)
let rollLeft = {
"duration": 200,
"direction": "left"
};
let rollRight = {
"duration": 200,
"direction": "right"
};
$w.onReady(function () {
//TODO: write your page related code here...
});
export function document15_mouseIn(event) {
//Add your code for this event here:
if(!$w('#button1').isVisible)
{
$w('#button1').show("roll", rollLeft);
}
}
export function document15_mouseOut(event) {
//Add your code for this event here:
if($w('#button1').isVisible)
{
$w('#button1').hide("roll", rollRight);
}
}
Without seeing it in action this is a bit of a guess, but it looks like when you move to the button, you leave the pdf, causing the button to hide.
I can think of at least two ways to get around this:
Add a delay to the effect options to give a user enough time to click the button before it starts to disappear.
Add a transparent box beneath the file icon and the button. Use that box to trigger the show and the hide on hover, instead of the file icon. That way the hide won't trigger when the user tries to click the button.

preventing pause between jquery animations

I have a jquery animation set up, the object fades in and slides down from the top of the screen, and then it should keep moving and fade out. Right now it fades in, animates down, then pauses, then completes the animation. I'd really like to get rid of the pause, but I'm not sure how. I have the animation set up as a call back right now. You can see it here:
http://jsbin.com/uniyix/12/edit
thanks for any help I can get on this!
Information can be found here at the Jquery animate() Documentation. More specifically, the easing parameter.
There are two kinds of easing: one is swing (which is default and features an increase of velocity at the beginning of the animation as well as a slow down at the end, which can look like a "pause" if you have multiple animations set) and the other one is linear.
Linear has no slowdown as the speed is constant throughout. The easing parameter can be defined right after the speed parameter.
So this:
$('#example').animate({
'marginLeft' : "+=30",
}, 3000, function() {
});
Would become this:
$('#example').animate({
'marginLeft' : "+=30",
}, 3000, "linear", function() {
});
This should get rid of the pause as the element will be in a constant velocity throughout the entire animation.

After event not fired using fade flexslider iPad

I am using the flexslider after event to trigger another function but the after event in flexslider does not work in combination with fade on an iPad.
Using slide as animation solves the problem but I need fade instead of slide.
$('.flexslider').flexslider({
slideshow: true,
animation: "fade",
animationSpeed: 1000,
slideshowSpeed: 5000,
directionNav: false,
controlNav: false,
start: function(){animation()},
after: function(){animation()},
before: function(){}
});
I had a similar issue, I needed to execute a function in the after callback and it didn't fire off on ipad.
I made a quick workaround and I've used the before method instead, it didn't have any downsides for me because I just needed to update an external slide counter.
I have looked into the flexslider 2.1 code and I think that the lines 520-521 or 527-530 are causing problems here:
520-521
slider.slides.eq(slider.currentSlide).fadeOut(vars.animationSpeed, vars.easing);
slider.slides.eq(target).fadeIn(vars.animationSpeed, vars.easing, slider.wrapup);
527-530
slider.slides.eq(slider.currentSlide).bind("webkitTransitionEnd transitionend", function() {
// API: after() animation Callback
vars.after(slider);
});
You can debug it if you want, I hope you'll find it useful.

Re-Starting Jquery Tools Scrollable after Stopping - Using API

I'm using the Jquery Tools Scrollable plugin like this example, and I would like to have custom buttons that would make it Start and Stop. I can get it to stop autoscrolling, but I can't get it to resume autoscrolling from where I stopped it.
Here's how I initialize it:
$(document).ready(function() {
// heeeeeeeeeeere we go.
var root = $("#chained").scrollable({circular: true, mousewheel: true,
easing:'easeInOutQuint', speed: 1200}).navigator().autoscroll({
interval: 3000
});
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
From this thread, I can make it "Stop." I also know that I can also make it "Begin" - go to the first slide - by using these:
Start
Stop
Although it does go to the first pane/slide, it not longer autoscrolls. Is there a way to get it to resume autoscrolling in the location where I "Stopped" it? Also, is the window.api=root.data("scrollable"); approach deprecated? Should I approach that differently?
TIA for any suggestions.

dojo connect mouseover and mouseout

When setting up dojo connections to onmouseover and onmouseout, and then adding content on mouseover, dojo fires the onmouseout event at once, since there is new content. Example:
dojo.query(".star").parent().connect("onmouseover", function() {
dojo.query("span", this).addContent("<img src='star-hover.jpg'>");
}).connect("onmouseout", function() {
dojo.destroy(dojo.query("img", this)[0]);
});
The parent() is a <td>, and the .star is a span. I want to add the hover image whenever the user hovers the table cell. It works as long as the cursor doesn't hover the image, because that will result in some serious blinking. Is this deliberate? And is there a way around it?
Edit: Just tried out something similar with jQuery, and it works as expected (at least as I expected it to work.)
$(".star").parent().hover(function() {
$("span", this).append("<img src='star-hover.jpg'>");
}, function() {
$("img", this).remove();
});
This will show the image when hovering, and remove only when moving the cursor outside the table cell.
The reason it works with jQuery in your example is because .hover uses the normalized onmouseenter/onmouseleave events. If you were to connect to those, it would work in Dojo as expected. Also, a simulation of .hover for Dojo would be:
dojo.NodeList.prototype.hover = function(over, out){
return this.onmouseenter(over).onmouseleave(out || over);
}
Then you'd just:
dojo.query("...").hover(function(e){ .. }, function(e){ .. });
The differences between mouseeneter and mouseover are why you are seeing the behavior of an immediate onmouseout firing.