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
Solved

Would like to slide the a box up from two levels

Posted on 2009-04-01
12
398 Views
Last Modified: 2012-05-06
I have the following code below that allows me to click on the register link and the register box will slide up, but I would like to place a third box below that one and have it slide up as well when you click on the forgot password link.  Is this possible?

$(document).ready(function() {
      $("#register-link").click(function() {
            $("#login").slideUp("fast");
            $("#mask").animate({height:$("#register").height()}, "fast");
            return false;
      });
      $("#login").click(function() {
            $("#login-area").slideDown("fast");
            $("#mask").animate({height:$("#login-area").height()}, "fast");
            return false;
      });
      $("#forgot").click(function() {
            $("#register").slideUp("fast");
            $("#mask").animate({height:$("#login-area").height()}, "fast");
            return false;
      });
});
0
Comment
Question by:pingeyeg
  • 6
  • 5
12 Comments
 
LVL 1

Author Comment

by:pingeyeg
ID: 24039820
Here is my HTML:

<div id="mask">
                              <div id="login" style="margin-bottom: 20px">
                                    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 id="forgot-link" 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 style="margin-top: 10px; text-align: center">
                                                <a id="login" href="">login</a> | <a id="forgot-link" href="">forgot password</a>
                                          </div>
                              </div>
                              <div id="forgot">
                                    Email <input type="text" name="email" class="email" />
                                    <div style="margin: 10px 0 10px 0; text-align: center">or</div>
                                    Username <input type="text" name="email" class="username" />
                              </div>
                              </div>
0
 
LVL 16

Accepted Solution

by:
anoyes earned 300 total points
ID: 24040050
OK, well if you want the link to trigger the slide, then you should be using $('#forgot-link') instead of $('#forgot'), as forgot is the ID of your div and not the link.  And then you should be using $('#forgot').slideUp('fast') instead of $('#register').  So your last block of code should be

$("#forgot-link").click(function() {
            $("#forgot").slideUp("fast");
            $("#mask").animate({height:$("#login-area").height()}, "fast");
            return false;
});
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24040118
Yeah, I didn't mean to past that the way it was.  I had changed it after I realized what was there.  Anway, that gives me a JQuery script error.  I wonder if I need a later version.
0
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
LVL 16

Expert Comment

by:anoyes
ID: 24040136
What's the error you get?  The latest JQ version is 1.3.2, so it probably couldn't hurt to upgrade to that if you don't have the latest (unless you're using the UI also - you'd have to upgrade that too).
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24040193
It tells me that S is null.  This is on line 19 of jquery.min.js.  The way I have mine being called is:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
0
 
LVL 16

Expert Comment

by:anoyes
ID: 24040326
Hmm, ok.  Well, those minified scripts are impossible to debug, so try getting rid of - at least temporarily - the google loader and doing it directly with a script src of http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js, which is the uncompressed version from the Google CDN.  Secondly, do you have this page available somewhere where I could look at it?
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24040470
Ok, using that I get an error once again.  The page in question is at http://forum.teenkidsradio.org.  Click on the forgot password link and the error will show.
0
 
LVL 3

Assisted Solution

by:Ruurtjan
Ruurtjan earned 200 total points
ID: 24040823
Hi,

First of all, an 'id' may only be used once, so i've replaced these with a class.
I don't know if this is anything near what you're looking for, but take a look at my code snippet.

It does what I want it to do in firefox, but chrome and IE seem to be having some dificulty with my code.
I'll try to fix this later, if this is what you want the script to do.

Regards,
Ruurtjan
<html>
	
	<head>
		<script type="text/javascript" src="jquery.js"></script>          
		<script type="text/javascript">
		$(document).ready(function() {
		      $(".login-link").click(function() {
		            $("#mask").animate({height:$("#login").height()}, "slow");
		            $("#login").slideDown("slow");
		            $("#register").slideUp("slow");
		            $("#forgot").slideUp("slow");
		            return false;
		      });
		      $(".register-link").click(function() {
		            $("#mask").animate({height:$("#register").height()}, "slow");
		            $("#register").slideDown("slow");
		            $("#login").slideUp("slow");
		            $("#forgot").slideUp("slow");
		            return false;
		      });
		      $(".forgot-link").click(function() {
		            $("#mask").animate({height:$("#forgot").height()}, "slow");
		            $("#forgot").slideDown("slow");
		            $("#register").slideUp("slow");
		            $("#login").slideUp("slow");
		            return false;
		      });
		      $("#register").hide();
		      $("#forgot").hide();
		});
		</script>
		<style>
			#login { background: lightblue; }
			#register { background: lightgreen; }
			#forgot { background: yellow; }
			#mask { background: black; }
		</style>
	</head>
	
	<body>
		<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 class="register-link" href="">register</a> | <a class="forgot-link" 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 style="margin-top: 10px; text-align: center">
                            <a class="login-link" href="">login</a> | <a class="forgot-link" href="">forgot password</a>
                      </div>
          </div>
          <div id="forgot">
                Email <input type="text" name="email" class="email" />
                <div style="margin: 10px 0 10px 0; text-align: center">or</div>
                Username <input type="text" name="email" class="username" />
	              <div style="margin-top: 10px; text-align: center">
	                    <a class="login-link" href="">login</a> | <a class="register-link" href="">register</a>
	              </div>
          </div>
          </div>
	</body>
	
</html>

Open in new window

0
 
LVL 16

Expert Comment

by:anoyes
ID: 24040854
He does make a good point - IDs are only supposed to be used once.  The error, however, is occurring in the animate function of the JQ library.  Try getting rid of / commenting out the animation line in that forgot-link click function and see if the error goes away.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24040927
Well, now that I turned everything into a class, the layout is all way off.
0
 
LVL 16

Expert Comment

by:anoyes
ID: 24040950
Yah, if your CSS is setup to use IDs to style those elements, then you'll need to adjust that too.  It's really the best way to go though, b/c since IDs should only be used once it can cause some real problems - especially in JS - if you start using an ID more than once.
0
 
LVL 1

Author Comment

by:pingeyeg
ID: 24041232
Looks like I'm good to go now.  Thanks for all you guys' help.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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)

839 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