I suspect Joyride is intended to be triggered on page load, but I am using a link to trigger the tour on a page. The SECOND time the tour starts, all of the tour frames show up on the page wherever the UL is appended into the DOM. I solved the problem with the following snippet:

                $("#newFeatures") .click(function(){
                        $(this).joyride({
                            'postRideCallback':function(){
                                $(".joyride-tip-guide").remove(); //Clean up after joyride bug where dangling elements remain. 
                            }
                        });
                    });

Another suggestion I would like to make is to have an offset that can be set per item. Sometimes the automatic aligning just doesn't deliver a desired result. It would be cool if you could add a left,right,bottom,top offset so positioning can be optimized.

When using joyride with another javascript library that inserts divs into the body as the first child, it seems to interfere with joyrides left offset calculations. In the tip location bit of code, I've had to modify the left offset calculation to normalize the left offset to be 0 if the bodyOffset.left > currentTipPosition.left.

Here's the snippet:

@line:150
          // ++++++++++++++++++
          //   Tip Location
          // ++++++++++++++++++
          var leftOffset = (bodyOffset.left > currentTipPosition.left ? 0 : bodyOffset.left);
          if (settings.tipLocation == "bottom") {
              currentTip.offset({top: (currentTipPosition.top + currentParentHeight + nubHeight),
                  left: (currentTipPosition.left - leftOffset)});
              /*
            currentTip.offset({top: (currentTipPosition.top + currentParentHeight + nubHeight),
              left: (currentTipPosition.left - bodyOffset.left)});
              */
            currentTip.children('.joyride-nub').addClass('top').removeClass('bottom');
          } else if (settings.tipLocation == "top") {
            if (currentTipHeight >= currentTipPosition.top) {
                currentTip.offset({top: ((currentTipPosition.top + currentParentHeight + nubHeight) - bodyOffset.top),
                    left: (currentTipPosition.left - leftOffset)});
              /*
              currentTip.offset({top: ((currentTipPosition.top + currentParentHeight + nubHeight) - bodyOffset.top),
                left: (currentTipPosition.left - bodyOffset.left)});
              */
              currentTip.children('.joyride-nub').addClass('top').removeClass('bottom');
            } else {
                currentTip.offset({top: ((currentTipPosition.top) - (currentTipHeight + bodyOffset.top + nubHeight)),
                    left: (currentTipPosition.left - leftOffset)});
              /*
              currentTip.offset({top: ((currentTipPosition.top) - (currentTipHeight + bodyOffset.top + nubHeight)),
                left: (currentTipPosition.left - bodyOffset.left)});
              */
              currentTip.children('.joyride-nub').addClass('bottom').removeClass('top');
            }
          }

Hi there,

If I'm understanding this correctly, setting a cookie domain should prevent Joyride from being shown to the same user more than one time? I've set cookieMonster to true, and I've set both cookieName and cookieDomain, but Joyride keeps showing across the domain.

Does anyone else have this issue?

$(window).load(function() {
$(this).joyride({
'tipContent': '#joyride1',
'nextButton': false,
'cookieMonster': true,
'cookieName': 'flexdkjoyride',
'cookieDomain': 'domain.com'
});
});

I'm at a https domain, and I've tried https://domain.com/, https://domain.com, https://www.domain.com/, https://www.domain.com, www.domain.com and domain.com — nothing works.

EDIT: Yeah, two seconds after I posted this it worked.

When using Joyride in a page where the container has a max-width (ie. .row class in foundation framework) the positioning of the tooltips is invalid.

This issue can be fixed with placing an element near the body without setting any max-width on that element (ie. div.container class in foundation framework)

When I start a joyride first time it goes through the sequence correctly. However, when I then restart the tour again, I get a different order of tips with some tips missing and it generally just seems a little confused.

The reason for this is that when you execute $('#joyRideTipContent').joyride(); for a second time, it will re-add all the already added tooltips to the tooltip container again. This should not happen.

