Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1359
  • Last Modified:

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();
      });
});
0
pingeyeg
Asked:
pingeyeg
  • 5
  • 5
1 Solution
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
alien109Commented:
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
 
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now