Grow your CSS skills. Land your dream job.

AnythingSlider – possible 2 menus?

  • # October 3, 2012 at 5:56 pm

    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?

    # October 5, 2012 at 8:49 am

    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

    # October 5, 2012 at 10:57 am

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

    # October 5, 2012 at 1:58 pm

    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/

    # October 10, 2012 at 10:57 am

    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/

    # October 10, 2012 at 6:18 pm

    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.

    # October 11, 2012 at 1:06 pm

    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
    });​

    # October 11, 2012 at 6:31 pm

    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/

    # October 11, 2012 at 8:24 pm

    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.

    # October 12, 2012 at 11:03 am

    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

    # October 12, 2012 at 2:15 pm

    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
    });​

    # October 18, 2012 at 3:26 pm

    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/

    # October 18, 2012 at 5:49 pm

    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?

    # October 18, 2012 at 6:00 pm

    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/

    # November 26, 2012 at 2:17 pm

    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!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".