Programmatic way to go to a slide?

[HongPong]

Hi,

Thanks for all your help before, the snapping is working very well. I am wondering if there is a way to go programmatically to a slide, if I call a JS event (preferable) or call going to an anchor (also cool). I.e. to make a table of contents that can be clicked to bring you to a slide. Thank you!

[HongPong]

I am doing a workaround similar to this:

        window.getPanelHeight = function() {
            var firstpanel = $('.dm-pnl:first');
            window.panelheight = parseInt($(firstpanel).css('min-height').replace('px', ''));
            console.log(window.panelheight);
        };

        // debounced resize event catcher.
        $( window ).resize(function() {
            window.getPanelHeight();
            var paneltimeout = window.setTimeout(getPanelHeight, 1000);
        });

        window.goToSlide = function(num) {
            var oneheight = window.panelheight;
            var targetheight = oneheight * num;
            $("html,body").scrollTop(targetheight);
        }

[jh3y]

Hey @HongPong

Sorry for the delayed response.

To programatically navigate to a slide will require a workaround. Doing a simple window.scrollTo would suffice but then you lose the animation and can hit z-index issues.

To retain the animation, the quickest solution will be to use jQuery. Also, each panel element has a STARTING_POS property which tells us where to scroll to in the body to get to the start of a panel.

This will of course first require that you have jQuery available to you on the page. Then add the following;

window.Doormat.prototype.travelTo = function(index) {
  var panels = document.querySelectorAll('.dm-pnl');
  if (panels[index - 1]) {
    var pos = panels[index - 1].STARTING_POS;
    if (pos !== undefined) $('body').animate({scrollTop: pos});
  } else {
    throw Error('Doormat: no panel available at that index!');
  }
}

The result will be that you can slide to any panel you want by index. For example;

var myDoormat = new Doormat();
myDoormat.travelTo(4);

Hope that helps you out! 😎

I'll add a note about this in the README.

@jh3y

[HongPong]

This is great! excellent timing and works like a charm. Cheers!

[jh3y]

No problem 😄 glad I could help!

@jh3y

[HongPong]

At least for me, this isn't working for IE11 (oh joy, fun times) - I can post diagnostic info if you can point me to what you might need. Thanks again. I'm not up on all the oddities that might happen with passing through prototype constructors in IE, maybe that is the issue?

[jh3y]

Hey @HongPong

Sorry for the delayed response. I sometimes miss the notifications. Hmm I ran it in Edge with no problems and IE9.

You definitely pulled in jQuery to leverage the .animate function?

@jh3y

[HongPong]

I found a different way to work around it. Best regards, thanks again for all the help.