Stack Overflow
Stack Overflow

Questions tagged [jquery-steps]

jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view.

Homepage

http://www.jquery-steps.com/

Docs

https://github.com/rstaib/jquery-steps/wiki

Examples

http://www.jquery-steps.com/Examples

Syntax

$("#example-basic").steps({
  headerTag: "h3",
  bodyTag: "section",
  transitionEffect: "slideLeft",
  autoFocus: true
});
<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>
236 questions
3
votes
3 answers

disable finish button after onfinish event jquery.steps

I use jquery.steps but I fail to disable the finish button after it has been pressed. This is my initialze of the component: $("#wizard").steps({ onFinished: function (event, currentIndex) { //Do Function }, labels: { …
Kaizer
  • 651
  • 3
  • 9
  • 22
3
votes
1 answer

Jquery-Steps : going back stucks with end less loop, if you skipped a step before

I am implementing jquery-Step Advance Form Here i need to skip a step if age is less than 18, That's a similar example working in above link, when i tried to implement the same , It goes well for skipping a step but once i need to go back on…
Mayank
  • 934
  • 1
  • 17
  • 37
3
votes
0 answers

jQuery-Steps OnFinishing event missing CurrentIndex argument

I am using jQuery steps and everything seems to be working except I want to have a Finish/Save button for all the steps and perform different actions. Although according to its documentation the OnFinishing event has currentIndex as its argument, it…
Shermin
  • 158
  • 7
2
votes
0 answers

How to display fullcalendar within jquery steps?

What is the appropriate way to display fullcalendar within jquery steps? I've tried the following way but it doesn't work. If I try to display in first step it loads fine but after that no. How to fix this issue? Please, I really need help, I've…
user19367608
2
votes
1 answer

How to incorporate progress bar in vertical form step with validation

I have used the Vertical Form Step from the below Jquery steps http://www.jquery-steps.com/Examples It's working fine. Now I want to show the progress bar with validation when I click the next button without bootstrap. Can anyone please help to make…
Script Host
  • 911
  • 1
  • 11
  • 22
2
votes
1 answer

jquery checkbox required not working using jquery validate plugin

I am using jquery validate plugin with jquery steps, the checkbox need to be checked in first step to continue. And the checkbox validation isn't working. here is the code
Rohit
  • 657
  • 6
  • 25
2
votes
1 answer

How to Validate only number upto 3 digit in each Step using jquery-step

Hello trying to make step by step body measurement form using jquery stepjs https://github.com/rstaib/jquery-steps/ my code submit the data on finish but need help on validation of the field that it should max 3 digit number that is the measurement…
Junaid Khan
  • 27
  • 6
2
votes
2 answers

Uncaught TypeError: $(...).steps is not a function

So I saw really good looking forms in my bootstrap template and I wanted to use them in my project. I placed all the required files that I think we need to import which are added at the bottom of the code, required files are in the correct…
S0ul3r
  • 153
  • 1
  • 9
2
votes
1 answer

Submit on step change in jQuery Steps

Here's the chunk of the code I have: $("#test-wizard").steps({ headerTag: 'header', bodyTag: '.container', transitionEffect: "slideLeft", autoFocus: true, onStepChanged: function(event, currentIndex) { …
Murakami
  • 3,474
  • 7
  • 35
  • 89
2
votes
1 answer

How to add customize Prime NG components

My project is using Prime NG components. There is one requirement which is not provided by Prime NG as of now in their p-steps component. I want to customize Prime NG p-steps component. Is there any way to create one new component under Prime NG…
saurabh gupta
  • 57
  • 1
  • 9
2
votes
2 answers

icheck not working in jquery-steps wizard

I am using jquery-steps wizard in one of my projects. I have some checkboxes in my form which I am customizing using jquery icheck plugin found here http://icheck.fronteed.com/ But this is not working within jquery steps wizard but as soon as I put…
Vinod
  • 31
  • 1
2
votes
5 answers

Disable Left and Right keys in JQuery Steps

I have a Jquery Steps form that contains three steps. I want in the last step to disable the left and right keys so I can stay in the same step. $(function() { form_prop = $("#new_prop").show(); form_prop.steps({ headerTag: "h3", …
Amir Nassal
  • 409
  • 2
  • 7
  • 22
2
votes
0 answers

jquery steps briefly shows next step when next button is clicked

i am using jquery steps. when i click the next button to view the next step, i briefly see the next step load under the current step. i'm using the default logic provided by the steps example page, but it is not adding the slide effect for the step…
Zach Smith
  • 5,490
  • 26
  • 84
  • 139
2
votes
4 answers

JQuery button click does not work

I have a JQuery FIddle properly running. It uses a JQUERY Steps PlugIn . Now if you run JQuery FIddle in the last step you will find three button "Save", "Previous" and "Finish". If I click on Save button I want to show an alert saying "you have…
Unbreakable
  • 7,776
  • 24
  • 90
  • 171
2
votes
3 answers

Jquery Steps stops datepicker working?

I am using jquery steps for wizard. But inside if I use datepicker or qtip functionality not working. I switched .js references still the issue the same. Why datepicker event not working inside steps? console not throwing any error. …
James123
  • 11,184
  • 66
  • 189
  • 343
1 2
3
…
15 16