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

Create dynamic anchors on load #209

Open
SebastianUhlig opened this issue Oct 26, 2020 · 3 comments
Open

Create dynamic anchors on load #209

SebastianUhlig opened this issue Oct 26, 2020 · 3 comments

Comments

@SebastianUhlig
Copy link

Hello. I have a problem, similar to some of the others who I've read this before.

It's about the anchors. Since I wanted mine to be dynamic with Laravel, I pack the entire pagepiling as @Push ('scripts_footer') and then let it load as soon as the dom is ready.
So far so good.
Now I wanted to set the anchors dynamically. To do this, I go to the navigation when building the page and pack the ids in a Laravel variable, which I then insert via @stack on pagepiling.
This also works, but not if you try to call the anchor via a link. But only on Firefox and some other browsers. On Chrome, for example, it works. Is there an alternative way to do this?

            $('.pagepiling').pagepiling({
                scrollingSpeed: 280,
                loopBottom: false,
                keyboardScrolling: true,
                anchors: [@stack('anchors')],
                menu: '#anchor_subnav',
                afterRender: function() {
                    $('#pp-nav').addClass('change');
                },
                afterLoad: function (anchorLink, index) {
                    if (index >= 2) {
                        $('.logo').removeClass('d-block').addClass('d-none');
                        $('.logo-dark').removeClass('d-none').addClass('d-block');
                        $('.open-menu').addClass('change');
                        $('#pp-nav').removeClass('change');
                    }

                    if (index == 1) {
                        $('.logo').removeClass('d-none').addClass('d-block');
                        $('.logo-dark').removeClass('d-block').addClass('d-none');
                        $('.open-menu').removeClass('change');
                        $('#pp-nav').addClass('change');
                    }

                    if (index == sections) {
                        $('footer').addClass('active');
                    } else {
                        $('footer').removeClass('active');
                    }
                },
            });
@alvarotrigo
Copy link
Owner

I don't see why it would only work on some browsers.
Make sure you are not using the same value for anchors as you are in any id or name attributes on the page.

@SebastianUhlig
Copy link
Author

Hey. Thank you for your answer. A reproduction would be complicated because it is based on Laravel.
I have tested it once the last days, but could not find a solution. I also don't use the same values as you said.
Could you help me in any other way instead of an test environment? Is there a kind of debug mode?

@alvarotrigo
Copy link
Owner

alvarotrigo commented Nov 11, 2020

Sure! If you purchase a business license for fullPage.js I'll take a look at your site.
That would give you 2 hours of premium support. You can get it here:
https://alvarotrigo.com/fullPage/pricing/

Note however it doesn't guarantee a solution will be found. I'll do my best, but it might not be possible to solve certain issues depending on your use case.

Otherwise I'll need an isolated reproduction.
Isolated reproductions are exactly for this, to simplify use case scenarios and make it easier to find where the problem really is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants