Solved

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

Posted on 2009-03-31
10
1,344 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

757 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

19 Experts available now in Live!

Get 1:1 Help Now