Anything Slider: Issues When Dynamically Modifying Options

[wis]

I am trying to dynamically modify one or more of the slider options at run-time based upon various events including user interaction (selecting a preference for example) and I can’t seem to get it to work after a day of fighting with it (and it seems so easy :-)

I used the documentation at https://github.com/CSS-Tricks/AnythingSlider/wiki/Usage as one of my guides but even the simplest cases don’t seem to work.

I’ve created a JSFiddle at http://jsfiddle.net/webis/yDR53/ to give an example of simple hiding or showing the the side navigation arrows. Note that when I single step through the example with Firebug it is setting the values properly but the slider doesn’t change.

This is just an example and I can show you many other options that don’t work although, to be fair I didn’t try every single option, just the 12-15 that I need.

I’m going to post this on GitHub also incase you don’t really do support here.

[Mottie]

Hi @wis!

Yeah the building and enabling of the arrows is one of the functions that is only done during the initialization. I didn’t include it in the update because it would then have to remove the arrows if they were already there – which isn’t really difficult, but I guess I didn’t think about while writing the code.

The easiest solution would be to just hide the arrows completely ([demo](http://jsfiddle.net/Mottie/yDR53/1/)):

function wisSW_ShowSliderChanges()
{
var wantNavigationArrows = (jQuery(“#wisSW_WantNavigationArrows :radio:checked”).val() == “Yes”);

var sliderData = jQuery(“#wisSW_SampleSlider”).data(“AnythingSlider”);

sliderData.$forward.add( sliderData.$back ).toggle( wantNavigationArrows );
}

If that doesn’t work for you, I can work on moving the build/enable arrows scripts into the updating code.

[wis]

Thanks!

That workaround seems to work for that special case but I’ve had problems with many of the options so I was looking either for understanding what I was doing wrong or reporting a bug in updating options.

Do the options not really work and do I need to come up with special cases for everything I want to do?

I created another example, I changed the option from the arrows to the mode and it has problems too (try typing in vertical!); try it at http://jsfiddle.net/webis/s5sq3/1/.

As an aside, how are the transitions (top, bottom, left, right, expand, grow, fade, etc.) set? What option do I use to update them?

[Mottie]

Hi @wis!

Well, the `updateSlider()` function really only adds/removes slider panels and updates the navigation. I wasn’t expecting anyone to want to change all of the options, although I’m sure there are a few options that are checked dynamically so changing them using your method would work, but I never made a list.

There are a few work arounds/hacks I could make for you without changing the addon, but that’s probably not ideal for you.

As for the transitions, they are done by the FX extension. And all FX data is stored within `$(‘#slider’).data(‘AnythingSlider’).fx` which is dynamic to allow the [FX Builder](http://css-tricks.github.io/AnythingSlider-Fx-Builder/) to work. As a quick example, update the fx as follows:

$(‘#slider’).data(‘AnythingSlider’).fx = {
“.text” : [ “top”, “500px”, “”, “easeOutBounce” ]
}

So, I guess I could start working on making more options work when you use `updateSlider()` but my time is very limited right now and I’m not sure how long it would take me to complete these changes.

[wis]

HI @Mottie,

Thanks again and thanks for your quick response.

Well, you’ve explained all the problems I and a colleague have been having over the last day or two! I certainly have less hair now than I did :-)

What I kept seeing was the options data was getting changed correctly but the changes weren’t being reflected in the slider on the page.

As a temporary solution, maybe I could make a list of ones with problems and we could come up with some workarounds as well as which ones do work.

Long term, my opinion would be that if you have data options and you have a method named “updateSlider” (and there is documentation showing it working and saying “almost all of the options can be modified on the fly using the API”) it is reasonable for the average developer to expect them to work so, for completeness, if for no other reason, you might want to make them all work, time permitting of course.

Either that or just say they don’t work except for the few that do; a list of those would be helpful. And certainly any workarounds could be put in the documentation for others to see.

Would completely destroying the slider and rebuilding it dynamically from scratch work?

Obviously it isn’t a good solution but it might keep the client satisfied while coming up with a better solution.

[Mottie]

Sorry, I think I spend more time writing documentation than I do working on code. So, I’m sure I missed a few things, there is no way to unit test documentation ;) LOL

I wouldn’t mind some help with the docs either, it’s all wiki. Or, a list of options that you need to be dynamically modified so I have something to work with.

That’s probably another thing the slider needs, a destroy method, which would work in your case, but it might also cause some jittery-ness (I like made-up words) when removing, then restoring the current slide position. I’ll see what I can do later tonight.

[wis]

Hi @Mottie,

I spent a little time figuring out some of the options and what happens when you change them dynamically at run-time.

I created a spreadsheet but I don’t know how to get it to you but here is a summary of what I found:

These definitely have problems:

1) AutoPlay: It doesn’t automatically start autoplay and the controls do not show and hide unless you do the workaround but if you use updateSlider() afterwards it “undoes” the workaround and the controls will not show or hide properly:

The workaround to show/hide the controls is:


var sliderData = jQuery('#Slider').data('AnythingSlider');
sliderData.$startStop.toggle(true);


Also, to start auto play:


sliderData.options.autoPlay = true;
sliderData.startStop(true);


2) enableArrows / buildArrows: this doesn’t show the arrows unless you do the below workaround but even with the workaround if you use updateSlider() afterwards the controls will not show or hide properly.

The workaround is:


var sliderData = jQuery('#wisSW_SampleSlider').data('AnythingSlider');
sliderData.$forward.add(sliderData.$back).toggle(wantNavigationArrows);


3) enableNavigation / buildNavigation: this doesn’t show the slide navigation tabs unless you do the below workaround with one caveat, if you have more slides than the maximum number of tabs being shown and the left and right arrows show to allow you to go beyond the bounds of the visible tabs, the arrows never hide even if the tabs are hidden.

And, like above, the the controls don’t show or hide properly if updateSlider() is used.

The workaround is:


var sliderData = jQuery('#wisSW_SampleSlider').data('AnythingSlider');
sliderData.$nav.toggle(wantSlideNumbers);


To hide the << and >> buttons next to the slide number you must do this:


jQuery('.anythingControls ul').hide();


4) mode: this only seems to work for horizontal. Fade every now and then appears to work but if you go to the start or end then all content disappears. Also, if you change to fade or vertical and then back to horizontal, even horizontal stops working.

