Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes

My presentation is "slider (vertical)".

To customise user interaction, have dynamicaly delete some pages from DOM with jQuery.

How can I update number of "AnythingSlider slides"(nav.numPages) after DOM modification, so the navigation next/back will respect reduced number of slides.

My script:

$(document).ready(function(){

$("body").append("<div id='popups' class='hidden'></div>");

$("li[data-bookmarks*='popuppage']").detach().appendTo("#popups").css("list-style-type", "none");

// here would like to update "nav.numPages" variable //

});

This was somehow managed automatically in older in5 version.

in how_to by (680 points)
  

1 Answer

+1 vote
 
Best answer

The AnythingSlider has an updateSlider function that you can call:

$('#slider').data('AnythingSlider').updateSlider();

The numPages variable would have to be manually updated by querying you new .pages .page content or querying the slider after update, e.g.,

nav.numPages = $('#slider').data('AnythingSlider').pages;
by (197k points)
selected by
THANKS again, you are phenomenal!
Happy to help. :-)
Hey Justin, looks like my "updateSlider" from time to time do not work as expected. On MAC>Safari by clicking refresh from time to time randomly drop an error:
jQuery.Deferred exception: undefined is not an object (evaluating '$('#slider').data('AnythingSlider').updateSlider') (2)

and here is the JS code, causing this error:
$(document).ready(function(){
    $("body").append("<div id='popups' class='hidden'></div>");
    $("body").append("<div id='references' class='hidden'></div>");
    console.log("nav.numPages before = "+nav.numPages); // log number of slides before DOM modification
    my_popups = $("li[data-bookmarks*='popuppage']");
    my_popups.detach().appendTo("#popups").css("list-style-type", "none");
    $('#slider').data('AnythingSlider').updateSlider(); // to update anythingSlider (re-read slides after DOM modification)
    nav.numPages = $('#slider').data('AnythingSlider').pages; // update in5 page numbers to handle arrow navigation properly
    console.log("nav.numPages after= "+nav.numPages); // log number of slides after DOM modification
});
***********
looks like AnythingSlider is at some point unavailable od doing something in background...
As mentioned, in previous in5 "nav.numPages" update without writing any additional code...
The Slider is probably not yet initialized on document ready. Change the event to window load. First line becomes
$(window).on('load',function() {
... sorry, but simple script do not work at all
****
$(window).on('load', function () {
    console.log($('#slider').data('AnythingSlider').pages);
});
**** It always throw an error:
TypeError: undefined is not an object (evaluating '$('#slider').data('AnythingSlider').pages')
****
while "$( document ).ready(function() {..."  throw this same error from time to time
You're missing a closing paren in your console.log line.