Programmatic way to go to a slide? about doormat HOT 7 CLOSED

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

from doormat.

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);
        }

from doormat.

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

from doormat.

No problem 😄 glad I could help!

@jh3y

from doormat.

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?

from doormat.

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

from doormat.

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

from doormat.