AnythingSlider update after modify DOM

Question

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.

Answer 1

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;

Comments

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.