Intro.js no top of footer navbar in jquery mobile

by Newton Anbarasu

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://usablica.github.io/intro.js/introjs.css">
<script src="http://usablica.github.io/intro.js/intro.js"></script>
<div data-role="page">
  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p id="step2">I Am Now A Mobile Developer!!</p>
      <a id="step3" class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:startIntro();">Show me how</a>
      
  </div>

  <div data-role="footer" data-id="foo1" data-position="fixed" data-fullscreen="true" class="" style="text-align:center">
  	<div data-role="navbar">
  		<ul>
  			<li><a href="a.html">Info</a></li>
  			<li><a href="b.html">Friends</a></li>
  			<li><a href="c.html">Albums</a></li>
  			<li><a href="d.html">Emails</a></li>
  		</ul>
  	</div><!-- /navbar -->
  </div><!-- /footer -->
</div>

JavaScript

function startIntro() {
        var intro = introJs();
          intro.setOptions({
              showProgress: true,
              showBullets: false,
              exitOnOverlayClick: false,
            scrollToElement: true,
            steps: [
              {
                element: '#step2',
                intro: 'More features, more fun.',
                position: 'bottom'
              },
              { 
                element: 'div[data-role="navbar"]',
                intro: "Check the navbar",
                position: 'top'
              },
              {
                element: '#step3',
                intro: "Another step.",
                position: 'right'
              } 
            ]
          }); 
          intro.start();
      } 
$(document).ready(function(){
          startIntro();
    });