473,513 Members | 2,266 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

74 New Member
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. } 
  88.  
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 33464

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

Similar topics
8
2581
Right margin stuck on viewport edge
by: Warren Post | last post by:
Here's a problem I've never seen before. On <http://snow.prohosting.com/srcopan/anti/>, should the viewport width be less than the width of the page's header, then the right margin becomes stuck...
HTML / CSS
11
2390
Malloc, Structure Help
by: Mannequin* | last post by:
Hi all, I'm working on a quick program to bring the Bible into memory from a text file. Anyway, I have three questions to ask. First, is my implementation of malloc () correct in the program to...
C / C++
4
2586
Animate content of picture box
by: Marty | last post by:
Hi, Can I animate the content of a picturebox? I mean, I have a static boat picture that I inserted in a picture box, and I would like to programmatically make some water wave around it. Is...
C# / C Sharp
0
1615
I really some need help with this compare validator, which isn't working properly.
by: TN Bella | last post by:
Hi, I am trying to get my compare validator to fire properly...Since I have panels the validator wouldn't work properly, the app would fire right but would insert the data regardless and the...
ASP.NET
9
1925
content negotiation and parsing page contents
by: wardy | last post by:
I'm trying to undestand the impact of using content negotiation when rendering my Web pages to various different browsers as I would like to use the XHTML Strict DOCTYPE declaration. Reading the...
HTML / CSS
2
8766
Simple if...else asp/html question
by: Lawrence | last post by:
Hi I have only begun to look into ASP due to an assignments requirements (I usually code in PHP), one feature in PHP is to be able to do an if...else statement, where if a certain statement is...
ASP / Active Server Pages
38
2199
Structure having pointers
by: sam_cit | last post by:
Hi, I have the following Struct, Struct Sample { int i; char *p; };
C / C++
7
1532
Noob: Loops and the 'else' construct
by: Ixiaus | last post by:
I have just come across a site that discusses Python's 'for' and 'while' loops as having an (optional) 'else' structure. At first glance I interpreted it as being a bit like the 'default'...
Python
1
2212
Web Forum Structure Development -Searching for a Documentation Template
by: vesnianka | last post by:
Hi! I was asked by a client to develop a web forum, in structure and content. My question is, how do I document the structure of a forum, for my client? Is it done as a site map? a mock-up? a...
Networking - Hardware / Configuration
0
1353
How to convert/marshall C Function and DLL Structure type to C#
by: dantz | last post by:
Hi, Can someone please help me convert my C structure/function into C#? I really need this badly... I believe I can call the DLL properly if I have able to correctly convert the function and...
C# / C Sharp
0
7265
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
7171
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
7388
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
1
7111
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
7539
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
5692
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice
1
5095
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA
0
1605
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
C# / C Sharp
1
807
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us