2

I am trying to use Jquery-Joyride - http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin, but I can not get it to work with Jquery Mobile. As soon as I add the standard JQM tags the help windows will no longer display.

Here is what I'm trying: .....

<ol id="joyRideTipContent">
  <li data-id="numero2" data-text="Next" class="custom">
    <h2>Stop #1</h2>
    <p>You can control all the details for you tour stop. Any valid HTML will work inside of Joyride.</p>
  </li>

....

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

.....

<div class="row">
 <div class="four columns">
    <img src="280x120.gif"></img>
  </div>
  <div class="eight columns">
    <h3 id="numero2">Customize Each Stop Along the Way</h3>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
  </div>
</div>

.....

Everything works fine with the code above. However, as soon as I add the JQM specific tag, the help windows no longer appear.

<div data-role="page" class="type-home" data-dom-cache="false" id="home">

I'm not sure how to get this working. Any help is appreciated.

user2175057
  • 23
  • 2
  • 1
    document ready or window load can't be used to initialize a jQuery plugin inside a jQuery Mobile page, you shoud use appropriate jQuery Mobile page event, in your case pageshow. Read more about it here: http://stackoverflow.com/a/14469041/1848600 – Gajotres Mar 15 '13 at 18:18

2 Answers2

0

Problem here is window load, like document ready it will not work correctly with jQuery Mobile.

Instead you should use this:

$(document).on('pageshow', '#index', function(){       
    $('#joyRideTipContent').joyride();
});

where #index is an id of your page.

Working jsFiddle example: http://jsfiddle.net/Gajotres/sdwXt/

It was made from an official DEMO example.

One last thing, before you go further with jQuery Mobile read my other ARTICLE, or find it HERE.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    I can get this all working, however for some reason I have to call $('#joyRideTipContent').joyride(); twice to get it to start. I see in your JSfiddle you don't have to do this, but for some reason I can't get it to work any other way. Any suggestions? – user2175057 Mar 23 '13 at 18:04
  • If it is not a problem, mail me your page and I will take a look at it. My mail can be found inside my profile. – Gajotres Mar 23 '13 at 18:13
  • Thanks, just sent it over. – user2175057 Mar 23 '13 at 20:23
  • user2175057 this should autostart joyride so you don't have to twice $("#instructions").joyride({autoStart:true}); – mc. Nov 05 '13 at 20:47
  • @Gajotres Im trying to use it with `jQuery.when` but it only shows when I do `$('#joyRideTipContent').joyride();` twice – techie_28 Aug 10 '16 at 07:38
0

If you're having to call the joyride() function twice, revert back to version 2.0.3, which can be found at https://github.com/zurb/joyride/releases - I tried a few version and it's the only one without any obvious bugs!

evilunix
  • 960
  • 6
  • 11