Allow custom buttons & fire event after guider is shown #53

merged 2 commits into from May 24, 2012

3 participants


I found one "issue" with guiders. We wanted keyboard navigation, to show new guider.

So I've implemented following:

  • allow custom element for guider button (we use button)
  • allow custom attributes for guider button (with href = # as default)
  • allow custom attributes for button on guider level

With this, I was able to implement navigation by pressing spacebar or enter. After guider is shown, next button is focused, so user can use keyboard.

$(document).on('', '.guider', function(){
  $('.guider_button:contains(Next), .guider_button[rel=next]', this).focus();
guiders.createGuider({ ...
    buttons: [{name: 'Some text', html: {rel: 'next'}}]

Mikz maybe you'd checkout my fork. It seems that the issues that you been fixing won't exist there. You are able to manipulate a guider in the onShow function like so.

     onShow: function(guide){
          // guide.find() your button and add rel.

Unfortunately your source code is totally unreadable.
And it looks like onShow is called before element is shown. That means that focusing button won't work because element has to be visible.
onShow here of course works same way.


Ok. I see. Though, I'm not sure that the best solution is to move the ohShow function after the display of the guider. There are many cases where you would want to run code while the guider is still invisible, so the the guider's not changing in front of the user.

Do you feel if would be a appropriate to make functions that would run before show and after show; ie. beforeShow() and afterShow()?


Yeah, that might work. But I like evented approach more. So thats what I'm doing here. Just create event hook and don't care about the rest.


Mikz. I've cleaned my code up a lot. I also agreed with the evented approach and will be implementing the features into my fork soon.

@jeff-optimizely jeff-optimizely merged commit 2cb60a4 into jeff-optimizely:master May 24, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment