?
Solved

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

Posted on 2009-03-31
10
Medium Priority
?
1,356 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 
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 2000 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…
Suggested Courses

649 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