AnythingSlider sub-menus

[tonesofheresy]

Hello,
I've researched this quite thoroughly and am hoping someone can help with my issue. Basically, I have a 6-link navigation and if you mouse over 3 of them, you get sub-choices. i want to have some animation, so I'm using AnythingSlider to navigate between the 6 links (and it's working fine) but I'm not quite sure how to scroll between the sub-sections. I.e. I have an "about" section that has 3 sublinks....What I'd like to do is have the page scroll in from the right or left and display the first sublink (AnythingSlider is golden for this) but then if someone was to click a sublink of "about," I'd like it to scroll to that portion of the site. If anyone has ideas for other plugins or ways to use AnythingSlider to do this, I'd really appreciate it. I'm not much of a programmer, but JavaScript often makes more sense to me than plugins and if I have to write the basic code myself, I'm okay with that. I'd just like to know if someone has had a similar experience and can provide some insight. Thanks!

[Mottie]

Hi @tonesofheresy!

Maybe it's still too early in the morning (no caffeine yet), but I don't quite get what you are describing. From what I did gather, you wanted to add some links inside of the slider? Maybe this demo would help?

If that isn't what you wanted, then could you modify this demo with the basics of what you want. Thanks!

Edit: Did you know there are a bunch of extra demos on the home wiki page?

[tonesofheresy]

I've looked at all the demos and they've helped tremendously with understanding the basics of how AnythingSlider works, but my issue goes a little further. I'm also new to using jQuery as well as its plugins so my entire process may be completely wrong, but I've uploaded my site so far with just some filler text that might help to better explain my issue.

http://www.vinylwines.com/ac_new/

Basically, for the main navigation, if you mouse over them, you'll notice that some have sub-menus. The way it is right now, you can click on the main links and the AnythingSlider does its job perfectly. But on one of the links that has sub-links, say "trade," I want the main "trade" section to slide in from the left like it does, but then I want each of the sub-links to scroll vertically within that section. So let's assume someone is currently viewing the "club" page since it has no sub-links and was to then mouse over "trade" and click on "labels." I'd want the main Trade slide to slide in while at the same time scrolling down to the 4th item. I was really tired when I wrote that last night but it just occurred to me that I may simply be able to use additional sliders within slides, but before I attempt this, I was hoping to maybe find a better method. Thanks in advance for your help! I hope this makes a little more sense than my previous post.

[Mottie]

Hiya!

Hmm, AnythingSlider isn't really set up to work with sub-panels, but I think it might be possible to set the panel to have its overflow set to hidden; then make the sub menu set the scrollTop of each panel. I'll try to work on a demo for you when I have some time.

[Mottie]

LOL my darn OCD kicked in... here is a demo

HTML

<nav class="submenu">Slide 2 submenu:
    <a href="#" data-index="0">img 1</a>
    <a href="#" data-index="1">img 2</a>
    <a href="#" data-index="2">img 3</a>
    <a href="#" data-index="3">img 4</a>
</nav>
<ul id="slider">
    <li><img src="http://placekitten.com/300/200" alt="" /></li>
    <li class="panel2">
        <!--
          the imgs within panel2 can be anything (div or article) with a class name
          of "subitem" and must be the same size as the slider
        -->
        <img class="subitem" src="http://placehold.it/300x200" alt="" />
        <img class="subitem" src="http://placekitten.com/300/200" alt="" />
        <img class="subitem" src="http://placedog.com/300/200" alt="" />
        <img class="subitem" src="http://placebear.com/300/200" alt="" />
    </li>
    <li><img src="http://placebear.com/300/200" alt="" /></li>
    <li><img src="http://lorempixel.com/300/200" alt="" /></li>
    <li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>

Script

$(function(){

    var $slider = $('#slider').anythingSlider(),
    $panel2 = $('#slider .panel2');

    $('.submenu a').on('click', function(){
        var indx = $(this).data('index'),
            top = $panel2.scrollTop() + $panel2.find('.subitem:eq(' + indx + ')').position().top,
            slider = $slider.data('AnythingSlider');
        if (slider.currentPage === 2) {
            // animate to image/div directly
            $panel2.stop(true, true).animate({ scrollTop : top }, 800);
        } else {
            // animate to submenu after we scroll to the page
            slider.gotoPage(2, false, function(){
                $panel2.stop(true, true).animate({ scrollTop : top }, 800);
            });
        }
    });

});

[tonesofheresy]

Wow that was fast! This stuff takes me days. How would you recommend
learning this? I love building websites but it takes me a very long time.
Any books you'd recommend?
On Apr 17, 2013 5:02 PM, "Rob G" notifications@github.com wrote:

LOL my darn OCD kicked in... here is a demohttp://jsfiddle.net/Mottie/ycUB6/5399/

HTML

Slide 2 submenu: img 1 img 2 img 3 img 4

• 
• 
• 
• 
• 

Script

$(function(){

var $slider = $('#slider').anythingSlider(),
$panel2 = $('#slider .panel2');

$('.submenu a').on('click', function(){
    var indx = $(this).data('index'),
        top = $panel2.scrollTop() + $panel2.find('.subitem:eq(' + indx + ')').position().top,
        slider = $slider.data('AnythingSlider');
    if (slider.currentPage === 2) {
        // animate to image/div directly
        $panel2.stop(true, true).animate({ scrollTop : top }, 800);
    } else {
        // animate to submenu after we scroll to the page
        slider.gotoPage(2, false, function(){
            $panel2.stop(true, true).animate({ scrollTop : top }, 800);
        });
    }
});

});

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/522#issuecomment-16541086
.

[Mottie]

LOL, I'm the wrong person to ask about what books, I learned jQuery by example. I've never had any formal programming education. Basically when I started learning, I would look at other people's code snippets and/or plugins. Some of it was really bad, some was very good. I also learned a lot by looking at some of the popular libraries, like back when jQuery's code was pretty straight-forward and not so convoluted (to minimize the code size) like it is now. But mostly I learned from experimenting and asking questions on StackOverflow - just don't ask questions there without at least searching google first and sharing some code or a demo.

As a side note, when I first saw your github user name, I read it as Tons of Hersey... it made me crave chocolate. LOL

[tonesofheresy]

Fair enough. That's very impressive! I get intimidated by all the brilliant
coders out there. What are your thoughts on learning pure JavaScript before
working with a library like jQuery? I've gotten mixed responses when I've
asked this in the past. Obviously learning raw JavaScript will take me much
longer, but in your opinion as a developer, would having that knowledge be
beneficial in making better use of plugins or would you suggest just
accepting the massive amount of contributions other developers have made
and learning to utilize them? I really want to become an efficient web
designer and have built many sites in the past, but they're definitely what
people would refer to as "hacks," which I'm trying to get away from now. I
figured a good starting point would be to study the HTML5 specs and improve
my markup and take it from there. My sites are filled with so many div tags
it's disgusting.

On Wed, Apr 17, 2013 at 6:43 PM, Rob G notifications@github.com wrote:

LOL, I'm the wrong person to ask about what books, I learned jQuery by
example. I've never had any formal programming education. Basically when I
started learning, I would look at other people's code snippets and/or
plugins. Some of it was really bad, some was very good. I also learned a
lot by looking at some of the popular libraries, like back when jQuery's
code was pretty straight-forward and not so convoluted (to minimize the
code size) like it is now. But mostly I learned from experimenting and
asking questions on StackOverflowhttp://stackoverflow.com/questions/tagged/jquery- just don't ask questions there without at least searching google first
and sharing some code or a demo.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/522#issuecomment-16544712
.

[Mottie]

I started learning javascirpt first and I got very frustrated with all of the hacks to work around IE issues.When I discovered jQuery, it made things so much easier to understand and do. So I still don't know every little detail about programming in javascript, so I do rely on jQuery alot.

I suggest you check out this thread on CSS-Tricks to get some other points-of-view. Lets continue this discussion there :P