CODEWITHSUNDEEP
javascripthtmlmenufullpage.js
Jane
Jane

Reputation: 816

Fullpage.js navigation one item won't get active

I have used the fullPage.js script on my website and I used the menu function which detects the active page. Unfortunately I am not able to successfully add pages to the menu.

The list items show up but don't get an active state on the 4thPage when you scroll over them. I'm also unsure why the script uses firstPage etc for some items and 3rdPage for others. It can't detect the 4thPage or 5thPage but it can detect 3rdPage? What are the correct names for those 4th and 5th pages?

I currently have this in my code;

<script type="text/javascript">
        $(document).ready(function() {
            var pepe = $.fn.fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thPage' , 'lastPage'],
                menu: '#menu'
            });

        });
    </script>
</head>
<body>

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage"><h3>Ruimtevaart</h3></a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage"><h3>Home</h3></a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage"><h3>Informatie</h3></a></li>
    <li data-menuanchor="4thPage"><a href="#4thPage"><h3>Werkwijze</h3></a></li>
    <li data-menuanchor="5thPage"><a href="#5thPage"><h3>Referenties</h3></a></li>
    <li data-menuanchor="lastPage"><a href="#lastPage"><h3>Contact</h3></a></li>
</ul>

And my sections are called section0 section1 etc. So I have section 0-5. Before I had this and this worked until I added the extra sections;

<script type="text/javascript">
        $(document).ready(function() {
            var pepe = $.fn.fullpage({
                anchors: ['firstPage', 'secondPage', '3rdPage', 'lastPage'],
                menu: '#menu'
            });

        });
    </script>
</head>
<body>

<ul id="menu">
    <li data-menuanchor="firstPage"><a href="#firstPage"><h3>Home</h3></a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage"><h3>Informatie</h3></a></li>
    <li data-menuanchor="3rdPage"><a href="#3rdPage"><h3>Werkwijze</h3></a></li>
    <li data-menuanchor="lastPage"><a href="lastPage"><h3>Contact</h3></a></li>
</ul>

Why is this 4th page not showing up? The names are the same and stated everywhere. Am I overlooking something?

My full code is here; http://kellyvuijst.nl/FINAL/ in case anyone needs it.

Upvotes: 1

Views: 3262

Answers (1)

Alvaro
Alvaro

Reputation: 41605

You are forgetting to add the # on the lastPage link of your menu. Also, don't forget that you still have to add the sections to your site <div class="section">.....</div>.

Update: Your anchor is 4thpage and the link is 4thPage. See the difference in the P. Once is in uppercase and the other is not.

Upvotes: 1

Related Questions