Nothing happens in the downloaded demo and it throws a console error: "Uncaught TypeError: Cannot call method 'offset' of undefined ".

This isn't a code issue per se, however it's definitely problematic. The options code sample given at http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin is not correct. Strings aren't enclosed in quotes, for instance. The options in the actual JS file however (the default settings) work fine. I would suggest updating the home page with a proper snippet. Thanks!

After Joyride has completed its ride, if I resize the browser window (IE9/Chrome) I get an error in the following code (around line 200)...

  if (!settings.inline || !settings.cookieMonster || !$.cookie(settings.cookieName)) {
      $(window).resize(function () {
      var parentElementID = $(tipContent[prevCount]).data('id'),

...because prevCount > tipContent.length

I can put in a quick fix:

          if (tipContent.length >= prevCount)
            return;

but really requires underlying problem to be sorted.

The jquery cookie plugin is included in joyride but should be an external dependency.

I am using jquery joyride and the vertical position is not being calculated for the popup div and as a result, vertical alignment of the div is not where it should be and the horizontal alignment is perfect.

I would love to have a way to only start the tour when a user takes a specific action. Right now, it starts automatically on page load. And if I just wait to call .joyride() until later, all of the <ol> items show up in the DOM.

I hacked around this by setting the <ol> to display:none but it seems like there could be an "autoStart: false" option or the like.

Hi all,

The playground website links to v1.0.3, which is broken in IE 7 and IE8.
v1.0.5 works great in IE 7, 8, and 9. Is it possible to update the link ?

Would save people a bit of trouble to get the latest version.

Thanks,

Hello..

I want to ask, is this plugin working with Twitter Bootstrap?

I have tried it using into Twitter Bootstrap but the position is not put correctly?

Please, give your hand if I am wrong..

thanks

Hi,

Regarding 2.0.1. I have a tooltip that I'm trying to position relative to a menu button that is on the right edge of my "main"-div, not the edge of the window.

I try to set the tipPosition to left to position the tooltip within the content, however, no matter what tipPosition I choose, it always positions to the bottom of the item. Which makes it basically overflow to the right of the main content edge.

I also found that in some cases, aligning to the right of a menu-item (with a height of 24px), the nub aligns to the bottom of the menu-item in stead of to the middle, making it hard to identify the item that is referred by the tooltip.

In other areas I'm seeing more profound xy calculation errors if I use tipLocation left or right

Is anyone having a problem with their modal and resizing your browser? What I mean is, after I click out of my modal and the joyride is finished and then I go to resize my browser by dragging a corner, the transparent background from the modal comes up (without the actual modal window) and you have to click on the page to get rid of it.

Some info:

I have 2 joyrides on my site that are activated depending on which cookie you have. The issue seems to be with just 1 of the 2 joy rides. That joyride has only 1 item - the modal.

Your documentation states that jQuery versions 1.4.2+ are supported, but 1.5.2 is not working.
If I take the demo.html included in the package, and replace your jquery with the Google-hosted 1.5.2, I receive an error.

The error details and stack trace from Chrome:

Uncaught TypeError: Cannot read property 'width' of undefined jquery.min.js:16
d.cssHooks.(anonymous function).get jquery.min.js:16
d.extend.css jquery.min.js:16
d.fn.(anonymous function) jquery.min.js:16
methods.corners jquery.joyride-2.0.1.js:540
methods.pos_default jquery.joyride-2.0.1.js:424
methods.show jquery.joyride-2.0.1.js:231
(anonymous function) jquery.joyride-2.0.1.js:90
d.extend.each jquery.min.js:16
d.fn.d.each jquery.min.js:16
methods.init jquery.joyride-2.0.1.js:48
$.fn.joyride jquery.joyride-2.0.1.js:633
(anonymous function) demo.html:113
d.event.handle jquery.min.js:16
k.handle.m jquery.min.js:16

Upon further investigation, it appears to be related to the window.outerWidth()

It would be great to have a callback when the nextButton is clicked, just like the postRideCallback.

<ol id="joyRideTipContent">
  <li data-class="numero1" data-text="Next">
    <h2>Stop #1</h2>
  </li>
  <li data-id="numero2" data-button="Next">
    <h2>Stop #2</h2>
  </li>
  <li data-id="numero3" data-button="Next">
    <h2>Stop #3</h2>
  </li>
</ol>

If the element id "numero2" does not exists, the v.1 skip to the next step. Instead, the v2 stop the sequence

Hi,

Not sure if this is expected behaviour or not, but I will outline steps to reproduce my issue.

There are 10 steps in my tour:

1. Initialise joyride on clicking a button called "Start"
2. Index 0 shows - click next
3. Index 1 shows - click next
4. Index 2 shows - click next
5. Index 3 shows - click next
6. Click button called "Destroy" which calls the joyride ('destroy') function
7. Click button called "Middle" which initialises joyride with the option of 'startOffset': 2
8. Index 2 shows - click next
9. Index 4 shows - click next
10. Index 5 shows - click next

Now my problem is with step 9, joyride has obviously carried on from index it was at before I destroyed it. When it should (as in what I would expect) carry on from from offset 2 as that is where I started it from.

Is this expected behaviour or is something wrong somewhere? either way, how do I fix it?

Thanks

form id="form1" runat="server">

     <!-- Tip Content -->
     <ol id="joyRideTipContent">
      <li data-id="helper10" data-button="Nästa">
        <h2>Stop #5</h2>
        <p>It works as a modal too!</p>
      </li>
    </ol>


<script type="text/javascript">
    $(window).load(function () {
        $('#joyRideTipContent').joyride({ postStepCallback: function (index, tip) {
            if (index == 2) {
                $(this).joyride('set_li', false, 1);
            }
        },
            modal: true,
            expose: true
        });
    });
</script>

</form>

Hi guys I don't know if it´s an environment issue or a bug.

I'm running the v2.0.1 with jquery 1.8.2 and all the offset calculations are wrong. The _"outerWidth"_ and _"outerHeight"_ methods doesn't exists.
It causes the _"nub_height"_ variable to broken the calculations.

I am fixing it in my local script version. If it is a bug, please let me know then I pull my changes to you.

Thanks.

Using the latest version of Joyride, downloaded yesterday. The demo page is excellent, thanks for this great plugin!

From the recent blog post on Zurb, http://www.zurb.com/article/1079/our-joyride-jquery-plugin-gets-an-overhau, it seems it's possible to do the following, but I cannot figure out the code:

1. Right-align with triangle pointer on the top right of the box. The default is on the top left of the box. How to do this? I do not see an option called tipLocation:rightbottom; or something.
2. How can we automate navigation like "Previous" along with the usual "Next"?
3. Is it possible to Pause the tour -- in which case, the tour thing becomes, say, a fixed tab-like square on the left-center of the screen so that the whole screen is now clear and scrollable without any distractions -- and then when that fixed left-center tab is clicked, the tour resumes again.

Seems these are all possible, but it would be nice to have these included by default in demo.htm, or perhaps include a demo-advanced.htm.

Given the lack of documentation, this would help a lot.

Any code samples? Or just pointers for code?

Thanks!

This was tested using IE9 and then versioning down to IE8 through the developer tools.

I'd really like to do something like this:

        joyrideOptions['postStepCallback'] = function(index, tip) {
            if (index == 1) {
                $(window).joyride("pause");
                fooBar();
                setTimeout(function() {  $(window).joyride("resume"); }, 800 );
            } else if (index == 2) {
                $(window).joyride("pause");
                barBaz();
                setTimeout(function() {  $(window).joyride("resume"); }, 800 );
            } else if (index == 3) {
                $(window).joyride("pause");
                doSomething();
                setTimeout(function() {  $(window).joyride("resume"); }, 800 );
            }
        };

The code is far more readable that way. Could this be implemented without too much trouble? I'm not familiar enough with the codebase to send a pull request.

Can you add an option to blur the page in background in non-modal element?

I'm missing the option to create a modal joyride for all my tooltips, including with data-ids. This would make the problem where some tooltips overlay awkwardly to underlying content, go away. I think it should be a general settings option.

In most cases you will script your joyride. However, in some cases, for instance when you use joyride to show off an x number of new items that is dynamically generated, you don't really know if there's a "next" guide. You can parse out the next button on that last item, but it would be nice if joyride was smart enough to not show the next button when there is no next.

I'm using the latest version of the plugin and I have a step in the tour that is on the right side of the layout. When the tooltip displays, more than half of it displays out of the viewport. I tested version 1.0.5-stable and the tooltip displays properly for that step, with the exception of the nub which can be fixed through css.

Example.

Is this a feature that was removed from the latest version, or is there way a to force the tooltip to display positioned right aligned?

How do I get the current index?
Or perhaps I need a 'pre' or 'in' StepCallback?
Lovely script - thnaks, Mike

If you have cookMonster == true and the "popup" has already been viewed and hidden, resizing the window gives this error:

currentTipPosition is null

If you wrap $(window).resize with the following it takes care of the issue:

if(!settings.cookieMonster || !$.cookie(settings.cookieName)) {
$(window).resize(.....
.......
}

If the tour starts on page1.html, the tour would go through all defined tour steps. I'd like to see a new option that can be passed in that would allow the last step to have a "Next" button with a javascript callback.

This callback could be a simple window.location() call to go to page2.html (which would have a different set of tour steps on it), or it could be a function that loads new content into the page (example use case: the administrative overlay in Drupal 7, or any rich client application built on backbone or similar).

Alternatively, each tour step could optionally define a Javascript function to execute when the next or previous button is clicked.

I ran into an issue where the tips were incorrectly positioned until a window resize even was fired.

I had to add $(window).trigger('resize') in the postStepCallback function in order to fix the positioning.

Hi,

Your documentation says that it supports jQuery 1.4.2+ but jQuery-1.5.2 is not supported. As, Joyride uses 'on' function of jQuery which is introduced only in the later versions of jQuery.

I would expect the timer to be stopped when destroy is called instead it seems to use the same timer again which results in the timer animations not matching with the actual timer.

Adding clearTimeout(settings.automate); to the destroy function seems to fix the issue.

That's my code. I click on the button, the tour opens, the button disappears. I close the tour, button reappears. All fine. But then I click on the button and two instances of the tour open up. Is there some kind of a destroy method that can be used?

The code works for the most part in IE7 but fails because of a few small things like the fact that strings don't have a trim method and arrays don't have a map() method.

Since joyride depends on jQuery, jQuery's trim() and each() method should be used.

IE8 error:
Line: 317
Error: 'top' is null or not an object

Hi,

I have a problem with joyride and jquery simplemodal. If i use id of element inside the modal, always centered at the middle at the screen, joyride will scroll the window but the element dont move. As result, the help is not at the right place in the page.

Does anyone as a solution ?

I'm now using Joyride 2, but instead of starting on pageLoad, I have a button that the user clicks to start the tour. This means that they can close the tour and then restart it. If the user closes a joyride and restarts it, it opens at the first step, and then continues where the tour left previously. If the user completes a joyride and then starts it again without refreshing the page, it jumps randomly through the tour.

Example:
With Chrome or Firefox with Firebug, load http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin
Take the tour to completion.
Run the following in the console: $('#joyRideContent').joyride()
Observe that the full tour is no longer available.

<a href="#" id="openTour">First time here? Take a tour</a>

<ol id="joyRideTipContent">
  <li data-class="numero1" data-text="Next">
    <h2>Stop #1</h2>
  </li>
  <li data-id="numero2" data-button="Next">
    <h2>Stop #2</h2>
  </li>
  <li data-id="numero3" data-button="Next">
    <h2>Stop #3</h2>
  </li>
</ol>

$('#openTour').click(function (e) {
    e.preventDefault(); 
    $('#joyRideTipContent').joyride({
        'postRideCallback' : function () {
            $(this).joyride('destroy');
        },
        cookieMonster: false
    });
});

$('#joyRideTipContent').joyride({
    'postRideCallback' : function () {
        $(this).joyride('destroy');
        },
    cookieMonster: true
});

I'd like to reset and turn off the cookie monster flag, if che user click on the "Take a tour" link, but the tour skip some steps.

according to the docs, it should be override settings per tip, but when I try it with something like

<li data-id="logo" data-options="tipLocation:bottom;timer:5000">this is the logo</li>

the tip only stays there for 1 sec, which i've set when calling joyride.

Help? :)

If the joyride is started again, index is set to the last value

There are a few typos on the documentation homepage. Most notably, the code section for CSS includes the file "jquery.joyride-2.0.css"

This should probably be joyride-2.0.1.css or whichever version is applicable :)

Also, the documentation should reference changing the CSS and JS to the ID that the developer chose for the UL joyride script.

How do I set a per-item option like nextButton? For example, I would like the final popup to have no button. My code is currently

<li data-id="headerNav1" data-options="nextButton:false">

But this doesn't seem to work. I find that at this point in the code, settings.nextButton is true:

if (settings.nextButton) { ... }

Am I missing something or is this not yet possible?

Thanks

I'd like to use this as a fancy 'jump to section' script, is there anyway I can remove completely the tooltips and make it so that it stop element is at the very top of the screen?

I'm using Foundation and since Joyride is a part of this, I thought I'd ask first before choosing a different script.

JoyRide in its current form doesn't work with Foundation. However, I've added a few lines of code and have it working. The only catch is it requires Modernizr to function properly.

Is this something you would be interested in? I can fork the repo and add the bits if you are.

Hi,
I wrote a wrapper around joyride and I'm trying to get an extra level of sophistication in regarding what is saved in joyride to identify any items on the page that can be classified as "new" tips. In order to do this I need the tip-id associated with on postStepCallback with the last seen tip. However, what I get is the index + the tip popup itself. That tip popup node doesn't contain the id reference with which to reference the original list item that was the source of the tip.

I can store the list of items and refer back to it through the index, but it seems a little more elegant to me if I have the data-id available that was the source of the tip. Might be nice to store it as a data item.

Joyride Version 2.0.3, JQuery Version 1.9.0,

I have multiple joyrides for one page. And I want to initiate them on different actions. But after the first joyride has been initiated and finished, the other ones do not start. Instead, the first joyride is being shown again.

To describe it order;
-> document loads
-> first joyride is being shown,
-> when I click the span that has a onclick function about initializing the second joyride, first joyride is being shown again instead of the second one

_Update_

I've invoked the destroy method in a postRideCallback function, but still no luck..

Hi,

Just been embedding the plugin into my web application - which has some jQuery slideToggles in. I've been trying to attach tooltips to areas which will animate but this causes the tooltips to appear before the animation is complete. Of course once an animation is complete, the tooltip is the in the wrong place.

One solution was to have a delay on the fadeIn function within your plugin to prevent tooltips from displaying for 1000ms whilst my slideToggles are occurring. This appeared to work, but as an odd nuance I found the position of tooltips were then less accurate. Notably the horizontal position was not the same as without the delay, which didn't really make any sense.

Only other method I could think to resolve this would be to hide the tooltip on a case by case basis and reveal it in a callback function once those slides are completed.

Just thought i'd put this out there as a use case and see if you guys had a better idea/solution? Some sort of delay on showing tooltips with (still) reliable positioning of tooltips would really solve this - or better still some method to only display tooltips when animation is complete?

Cheers,
Steve