Through PHP, steps are counted and added to the session, in order to avoid returning to the beginning in the event of a page refresh or refresh, the value is obtained using the following variable $step
<?php session_start(); if ( !empty($_SESSION['datos_form']['__step__'])) { $step = $_SESSION['datos_form']['__step__']; } else { $step = '1'; } ?>
We get the value of the variable in jQuery javascript code.
show_step(<?= $step; ?>);
This will be equal to: (for the accepted default value)
show_step(1);
Each step of the process is mapped according to the value received from PHP, to the Javascript code, as already mentioned.
Without the need to add additional controls, for example:
current = $(this).parent(); next = $(this).parent().next();
I have the following simple wizard with CSS
https://jsfiddle.net/2LL8x1sm/
I need to be able to adapt it to the ajax javascript code so that it animates the step it is on.
There was already animation in the current code using the sprite method
function animacion(caso){}
I need to be able to adapt the animation of the process and use an icon (like this one) that goes sliding with a progress bar similar to the following image:
This animation should be added inside the animacion(caso) {} function, which works along with backlinks and continues, add an example inside fuction in the following code:
$( ".test" ).animate({ "left": "-=50px" }, "slow" );
And in fact, it works, the div with the test class changed the left style, continuing at every step.
How can I animate the process of my html css code?
$(function() { show_step(<?= $step; ?>); }); function animacion(caso){ //$( ".test" ).animate({ "left": "-=50px" }, "slow" ); }; // function to save the form data and change the step function show_step(step){ var data = $( "#form" ).serialize(); var url = 'saveTemp.php?step=' + step; $.ajax({ type: "POST", url: url, data: data }) .done(function( resp ) { $('.step').css( "display", "none" ); $('#step'+step).fadeIn("slow"); //animation of each step animacion(step); }); };
.container { width: 100%; padding-top: 20px; } .progressbar li { list-style-type: none; float: left; width: 33.33%; position: relative; text-align: center; } .progressbar li > * { position: relative; padding-bottom: 20px; display: inline-block; font-size: 1.4rem; color: #2c3f4c; top: -45px; } .progressbar li:before { content: ''; width: 12px; height: 12px; display: block; text-align: center; margin: 0 auto; border-radius: 50%; background-color: #edeff0; } .progressbar li:after { content: ''; position: absolute; width: 100%; height: 4px; background-color: #edeff0; top: 4px; left: -50%; z-index: -1; } .progressbar li:first-child:after { content: none; } .progressbar li.active { color: green; } .progressbar li.active:before { background-color: green; } .progressbar li.active + li:after { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <ul class="progressbar"> <li class="active"><span>Step 1</span></li> <li><span>Step 2</span></li> <li><span>Step 3</span></li> </ul> </div> <form id="form" action="procesar.php"> <div id="step1" class="step"> <h1>step 1</h1> <a data-ref="#" onclick="show_step(2)">continue</a> </div> <div id="step2" class="step"> <h1>step 2</h1> <a data-ref="#" onclick="show_step(1)">after</a> <a data-ref="#" onclick="show_step(3)">continue</a> </div> <div id="step3" class="step"> <h1>step 3</h1> <a data-ref="#" onclick="show_step(2)">after</a> <button>Send</button> </div> </form>