5) navigationSize: this works but you must use updateSlider() after updating navigationSize otherwise controls will not show up correctly.

6) animationTime, easing, hashTags, delay, and delayBeforeAnimate: appear to work correctly in my minimal testing

7) top, bottom, left, and right transitions: appears to work but you must specify the “distance” parameter or it doesn’t.

8) fade transition: it works but you must not have easing, distance or size or all content in the slider disappears.

9) expand, grow, listLR, and listRL transitions: appear to work but if you then change it to, at least, top, bottom, left and right (I didn’t check the other 3) it messes up the content; i may or may not have something to do with the distance as I saw some weird things related to it and the transitions.

10) caption-top, caption-right, caption-bottom, and caption-left: works but these things are true (mostly you’ve documented this but I verified it): you must define the container initially; there may be problems if port view changes; each caption must be in separate div and must have the transition size defined.

I did try having all captions in one slider and that didn’t work (don’t know if it’s supposed to) but haven’t tried just having 2 or 3 captions in a single slider.

Hope that helps you and others, also if you have any fixes and workarounds (or corrections to my workarounds I’d love to hear about them) and anything else I find out I’ll let you know.

[Mottie]

@wis Thanks for the detailed information!

I’ll try to spend some time tomorrow looking more closely at this.

[Mottie]

@wis

Ok, this might take me a while to do, but I think I’ll go this route:

1) All build options (`buildArrows`, `buildNavigation` & `buildStartStop`) are only going to work on initialization. It just adds too much code to check if something is already in place, or if was appended somewhere else on the page, etc.

2) I’ll try make the following options, or at least make sure they are dynamic:

##**Options you mentioned**
* `enableArrows`
* `enableNavigation`
* `enableStartStop`
* `enableKeyboard`
* `toggleArrows`
* `toggleControls`
* `autoPlay`
* `mode`
* `navigationSize`
* All fx extension transitions

##**core options:**
* `showMultiple`
* `changeBy`
* `hashTags`
* `infiniteSlides`

##**slideshow options:**
* `autoPlay`
* `autoPlayLocked`
* `autoPlayDelayed`
* `pauseOnHover`
* `stopAtEnd`

##**times**
* `delay`
* `resumeDelay`
* `animationTime`
* `delayBeforeAnimate`

[Author]

Posts