-1

I have been trying to run a basic jQuery steps example but an not able to do so. Is there something wrong with this code? the jquery.steps.js plugin is in the same folder as the html doc 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
<script src="jquery.steps.js"></script>
</head>
<body>
<script>
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});


</script>

<div id="example-basic">
<h3>Keyboard</h3>
<section>
<p>Try the keyboard navigation by clicking arrow left or right!</p>
</section>
<h3>Effects</h3>
<section>
<p>Wonderful transition effects.</p>
</section>
<h3>Pager</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>



</body>
</html>
user962339
  • 85
  • 1
  • 2

1 Answers1

0

Because you are running the code before the element is rendered on the page.

Either move the script block after the element on the page or wrap the content in document ready. 

$(function() {  //shortcut for document ready
    $("#example-basic").steps({
        ...
    });
});
epascarello
  • 204,599
  • 20
  • 195
  • 236