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

Is it possible to see the sections that are scrolled when you click on an anchor in the menu? #203

Closed
Jars-of-jam-Scheduler opened this issue Jun 30, 2020 · 6 comments
Labels

Comments

@Jars-of-jam-Scheduler
Copy link

Jars-of-jam-Scheduler commented Jun 30, 2020

Hello,

I have written the menu of anchors and my pilling JS set-up.

If I click on the anchor #3, when anchor #1 is active (that is, when I'm in the section #1), I would want to reach the section #3 but only after having seen the section #2 scrolling. Is it possible?

For the moment, what PagePiling does is: (anchor #1 -> anchor #3 ; section #1 -> section #3).
What I would want is: (anchor #1 -> anchor #3 ; section #1 -> section #2 -> section #3). Or, if you want: (anchor #1 -> anchor #2 -> anchor #3 ; section #1 -> section #2 -> section #3).

Note: the same behavior would be used for when the user clicks on a navigation bullet.

My code:

<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
</ul>

<div id="pagepiling">
	<div class="section">1 section</div>
	<div class="section">2 section</div>
	<div class="section">3 section</div>
</div>
body {
  margin: 0;
}

.section {
  height: 100vh;
}

#myMenu {
  float: left;
}
jQuery(document).ready(function() {
	jQuery('#pagepiling').pagepiling({
    sectionsColor: ['blue', 'red', 'black'],
    anchors: ['firstPage', 'secondPage', 'thirdPage'],
  });
});

Thank you! Have a nice day.
Best regards,

@alvarotrigo
Copy link
Owner

If I click on the anchor #3, when anchor #1 is active (that is, when I'm in the section #1), I would want to reach the section #3 but only after having seen the section #2 scrolling. Is it possible?

For this you should be using my other library, fullpage.js, kind of its big brother :)
A much more complete library, actively maintained, with wrappers for Vue, Angular and React and plugins for Wordpress or even a web editor online :)

@Jars-of-jam-Scheduler
Copy link
Author

Thank you!

https://alvarotrigo.com/fullPage/#page2 in this example, there is a horizontal slider within one of the vertical slider's slide. However, if I scroll, the vertical slider keeps to be active. Is there an option to allow the user to vertical scroll until and after the horizontal slider, and, when he is in the horizontal slider, to scroll inside the latter? When the horizontal slider would be finished, then the user goes to the next slide of the vertical slider, which becomes again active.

@alvarotrigo
Copy link
Owner

Sure! You'll need to acquire the Scroll Horizontally extension for that.
Here's an example:
https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html

@Jars-of-jam-Scheduler
Copy link
Author

Jars-of-jam-Scheduler commented Jul 6, 2020

Thank you. My firm has purchased your plug-in and the Horizontal Scrolling extension this morning. We are very satisfied :-)).
Just another question, I didn't find in your docs the way to add a fixed template (or section) to an horizontal slider. Since it's fixed, it would be common to each slide. This fixed template would not move.

Do you provide this feature?

@alvarotrigo
Copy link
Owner

Do you provide this feature?

Not out of the box.
The easiest way is by adding the fixed element to the body element. Then make it appear or fadeIn when you land in the section with horizontal slides.

If you do not wan to go that path, then you would have to dynamically add the element using JavaScript, it should be added inside the section but outside the fp-slides element. Just like the navigation bullets or the control arrows on the demo page:

image

@Jars-of-jam-Scheduler
Copy link
Author

Jars-of-jam-Scheduler commented Jul 6, 2020

Thank you very much. :-) Our graphic designer said your plug-in was very fluid ;)

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

No branches or pull requests

2 participants