Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

navigation children have incorrect active class bug #63

Closed
DrizzlyOwl opened this issue Nov 2, 2015 · 7 comments
Closed

navigation children have incorrect active class bug #63

DrizzlyOwl opened this issue Nov 2, 2015 · 7 comments

Comments

@DrizzlyOwl
Copy link

All children of .flipster__nav seem to have the class flipster__nav__item--current applied to them even if they are not currently selected.

My config is:

flipContainer.flipster({
    itemContainer: flipItemContainer,
    itemSelector: flipItem,
    loop: true,
    autoplay: 3000,
    style: 'flat',
    spacing: -0.2,
    scrollwheel: false,
    nav: 'after',
    buttons: false,
})

Resulting HTML:

[...]
<ul class="flipster__nav" role="navigation">
    <li class="flipster__nav__item flipster__nav__item--current">
        <a href="#" class="flipster__nav__link">0</a>
    </li>
    <li class="flipster__nav__item flipster__nav__item--current">
        <a href="#" class="flipster__nav__link">1</a>
    </li>
    <li class="flipster__nav__item flipster__nav__item--current">
        <a href="#" class="flipster__nav__link">2</a>
    </li>
    [...]
</ul>
@DrizzlyOwl DrizzlyOwl changed the title navigation class bug navigation children have incorrect active class bug Nov 2, 2015
@shshaw
Copy link
Collaborator

shshaw commented Nov 2, 2015

I've attempted to recreate the issue, but I'm not getting the same results.
http://codepen.io/shshaw/pen/JYBKPZ

Can you fork it to be more like your setup, or find a way to recreate the bug?

@DrizzlyOwl
Copy link
Author

As requested - forked and modified to be as close as possible to my setup.
http://codepen.io/DrizzlyOwl/pen/YyjWyg?editors=101

@shshaw
Copy link
Collaborator

shshaw commented Nov 2, 2015

Ah yes. I do see that. Not sure of the cause... I'll have to dig into the nav code a bit more to debug. Thanks for pointing this out!

@DrizzlyOwl
Copy link
Author

I believe it's caused by updateNav() as I can see when a transition starts the classes are removed and then re-added once the transition stops. I think there needs to be a refinement to the index check before adding the class

@shshaw
Copy link
Collaborator

shshaw commented Nov 2, 2015

The index is checked in the filter call, but I believe the check for the nonexistant data('category') is causing it to return true when the index check fails.

@shshaw
Copy link
Collaborator

shshaw commented Nov 2, 2015

Ah yes, that's it. Adding a check to see if the category variable is set fixes it. I'll do a little more testing and push a fix, but you can see it working here http://codepen.io/shshaw/pen/JYBKBz?editors=001

shshaw pushed a commit that referenced this issue Nov 2, 2015
@shshaw
Copy link
Collaborator

shshaw commented Nov 2, 2015

Should be good to go now. Download the latest version and test again in your project. If you run into any other issues, please let us know!

@shshaw shshaw closed this as completed Nov 2, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants