I came across this amazing plugin I am have been trying to make it work but it seems I am missing something.
I have added the reference to the file :
<script src="../Scripts/jquery.steps.min.js" type="text/javascript"></script>
My markup looks like this :
<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>
Javascript looks like this :
<script type="text/javascript">
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
</script>
I came across this amazing plugin http://www.jquery-steps./Examples I am have been trying to make it work but it seems I am missing something.
I have added the reference to the file :
<script src="../Scripts/jquery.steps.min.js" type="text/javascript"></script>
My markup looks like this :
<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>
Javascript looks like this :
<script type="text/javascript">
$("#example-basic").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
</script>
-
1
Any console errors? Have you included jQuery reference? Try wrapping your code inn DOM ready handler
$(function(){})– Shaunak D Commented May 20, 2015 at 4:32 - @ShaunakD TypeError: $(...).steps is not a function – SamuraiJack Commented May 20, 2015 at 4:35
-
1
It seems the plugin is not loading. Verify the path
../Scripts/jquery.steps.min.js. Also, where are you including the reference in HTML? – Shaunak D Commented May 20, 2015 at 4:35 - @ShaunakD yes i have added jquery-1.11.2.js reference and tried placing the javascript inside dom ready – SamuraiJack Commented May 20, 2015 at 4:36
-
1
Where in your HTML sections are you including
<script src="../Scripts/jquery.steps.min.js" type="text/javascript"></script>? – Shaunak D Commented May 20, 2015 at 4:39
3 Answers
Reset to default 3You need to link this CSS file, download it here
and add the following line in you head tag
<link rel="stylesheet" href="../dist/css/jquery.steps.css"/>
We have to use latest jquery as this plugin uses when function of the jquery. This solved my problem.
http://code.jquery./jquery-2.1.4.js
You must place the last script code right before the close of the body tag like so:
<body>
<div id="steps">
<h1>First Step</h1>
<section>First Content</section>
<h1>Second Step</h1>
<section>Second Content</section>
</div>
<script>
$("#steps").steps(
{
headerTag : "h1",
bodyTag : "section",
cssClass: "wizard"
}
);
</script>
</body>
Also, this an essential css file that must be inplace:
<script src="./javascripts/jquery.steps.js"></script>
This can be found on the project's git hub page.