468,253 Members | 1,302 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,253 developers. It's quick & easy.

How to properly use an if/else structure to animate new content from the right?

74 64KB
How can I get my current content to slide to the left and bring in new content from the right (after clicking on button 1) when an existing student's username and password are correct, and if it's not correct display error messages that either the username or password isn't correct below each respective textbox .I am thinking about using an if/else condition. Also, how would I load the student's existing account information upon sliding it from the right, if I haven't created the content yet? If I already created the content to be slide in from the right, where do I hold that information until it's time to display that new content. Here is my code so far.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4.  
  5.   <link href="Home.css" rel="stylesheet" />
  6.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  7.   <title>Project</title>
  8.  
  9. </head>
  10.  
  11. <body>
  12.  
  13.  
  14. <div class="container">
  15.   <div class="intro">
  16.  
  17.     <h1>Welcome to Cuyahoga Community College Student Services Online</h1>
  18.  
  19.     <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  20.   </div>
  21.   <br/>
  22.  
  23.   <div class="content">
  24.     <div class="row top">
  25.       <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
  26.       <div class="login">
  27.         <label class="username-label" for="username-part1">Username</label> &nbsp; 
  28.          <input class="existing1-username-input-textbox" type="text" value="" />
  29.         <br/><br/>
  30.         <label class="password-label" for="password-part2">Password</label> &nbsp; 
  31.         <input class="existing2-password-input-textbox" type="password" value="" />
  32.         <br/>
  33.         <button id="button1">Log in</button>
  34.       </div>
  35.     </div>
  36.     <hr/>
  37.     <div class="row bottom">
  38.       <p id="para2">New users, please create a new account by providing us with some basic information.</p>
  39.  
  40.       <div class= "new_customers_info">
  41.  
  42.         <label class="Username-label1" for="new-user-name-part-1">Username</label>
  43.         <input class="username-new-input-textbox" type="text" value="" />
  44.          <br/><br/>
  45.  
  46.         <label class="Password-label2" for="password-new-part2">Password</label>
  47.         <input class="password-new-input-textbox" type="password" value="" />
  48.          <br/><br/>
  49.  
  50.         <label class="Email-label3" for="email-new">Email Address</label>
  51.          <input class="email-new-input-textbox" type="text" value=""/>
  52.           <br/><br/>
  53.  
  54.         <label class="Repeat-Email-label4" for="repeat-new-email">Repeat Email Address</label>
  55.          <input class="reenter-new-input-textbox" type="text" value="" />
  56.  
  57.         <button id="button2">Create Account</button>
  58.       </div>
  59.     </div>
  60.   </div>
  61.    <br/>
  62.   <footer>Cuyahoga Community College</footer>
  63.   <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
  64. </div>
  65.     <script src="Home.js"></script>
  66. </body>
  67. </html>
Expand|Select|Wrap|Line Numbers
  1. .intro h1 {
  2.   font-family: 'Cambria';
  3.   font-size: 16pt;
  4.   font: bold;
  5.   text-align: left;
  6. }
  7.  
  8. .intro p {
  9.   font-family: 'Calibri';
  10.   font: italic;
  11.   font-size: 12pt;
  12.   padding: 0px 690px 0px 20px;
  13.   text-align: left;
  14. }
  15.  
  16. .content {
  17.   border: 2px solid;
  18.   -webkit-border-radius: 10px;
  19.   -moz-border-radius: 10px;
  20.   border-radius: 10px;
  21. }
  22.  
  23. #para1 {
  24.   padding: 0px 1050px 0px 20px;
  25. }
  26.  
  27. #para2 {
  28.   padding: 0px 1099px 0px 20px;
  29. }
  30.  
  31. .username-label,
  32. .password-label {
  33.  margin: 10px 0px 0px 300px;
  34.  position: relative; 
  35.  top: -70px; 
  36. }
  37.  
  38. .existing1-username-input-textbox, 
  39. .existing2-password-input-textbox
  40. {
  41.     top: -70px; 
  42.      position: relative; 
  43.  
  44. }
  45.  
  46. #button1{ 
  47.      background-color: #add8e6;
  48.      margin-left: 390px; 
  49.      position: relative; 
  50.      top: -50px; 
  51.     -webkit-border-radius: 10px;
  52.   -moz-border-radius: 10px;
  53.   border-radius:10px;
  54.   padding: 0px 20px 0px 20px; 
  55. }
  56.  
  57. #button2{
  58.   background-color: #add8e6;
  59.   margin-left: -200px; 
  60.   position: relative; 
  61.   top: -30px; 
  62.  -webkit-border-radius: 10px;
  63.   -moz-border-radius: 10px;
  64.   border-radius: 10px;
  65.   padding: 0px 20px 0px 20px; 
  66.  
  67. }
  68.  
  69.  
  70. .Username-label1, 
  71. .Password-label2,           
  72. .Email-label3, 
  73. .Repeat-Email-label4 
  74. {
  75.   margin: 0px 0px 0px 300px;
  76.   position: relative; 
  77.   top: -70px; 
  78. }
  79. .username-new-input-textbox, 
  80. .password-new-input-textbox, 
  81. .email-new-input-textbox, 
  82. .reenter-new-input-textbox{ 
  83.   position: relative;
  84.    top: -70px;
  85.   margin-left: 20px; 
  86.  
  87.  
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("button1").onmouseover = function() {mouseOver1()}; 
  2.  
  3. document.getElementById("button1").onmouseout  = function() {mouseOut1()}; 
  4.  
  5.     function mouseOver1(){ 
  6.  
  7.       document.getElementById("button1").style.color = "red";
  8.    }
  9.  
  10. function mouseOut1(){ 
  11.  
  12.       document.getElementById("button1").style.color = "black";
  13.    }
  14.  
  15.  
  16.  
  17. document.getElementById("button2").onmouseover = function() {mouseOver()}; 
  18.  
  19. document.getElementById("button2").onmouseout  = function() {mouseOut()}; 
  20.  
  21.     function mouseOver(){ 
  22.  
  23.       document.getElementById("button2").style.color = "purple";
  24.    }
  25.  
  26. function mouseOut(){ 
  27.  
  28.       document.getElementById("button2").style.color = "black";
  29.    }
  30.  
  31.  
  32. $("#button1").hover(function() {
  33.     $(this).css('cursor','pointer');
  34. }); 
  35.  
  36. $("#button2").hover(function() {
  37.     $(this).css('cursor','pointer');
  38. }); 
  39.  
  40.  $(document).ready(function(){
  41.         $("#button1").click(function(){ 
  42.  
  43.        if(username.value== "Micheal" && password.value== "honor7thG") { 
  44.  
  45.             $('#para1').hide("slide", {direction: "left" }, 1000); 
  46.             $('.username-label').hide("slide", {direction: "left" }, 1000);
  47.             $('.existing1-username-input-textbox').hide("slide", {direction: "left" }, 1000);
  48.             $('.password-label').hide("slide", {direction: "left" }, 1000);
  49.             $('.existing2-password-input-textbox').hide("slide", {direction: "left" }, 1000);
  50.  
  51.             $('').show("slide", { direction: "right" }, 1000);   
  52.  
  53.  
May 3 '17 #1
0 33199

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by Warren Post | last post: by
11 posts views Thread by Mannequin* | last post: by
4 posts views Thread by Marty | last post: by
38 posts views Thread by sam_cit | last post: by
7 posts views Thread by Ixiaus | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.