How we can create a multiple-step progress wizard using jQuery? Solution: See this Step By Step Wizard Using jQuery and CSS, Multi-Step Progress Wizard.
Previously I have shared some step by step programs, but this is a wizard to show how we can create that kind of program. Basically, a step by step program is divided into many parts we have to navigate next and previous to see the complete contents. Mostly this type of wizard used in forms like registration, bill payment, etc and user guide info section. Also, the wizard contains a progress bar to show the progress to users.
Today you will learn to create Multi Step Progress Wizard. Basically, there are some dummy text cards and a progress bar at the top. The progress bar has numbers to show the progress, and you can easily find you are on which number. This program has swipe or slides feature, you can change text cards by sliding that left and right. Then to the card will change and the progress bar will show the currently active number.
So, Today I am sharing Step By Step Wizard Using jQuery and CSS. There I have used jQuery and jQuery mobile library to creating this program, there are some custom CSS to style the elements. This program can be used with forms, cards, and many other things. You can use this program on your website after some modifications.
If you are thinking now how this multistep progress wizard actually is, then see the preview given below.
Preview Of Swipeable Multistep Progress Wizard
See this video preview to getting an idea of how this multistep wizard looks like.
Live Demo
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Step By Step Wizard Using jQuery and CSS Source Code
Before sharing source code, let’s talk about it. First I have created the main div with id name “wizard” then I have placed all items inside it. Inside the wizard div, I have created another div section for the progress bar and placed some text cards. There I have linked jQuery mobile CSS, jQuery, and jQuery mobile CDN files inside the HTML file.
Because of the jQuery mobile CSS library, there are minimal custom CSS codes. With CSS, I gave values like size, position, margin, padding, etc to the elements. There I have used flex display command to creating this program responsive. Also, I gave color values to the progress bar’s items in the CSS file.
jQuery handling all the features of this program like swipe/slide feature, progress bar, etc. It adding class names to the elements using .addClass command. There I have used command according to jQuery mobile library, there I have used switch, case, and break commands. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Step by Step Wizard | Webdevtrick.com</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <link rel="stylesheet" href="./style.css"> </head> <body> <div data-role="page" id="wizard"> <div data-role="header" data-tap-toggle="false" data-position="fixed"> <h1>Multi Step Wizard</h1> </div> <div role="main" class="ui-content"> <div class="progress"> <p>1</p> <div class="line"></div> <p>2</p> <div class="line"></div> <p>3</p> <div class="line"></div> <p>4</p> <div class="line"></div> <p>5</p> </div> <h3 style="text-align:center;">Swipe left or right</h3> <div class="steps"> <div class="step"> <div class="ui-body ui-body-a ui-corner-all"> <h3>Step 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="step"> <div class="ui-body ui-body-a ui-corner-all"> <h3>Step 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="step"> <div class="ui-body ui-body-a ui-corner-all"> <h3>Step 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="step"> <div class="ui-body ui-body-a ui-corner-all"> <h3>Step 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> <div class="step"> <div class="ui-body ui-body-a ui-corner-all"> <h3>Step 5</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div> </div> <div data-role="footer" data-tap-toggle="false" data-position="fixed"> <h1>Step By Step Wizard</h1> </div> </div> <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ .ui-page .ui-content { padding:0; } .ui-content * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ui-content .progress { display: flex; display: -webkit-flex; flex-flow: row nowrap; -webkit-flex-flow: row nowrap; justify-content: space-around; -webkit-justify-content: space-around; width: 100%; background: skyblue; align-items: center; padding: .5em; } .ui-content .progress * { margin: 0; } .ui-content .progress p { background: lightblue; height: 22px; width: 22px; border-radius: 22px; text-align: center; } .ui-content .progress .line { border-top: 1px solid black; -webkit-flex-grow: 1; flex-grow: 1; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto; } .ui-content .steps { padding: 1em; width: 100%; height: 100%; overflow: hidden; } .progress .currentStep { background: #ff4747 !important; font-weight: bold; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).on("pagecreate", "#wizard", function () { $(".step").not(":eq(0)").addClass("ui-screen-hidden"); $(".step:eq(0)").addClass("active"); $(".progress p:eq(0)").addClass("currentStep"); $(".ui-content").on("swipeleft swiperight", function (e) { var swipe = e.type, nextStep = $(".steps").find(".active").next(".step"), prevStep = $(".steps").find(".active").prev(".step"); switch (true) { case (swipe == "swipeleft" && nextStep.length > 0): $(".step.active") .toggleClass("slide out"); break; case (swipe == "swiperight" && prevStep.length > 0): $(".step.active") .toggleClass("slide out reverse"); break; } }); }).on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", ".step", function (e) { var elm = $(e.target); switch (true) { case (elm.hasClass("out") && !elm.hasClass("reverse")): $(elm).toggleClass("slide out ui-screen-hidden active"); $(elm).next(".step").toggleClass("slide in active ui-screen-hidden"); break; case (elm.hasClass("out") && elm.hasClass("reverse")): $(elm).toggleClass("slide out ui-screen-hidden reverse active"); $(elm).prev(".step").toggleClass("slide in active reverse ui-screen-hidden"); break; case (elm.hasClass("in") && !elm.hasClass("reverse")): elm.toggleClass("slide in"); break; case (elm.hasClass("in") && elm.hasClass("reverse")): elm.toggleClass("slide in reverse"); break; } var dot = $(".active").index(); $("p:eq(" + dot + ")").prevAll("p").addBack().addClass("currentStep"); $("p:eq(" + dot + ")").nextAll("p").removeClass("currentStep"); }); |
That’s It. Now you have successfully created the Step By Step Wizard Using jQuery and CSS, Multi-Step Progress Wizard program. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
