Search code examples
javascriptjqueryzurb-joyride

jQuery Joyride plugin - nothing happens?

I'm having a lot of trouble getting the Joyride plugin for jQuery to work. I thought it seemed pretty simple, but it's not happening.

I have the following script includes on my page:

<script src="/Scripts/jquery-1.11.0.js"></script>
<script src="/Scripts/jquery.cookie.js"></script>
<script src="/Scripts/jquery.joyride-2.1.js"></script>
<script src="/Scripts/application.js"></script>

And all three are loading correctly. In application.js I have called joyride in the following way:

$(window).load(function () {
    $('#tour').joyride();
});

And my HTML looks like this:

<ol id="tour">
    <li><p>This is the tour.</p></li>
</ol>

For some reason, absolutely nothing is happening when I load the page. I don't get any errors in the console, literally nothing happens. Anyone had this problem?

Solution

  • To see anything happen, put the option autoStart: true into the joyride function:

    $(window).load(function () {
    $('#tour').joyride({
        autoStart: true
    });
});

    Here's a working plunk.

    By the way, if you give your ol an id of joyRideTipContent that will automatically be set to display: none by the CSS.