AnythingSlider – possible 2 menus?

[FlawlessDog]

Hi,

Got the AnythingSlider and have been playing around with it.
VERY cool bit of programming.
Anyway,
I have some content that is large enough that on the default theme, it would be nice to have a duplicate menu on the top of the window as well as on the bottom.

Is this possible?

[Mottie]

Hi FlawlessDog!

Check out [this demo](http://jsfiddle.net/ycUB6/1540/). It basically duplicates and recopies the entire control panel after any changes. This makes it possible to work with any theme :)

Is that what you were looking for?

If not… rawr rawr ppfffttttt >.< LOL

[FlawlessDog]

That is exactly what I was looking for!
Thank you sooo much.
Nice kitty *marf arf bark* ^_~

[FlawlessDog]

Ok…
I made a few changes, and have left a few notes on where I am now with what I had to start with.
I could use a bit of help with the rest…

http://jsfiddle.net/ycUB6/1553/

[FlawlessDog]

Hi all,

I tried to see if I could take a little different approach on this, but to no avail.
The top menu works on the very first click, but does not work again, tho the ‘cur’ does work when you use the bottom menu.
Any ideas about this?

http://jsfiddle.net/ycUB6/1702/

[FlawlessDog]

Ok, so I’ve actually made some progress today on this thingy o.O
inorite? ^_~

Still tons of work to do on this, but so far so good.
Menu items all work including the start-stop.
http://jsfiddle.net/ycUB6/1750/

Next thing will be to work in the menu slide control and all the menu items when the number of items are limited by the navigationSize variable.

I would really like to work with someone on this thing with me, if ya can get the time.
Thanks all.

[Mottie]

Hi FlawlessDog!

Ok try [this demo](http://jsfiddle.net/Mottie/ycUB6/1773/)

var updateSecondMenu = function(e, slider) {
$(‘#anythingControlsTop a’)
.removeClass(‘cur’)
.eq(slider.targetPage).addClass(‘cur’);
$(‘#anythingControlsTop a.start-stop’)
.removeClass(‘playing’)
.eq(!slider.playing).addClass(‘playing’);
slider.navWindow(slider.targetPage);
};

$(‘#slider’).anythingSlider({
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
var dupe = slider.$controls.clone(true);
dupe.attr(‘id’, ‘anythingControlsTop’);
slider.$window.before(dupe);
slider.$controls = slider.$controls.add(dupe);
},
onSlideInit: updateSecondMenu,
onShowStop: updateSecondMenu,
navigationSize: 3
});​

[FlawlessDog]

LOLz…very cool, and so close.
After I saw what you did with slider.$controls.add(dupe);
I had to try it on a variation of your first example.
Still has the same not working trouble after that first click, but was worth the try.
It’s like the focus is being taken away after that first click…

http://jsfiddle.net/ycUB6/1786/

[Mottie]

The last demo I shared seems to work perfectly. Was there a problem with it that I didn’t notice?

The reason the demo you just shared doesn’t work is because the controls are being completely replaced using `html()`. So all of the event bindings on the controls are removed. If I made the script use `on` the way `delegate` works, then it wouldn’t be a problem.

[FlawlessDog]

The only problem was the Start-Stop text not changing.
Aside from that, it does work perfectly.
So don’t get me wrong, but I am always one to seek other ways of doing the same thing just as a learning experience for myself as I am just learning jQuery. It’s kindof like when I started to learn AS3 after all the AS1&2 I already knew. Just kindof fun for me, and makes me glad I can get excited about learning a new thing.

So, what you said just now about using html() and what it does, and replacing that with on is right up the line of things I want to learn. ^_~

Thanks in advance for whats to come, and thank you very much for playing with me on this up to now. Ish funs LOLz

[Mottie]

LOL I’m glad you’re having fun :P

Ok, try this code ([demo](http://jsfiddle.net/Mottie/ycUB6/1816/))

var updateSecondMenu = function(e, slider) {
$(‘#anythingControlsTop a’)
.removeClass(‘cur’)
.eq(slider.targetPage).addClass(‘cur’);
// update start/stop button
$(‘#anythingControlsTop a.start-stop’)
.toggleClass(‘playing’, slider.playing)
.find(‘span’).html( slider.playing ? slider.options.stopText : slider.options.startText );
// update navigation window
slider.navWindow(slider.targetPage);
};

$(‘#slider’).anythingSlider({
// Callback when the plugin finished initializing
onInitialized: function(e, slider) {
var dupe = slider.$controls.clone(true);
dupe.attr(‘id’, ‘anythingControlsTop’);
slider.$window.before(dupe);
slider.$controls = slider.$controls.add(dupe);
},
onSlideInit: updateSecondMenu,
onShowStop: updateSecondMenu,
navigationSize: 3
});​

[FlawlessDog]

Ok…that worked beautifully.
Thank you very much.

Now I has a new problem.
My client wants to keep that top menu and dump the bottom one.
I tried to use the appendControlsTo: but with the large number of menu items, and the length of those button titles, I need the tab slider.

I hacked it like this, and it does work…
http://jsfiddle.net/ycUB6/2070/

I wonder if the appendControlsTo: can be used instead, and still keep the functionality of the tab slider controls?
I tried it here, with no joy…
http://jsfiddle.net/ycUB6/2072/

[Mottie]

I have [this demo](http://jsfiddle.net/Mottie/ycUB6/79/) from the [documentation wiki demos page](https://github.com/CSS-Tricks/AnythingSlider/wiki), will it work for you?

[FlawlessDog]

That was the one I started with on that second example that gave no joy.
The problem is the tab slider controls when navigationSize: 3 is used.

That’s why I went with this one for the client.
http://jsfiddle.net/ycUB6/2070/

[FlawlessDog]

I thought I would post this link.
I was able to use the anything slider in a new project.
Is not the one I was working on in this thread(is not live yet)
This one is live.
http://randycastillomovie.com/
There is a slider used for the gallery page,
and there are two instances in the memorabilia pages.

Thank you much for all your hard work on this coolness!

[Author]

Posts