Solved

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

Posted on 2009-03-31
10
1,349 Views
Last Modified: 2012-05-06
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
Comment
Question by:pingeyeg
  • 5
  • 5
10 Comments
 
LVL 12

Expert Comment

by:alien109
ID: 24034066
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
 
LVL 1

Author Comment

by:pingeyeg
ID: 24034119
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
 
LVL 12

Expert Comment

by:alien109
ID: 24034444
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 1

Author Comment

by:pingeyeg
ID: 24034614
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
 
LVL 1

Author Comment

by:pingeyeg
ID: 24034681
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
 
LVL 12

Accepted Solution

by:
alien109 earned 500 total points
ID: 24035753
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
 
LVL 1

Author Comment

by:pingeyeg
ID: 24038511
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
 
LVL 12

Expert Comment

by:alien109
ID: 24039581
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
 
LVL 1

Author Comment

by:pingeyeg
ID: 24039613
I ask another question so that you get points for it.  Thanks for the help on this one though.
0
 
LVL 12

Expert Comment

by:alien109
ID: 24039946
no problem. glad to help.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

815 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now