1

I am using PagePiling in my project, specifically the option to add a menu.

Per the documentation you can simply add html:

<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>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>

and within the js:

$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

However, I want to add dynamic menu elements for instance:

<ul id="myMenu">
    while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <li data-menuanchor="<?php sanitize_title(the_title()); ?>"><a href="#<?php sanitize_title(the_title()); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
</ul>

How do I also update the options in the js?

Chris
  • 767
  • 4
  • 8
  • 22
  • Add your strings to an array and `implode` it into your js? – Blake Sep 26 '16 at 22:52
  • Maybe your question should be "how to add sections dynamically" ? The menu is not a problem... the problem is assigning the anchor to the new section dynamically. – Alvaro Sep 28 '16 at 08:25

1 Answers1

0

I think that you can get menuanchor array by JS.

var myAnchors = [];

$( "#myMenu li" ).each(function( index ) {
  myAnchors.push($(this).attr("data-menuanchor"));
});

console.log(myAnchors);

$('#pagepiling').pagepiling({
    anchors: myAnchors,
    menu: '#myMenu'
});
landsman
  • 186
  • 8