Fullpage.js: External links with active section and active slide?

Created on 13 Nov 2015 · 6Comments · Source: alvarotrigo/fullPage.js

Hello I'm making a mobile web with fullpage.js I'm triying to make an external link to a specific section/slide but its not working, after looking at why it is not working I discovered when you make an active slide or section, all external links to a section directs you to the active section and not the section/slide of the link.

This is an example of the code I'm using.

<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            anchors: ['firstPage', 'secondPage', 'thirdPage', ],
</script>
<body>
    <div id="fullpage">
        <div class="section" id="section0">content</div>
        <div class="slide" id="slide0">content</div>
        <div class="section active" id="section1">content</div>
        <div class="slide" id="slide0">content</div>
        <div class="slide active" id="slide1">content</div>
        <div class="slide" id="slide2">content</div>
        <div class="section" id="section2">content</div>
</body>

With this code when I enter the first page, what I see is the Section1 in the slide3 thats my main page, because thats the design of the navigation.

And the url looks like this www.myweb.com/#secondPage/1

But I need to make an external link to the www.myweb.com/#thirdPage (section2)

When I made the link and click it, it always sends me to the active section/slide www.myweb.com/#secondPage/1 never to the url I want to link.

But when I clear the active sections the external links, it works fine to any section. I think the problem is with the active sections/slides

How can I keep my main page #secondPage/1 (active) and make the external links to the areas I want?

Here is Alvaro Thank you.

bug fixed on dev

Source

ernex24

All 6 comments

Thanks for reporting it. I'll take a look for future releases.
If you really need it to be solved as soon as possible then contact me for an urgent request.

alvarotrigo on 13 Nov 2015

@ernex24 It's been sometime since you reported this issue but I think the structure of the code might be causing the issue. div.slides should be wrapped inside a div.section:

<div id="fullpage">
     <div class="section" id="section0">
          <div class="slide" id="slide0">
               content
          </div><!-- .slide -->
     </div> <!-- .section -->
</div>

nhylated on 2 Mar 2016

👍1

The issue is present also with a correct section/slide layout.
Making sections and/or slides active in html totally breaks the deep linking system.
I think this is a major issue.

filipp8 on 16 Mar 2016

👍1

The problem is present only if I set some section as active.
I temporarily fixed the issue by adding

if(window.location.href.indexOf("#") == -1) {
                $.fn.fullpage.silentMoveTo('myHomeSection');
}

inside the afterRender callback.
This way, if the url has no #, and we want to load our custom home section, we move to it silently, preserving the deep linking functionality.

filipp8 on 18 Mar 2016

🎉1

Fixed in the dev branch 2.9.4

alvarotrigo on 10 Mar 2017

Fixed in the latest release 2.9.4

alvarotrigo on 10 Mar 2017

Was this page helpful?

0 / 5 - 0 ratings