What is the best way, to change only the registration steps and not every page

Question

What is the best way, to change only the registration steps and not every page

Navigation

#1 by (2 votes)
#2 by (2 votes)

5

I have a page where the user chooses to log in (if he has already registered) or does the registration, if he chooses to register by clicking on the cadastre-se button, he would like the element to go left and the first step of the registration to come by the right equal to a slide system.

In my html of Home I have the steps I call each one through an include and I leave one under the other following the hierarchy, I do not know if for what I want this is the best option.

Type I could use display:none and applying display:block to the next element. But I would like to make the effect slide can anyone give me a light and examples.

Here's an example of a simple way I poderia do but I want to replace with the slide effect:

jsfiddle Example

VLw

jquery slide

asked by anonymous 14.12.2015 / 13:23

2 answers

2

You can use CSS to do this. Using CSS transition and negative margin hides the element. Then you add a class that resets the margin to zero with JavaScript.

CSS

#slideleft {
  width: 200px;
  height: 200px;
  transition: margin-left .5s;
  margin-left: -200px;
  background: #ccf;
}

.abrir {
  margin-left: 0px !important;
}

JavaScript:

button.addEventListener('click', function() {
  slide.classList.toggle('abrir');
});

jsFiddle: link

14.12.2015 / 13:36

Pattern does not allow accented character? What is the difference between the MySQL Trigger exception and MySQL Event?

score 2 · Accepted Answer

My friend, I set an example for you. See if help

link

I created the html with the steps.

<div id="wizardSignin" data-step="1" active>
 <h1> Step 1 </h1>
 <input type="text">
</div>

<div id="wizardSignin" data-step="2">
 <h1> Step 2 </h1>
 <input type="checkbox">
</div>

<div id="wizardSignin" data-step="3">
 <h1> Step 3 </h1>
 <select>
   <option>Option 1</option>
 </select>
</div>

 <input type="button" id="nextButton" value="next">

On the Js, I control display and apply slide effect as you specified.

$(document).ready(function(){
    $('div[data-step]').hide();
  $('div[data-step=1]').show();

  $('#nextButton').on('click',function(){
        var idx  = $('#wizardSignin[active]').attr('data-step');
        $('#wizardSignin[active]').removeAttr('active').hide();

      if(idx<3){
        idx++;
      }else{
        idx=1;
      }

      $('#wizardSignin[data-step="'+idx+'"]').attr('active','');
      $('#wizardSignin[data-step="'+idx+'"]').effect('slide');


  });

});

See if that helps.