Joyride requires hash fragment?

[saibotsivad]

I was attempting to use Joyride inside a web app, to show off new features, but like many single-page web apps, ours uses the hash fragment for navigation. E.g. site.com/#/company/123 to show the company page for the company id "1234".

After successfully got Joyride running, I now see that all the clickable actions (e.g. "next", "close", etc.) are actually <a> elements, with the href attribute containing a hash fragment. E.g. <a href="#close">X</a> for the close action.

Is there any way to override this? It looks pretty integral to Joyride, but using hash fragments effectively rules out using Joyride for web apps like ours, since they use the hash fragment for application routing.

[saibotsivad]

I'm not sure if there is a better way, but I resolved this in AngularJS by doing this:

var element = $('#' + slide.id);
element.joyride(options);
element.joyride(options);
$timeout(function() {
    $('.joyride-tip-guide a[href]').each(function() {
        $(this).click(function(event) {
            event.preventDefault();
        })
    })
})

(Running joyride twice because of https://github.com/zurb/joyride/issues/200)

[robinfhu]

Yes you can override this. You should be able to change the outer HTML of the close button and next button in the settings:

$('#tutorial').joyride({
    template: {
        'link': '<a href="javascript:void(0);" class="joyride-close-tip">X</a>',
        'button': <a href="javascript:void(0);" class="joyride-next-tip"></a>'
    }

})