Question

I would like to create a registration process where the user must accept the TOS before providing Name and Password.

Here is the screen cast and you will see the issue I am having:

http://screencast.com/t/3MF5LSIab (11 secs)

When the user clicks on next after agreeing to the TOS, the div slides out of screen but the next div slides in under the first div and when the first div is gone, the second dive popups up to the top.

EDIT – Add missing code

jQuery:

$('#tandc_next').click(function(){
    $('#tandc').hide("slide", { direction: "left" }, 1000);
    $('#account_info').show("slide", { direction: "right" }, 1000);
});

CSS for both divs:

background-color: #fff;
border: 1px solid #999;
color: #000;
padding: 8px;
margin-bottom: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;

And the parent container has this:

.registration form > div {
    position: relative; }

The html layout is:

div.registration
     form
        div#tandc
        div#account_info

How do I make it so that the 2nd div slides in so that they top of each div is at the same height?

Answer 1

You should try

.registration form > div {
    position: absolute;
    top:0px;
   }

This way, they both will be aligned on the top of their parent.

EDIT: the problem is that jQuery uses a wrapper to slide, to overcome such effect, you’ll have to wrap them in outer div that will be positioned.

An example of the following could be achieved like that : http://jsfiddle.net/HKsHy/

Using the following layout

div.registration
   form
      div
         div
      div
         div

And adding the css from above (the one with the absolute positioning)

And using the following jQuery

$(".registration form > div").has("#account_info").css("display","none");

$('#tandc_next').click(function() {
    $('#tandc').hide("slide", {
        direction: "left"
    }, 1000);
    $(".registration form > div").has("#account_info").css("display","block");
    $('#account_info').show("slide", {
        direction: "right"
    }, 1000);
});

The first line has to be executed to hide the second div. It’s then showed back. during the slide.

EDIT2:

You could even achieve a cleaner show effect using a timeout. Like that:

function showSecond(){
    $(".registration form > div").has("#account_info").show();
    $('#account_info').show("slide", {
        direction: "right"
    }, 1000);   
}
$('#tandc_next').click(function() {
    $('#tandc').hide("slide", {
        direction: "left"
    }, 1000);
    setTimeout(showSecond,500);       

});

Example here: http://jsfiddle.net/HKsHy/1/