Add afterUpdate callback

[walrusdunne]

Great library, but I needed the ability to insert sections dynamically and automatically scroll to them. I managed to add this in via the refresh function as shown below, not sure if this is something you'd be interested as adding as a feature. (Adding the sections was handled by adding the section class and removing a hidden class on a button click event, before calling the update function.)

settings = {
      //section should be an identifier that is the same for each section
      section: ".section",
      sectionName: "section-name",
      interstitialSection: "",
      easing: "easeOutExpo",
      scrollSpeed: 1100,
      offset: 0,
      scrollbars: true,
      target:"html,body",
      standardScrollElements: false,
      setHeights: true,
      overflowScroll:true,
      updateHash: true,
      touchScroll:true,
      before:function() {},
      after:function() {},
      afterResize:function() {},
      afterRender:function() {},
      afterUpdate:function() {}
    };

refresh:function(withCallback,scroll) {
        clearTimeout(timeoutId2);
        timeoutId2 = setTimeout(function() {
          //retain position
          sizePanels(true);
          //scroll, firstLoad
          calculatePositions(scroll,false);
          if(withCallback) {
              settings.afterResize();
          } else {
              settings.afterUpdate();
          }
        },400);
     }

A custom function can then be assigned in the init settings

afterUpdate: function() {onSectionExpand(sectionMove);}

Even if you don't think this needs to be added, hopefully this is useful to others that may need a similar feature.

EDIT: Reading my original post back I don't think I was very clear on what I was trying to achieve which is my bad. Basically I wanted to be able to click a button, that would create a new section that got automatically scrolled to. I first tried this by attaching an onclick event to the button that would add the section class to the previously hidden section, update scrollify using $.scrollify.update() and then scroll to it using $.scrollify.move(). The problem that came up was that calling move straight after update in the same event listener didn't work due to the list of sections not being updated in time (presumably because of the setTimeout). Hopefully that clairifies what I meant to say in the first place.

[lukehaas]

I think you can already easily add or remove sections dynamically. Just as long as you call $.scrollify.update() afterwards so Scrollify can recalculate everything.

[walrusdunne]

Yes, I did try that, but during my testing it seemed that scollify didn't update in time. For example, I added the new section, called $.scrollify.update() and then tried calling $.scrollify.move('#new-section') but due to the refresh function using setTimeout, the list of sections has not been updated with the new section when move was called.

I should have explained that in my original post. This was all being fired within a jQuery .on('click') event, so don't know if that has any bearing on all this, but the only way I could do the move function was to wait until the update has finished, hence my need for the afterUpdate function.

EDIT: Reading my original post back I don't think I was very clear on what I was trying to achieve which is my bad. Basically I wanted to be able to click a button, that would create a new section that got automatically scrolled to. I first tried this by attaching an onclick event to the button that would add the section class to the previously hidden section, update scrollify using $.scrollify.update() and then scroll to it using $.scrollify.move(). The problem that came up was that calling move straight after update in the same event listener didn't work due to the list of sections not being updated in time (presumably because of the setTimeout). Hopefully that clairifies what I meant to say in the first place.