Using JQuery to slide a login up and away and reveal the register section

I am trying to make a slick looking login area where when the user clicks on the register link, the register section will slide up and reveal itself and the login section will slide up and hide.  I have gotten the code below to move, but the login section will not completely go away and the register area won't stay.  Any help is appreciated.

HTML

<div id="login">
                                    Username <input type="text" name="username" class="input-box" />
                                    <div style="margin-top: 10px">
                                          Password <input type="password" name="password" class="input-box" />
                                    </div>
                                    <div style="margin-top: 10px; text-align: center">
                                          <input type="image" src="/images/loginbtn.png" />
                                          <input type="hidden" name="submitBtn" value="1" />
                                    </div>
                                    <div style="margin-top: 10px; text-align: center">
                                          <a id="register-link" href="">register</a> | <a href="">forgot password</a>
                                    </div>
                              </div>
                              <div id="register">
                                    Name <input type="text" name="name" class="input-box" />
                                          <div style="margin-top: 10px">
                                                Username <input type="text" name="username" class="input-box" />
                                          </div>
                                          <div style="margin-top: 10px">
                                                Password <input type="password" name="password" class="input-box" />
                                          </div>
                                          <div style="margin-top: 10px; text-align: center">
                                                <input type="image" src="/images/registerbtn.png" />
                                                <input type="hidden" name="registerBtn" value="1" />
                                          </div>
                              </div>


JQuery

$(document).ready(function() {
      $("#register").hide();
      $("#register-link").click(function() {
            $("#register").slideUp("fast").show();
            $("#login").slideUp("fast").hide();
      });
});
LVL 1
pingeyegAsked:
Who is Participating?
 
alien109Connect With a Mentor Commented:
Why are you setting all those styles with jQuery? Keep as much as you can in CSS. If for some reason some one has a slow connection, the page may render partially before the dom is ready and the event is fired off to execute that script resulting in a strange visual effect. Keep presentation and functionality separate.

Again, the show() following slideUp is not necessary.

All you need is this. You can even animate the mask height.

<style type="text/css">
      #mask {
            overflow:hidden;
            height:150px;
            border:1px solid #000;
      }
      #login {
            height:150px;

      }
      #register {
            height:200px;
      }
</style>

<script type="text/javascript">
$(document).ready(function() {
      $("#register-link").click(function() {
            $("#login").slideUp("fast");
            $("#mask").animate({height:$("#register").height()}, "fast");
            return false;
      });
});
</script>
0
 
alien109Commented:
you need to pevent the link for loading the page.

$(document).ready(function() {
      $("#register").hide();
      $("#register-link").click(function() {
            $("#register").slideUp("fast").show();
            $("#login").slideUp("fast").hide();
            return false;
      });
});
0
 
pingeyegAuthor Commented:
Using this method shows the register box before it disappears, I assume there is no way to prevent that from happening if someone has a slow connection is there?
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
alien109Commented:
I think you're confusing what the effect slideUp does. slideUp hides an object. slideDown reveals. The reason it is showing itself, is the show() method is called before the animation completes. Chaining in jQuery doesn't mean it will wait until the animation has completed. You'd need to supply a callbuck function for that. That is also why you see the login div flash. It starts the slideUp animation, then hides itself, but the slideUp animation shows it again until it is finished. You don't need to hide the login div after calling slideUp.

The reason it looks like the registration form is sliding, is that it's position is actually being affected by the login div as it is collapsing.

There's a a few ways you could accomplish this effect. Mask the two divs with another div (using the outter div's overflow property set to hidden) Then you could just call slideUp on the login div.

//Javascript

$(document).ready(function() {
        $("#register-link").click(function() {
                  $("#login").slideUp("fast");
                  return false;
        });
});

//Styles

<style>
      #mask {
            overflow:hidden;
            height:120px;
      }
      #login, #register {
            height:120px;
      }
</style>

//HTML

<div id="mask">
<div id="login">
      Username <input type="text" name="username" class="input-box" />

      <div style="margin-top: 10px">
            Password <input type="password" name="password" class="input-box" />
      </div>

      <div style="margin-top: 10px; text-align: center">
            <input type="image" src="/images/loginbtn.png" />
            <input type="hidden" name="submitBtn" value="1" />
      </div>

      <div style="margin-top: 10px; text-align: center">
            <a id="register-link" href="">register</a> | <a href="">forgot password</a>
      </div>

</div>
<div id="register">
      Name <input type="text" name="name" class="input-box" />
      <div style="margin-top: 10px">
            Username <input type="text" name="username" class="input-box" />
      </div>
      <div style="margin-top: 10px">
            Password <input type="password" name="password" class="input-box" />
      </div>
      <div style="margin-top: 10px; text-align: center">
            <input type="image" src="/images/registerbtn.png" />
            <input type="hidden" name="registerBtn" value="1" />
      </div>
</div>
</div>

0
 
pingeyegAuthor Commented:
Now my only issue is the size of things.  The height of 120px is not enough for the register area.  Could the below work for this if I removed the css from the linked stylesheet?

$(document).ready(function() {
      $("#login").css({
            height: "150px";
      });
      $("#register-link").click(function() {
            $("#login").slideUp("fast").show();
            $("#register").css({
                  height: "250px"
            });
            return false;
      });
});
0
 
pingeyegAuthor Commented:
Well, I tried the following, but the #mask does not seem to be working toward not allowing the register area to flash before everything loads.

$(document).ready(function() {
      $("#mask").css({"height": "150px", "overflow": "hidden"});
      $("#login").css({"height": "150px"});
      $("#register-link").click(function() {
            $("#login").slideUp("fast").show();
            $("#mask").css({"height": "200px"});
            $("#register").css({"height": "200px"});
            return false;
      });
});
0
 
pingeyegAuthor Commented:
I get, I get.  Well, the register area does slide up nicely, but when I place the code for the login to come back down upon clicking on the link for login, the login area doesn't do its smoothslide.  It basically just becomes there.
0
 
alien109Commented:
Not sure what code you are using for that - Wasn't part of the original question. But, if you want to show the login again, you just need to do something like this (assuming you have a login link with the id of "login-link"):

$("#login-link").click(function() {
      $("#mask").animate({height:$("#login").height()}, "fast");
      $("#login").slideDown("fast");
      return false;
});
0
 
pingeyegAuthor Commented:
I ask another question so that you get points for it.  Thanks for the help on this one though.
0
 
alien109Commented:
no problem. glad to help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.