How do I get my content 2 to be hidden initially and then slided in from the right?

Question

document.getElementById("button1").addEventListener("click", mouseOver1);

function mouseOver1(){

   document.getElementById("button1").style.color = "red";

}


document.getElementById("button2").addEventListener("click", mouseOver); 


    function mouseOver(){ 

      document.getElementById("button2").style.color = "purple";
   }



$("#button1").hover(function() {
    $(this).css('cursor','pointer');
}); 

$("#button2").hover(function() {
    $(this).css('cursor','pointer');
}); 
 

 $('#button1').on('click', function () {
   var error = 0; 
   var usernameError = document.getElementById("username_error1");
   var passwordError = document.getElementById("password_error2");

   if ($(".existingUsername").get(0).value != "S0104675") {
   usernameError.innerHTML = "Please enter an existing valid username";
    error = 1; 
    } else {
    usernameError.innerHTML = '';
   } 
   if ($(".existingPassword").get(0).value != "honor433") {
    passwordError.innerHTML = "Please enter an existing valid password";
     error = 1;

   } else {
    passwordError.innerHTML = '';
  }
  if(error == 0)
  {  
     $("#para1").animate({ left: "-100%" });
     $(".username-label").animate({ left: "-105%" });
     $(".existingUsername").animate({ left: "-105%" });
     $(".password-label").animate({ left: "-105%" });
     $(".existingPassword").animate({ left: "-105%" });
     $("#button1").animate({ left: "-105%" });
  }

});

$('#button2').on('click', function () {

var newUsernameError = $("#New_Username_error").html('');
var newPasswordError = $("#New_Password_error").html('');
var newEmailAddressError = $("#New_Email_error").html('');
var newRepeatEmailAddressError = $("#Repeat_Email_error").html('');

var newUsername = $('.newUsername').val();
var newPassword = $('.newPassword').val();
var newEmail = $('.newEmail').val();
var repeatEmail = $('.repeatEmail').val();

var errorsFound = 0; 

if (newUsername === "") {
  errorsFound = 1;
  newUsernameError.html("The username must not be empty.");
} else if (newUsername.length < 6) {
  errorsFound = 1;
  newUsernameError.html("The username must be at least 6 characters.");
}

if (newPassword.length < 6) {
  errorsFound = 1;
  newPasswordError.html("The password must be at least 6 characters.");
}

if (newEmail === "") {
  errorsFound = 1;
  newEmailAddressError.html("The email must not be left empty.");
} else if (!/@/.test(newEmail)) {
  errorsFound = 1;
  newEmailAddressError.html("The email must contain an @ symbol.");
}

if (repeatEmail !== newEmail) {
  errorsFound = 1;
  newRepeatEmailAddressError.html("This repeat email doesn't equal first.");
}

if(errorsFound == 0) { 
  
     $("#para2").animate({ left: "-100%" });
     $(".Username-label1").animate({ left: "-105%" });
     $(".newUsername").animate({ left: "-105%" });
     $(".Password-label2").animate({ left: "-105%" });
     $(".newPassword").animate({ left: "-105%" });
     $(".Email-label3").animate({ left: "-105%" });
     $(".newEmail").animate({ left: "-105%" });
     $(".Repeat-Email-label4").animate({ left: "-105%" });
     $(".repeatEmail").animate({ left: "-105%" });
     $("#button2").animate({ left: "-105%" });
}
 
});

.intro h1 {
  font-family: 'Cambria';
  font-size: 16pt;
  font: bold;
  text-align: left;
}

.intro p {
  font-family: 'Calibri';
  font: italic;
  font-size: 12pt;
  padding: 0px 690px 0px 20px;
  text-align: left;
}

.content {
  border: 2px solid;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

#para1 {
  padding: 0px 1050px 0px 20px;
  position: relative; 
}

#para2 {
  padding: 0px 1099px 0px 20px;
  position: relative; 
}

.username-label,
.password-label {
 margin: 10px 0px 0px 350px;
 position: relative; 
 top: -70px; 
}

.existingUsername, 
.existingPassword, 
#username_error1, 
#password_error2
{
    top: -70px; 
     position: relative;       
}

#button1{ 
     background-color: #add8e6;
     margin-left: 425px; 
     position: relative; 
     top: -70px; 
    -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius:10px;
  padding: 0px 20px 0px 20px; 
}

#button2{
  background-color: #add8e6;
  margin-left: -500px; 
  position: relative; 
  top: -10px; 
 -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  padding: 0px 20px 0px 20px; 

}


.Username-label1, 
.Password-label2,           
.Email-label3, 
.Repeat-Email-label4 
{
  margin: 0px 0px 0px 330px;
  position: relative; 
  top: -70px; 
}
.newUsername, 
.newPassword, 
.newEmail, 
.repeatEmail{
  position: relative;
   top: -70px;
  margin-left: 40px; 

} 

span{

 color: red; 
 margin-left: 300px;
 position: relative; 
 top: -70px; 
}

#LeftElementNames, 
#RightElementValues{ 

  display: hidden; 
  border: 1px; 
 /* I want element names all on one side (left) inside of the border and element value (right) and a vertical line separating them */ 

}

<html>

<head>

  <link href="Home.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <title>Project</title>

</head>

<body>


<div class="container">
  <div class="intro">

    <h1>Welcome to Cuyahoga Community College Student Services Online</h1>

    <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>
  </div>
  <br/>

  <div class="content">
    <div class="row top">
      <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
      <div class="login">
        <label class="username-label" for="existingUsername">Username</label> 
         <input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>


        <label class="password-label" for="existingPassword">Password</label>
        <input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
        <button id="button1">Log in</button>
      </div>
    </div>
    <hr/>
    <div class="row bottom">
      <p id="para2">New users, please create a new account by providing us with some basic information.</p>

      <div class= "new_customers_info">

        <label class="Username-label1" for="newUsername">Username</label>
        <input class="newUsername" type="text"/>
        <br><span id="New_Username_error"></span><br>

        <label class="Password-label2" for="newPassword">Password</label>
        <input class="newPassword" type="password"/>
        <br><span id="New_Password_error"></span><br>

        <label class="Email-label3" for="newEmail">Email Address</label>
         <input class="newEmail" type="email"/>
         <br><span id="New_Email_error"></span><br>

        <label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
         <input class="repeatEmail" type="email"/>
         <span id="Repeat_Email_error"></span>

        <button id="button2">Create Account</button>
      </div>
    </div>
   

  </div>
    <div class="content2">

   <div id="LeftElementNames">
   <label class="ElementOne"  for="accountName">AccountName</label><br>
   <label class="ElementTwo"  for="accountEmail">EmailAddress</label><br> 
   <label class="ElementThird" for="accountGpa">CurrentGPA</label><br>
   </div>

   <div id="RightElementValues">
    <input class="accountName"  type= "text"/>
    <input class="accountEmail" type= "email"/>
    <input class="accountName" type= "number"/>
   </div>
  </div>
   <br/>
  <footer>Cuyahoga Community College</footer>
  <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
    <script src="Home.js"></script>
</body>
</html>

Hello Everyone,

I am having trouble with understanding why content2 information is not hidden when I refresh my page and how can I get it to be unhidden when it's animated(slide) in from the right (in the upper part content inside of my radius border content) upon an existing user entering the correct information account , and another problem I am having is how to use JSON to populate an existing user accounts information into the appropriate texboxes. Can that even be done? Any examples would be much appreciated. Here is my current code so far.

score 0 · Answer 1 · answered May 09 '17 at 23:29

0

why content2 information is not hidden when I refresh my page

Because you did not hide it. Simply add this in your CSS:

.content2{
   display:none;
}

how can I get it to be unhidden when it's animated(slide) in from the right

Using Jquery alone you cannot do slide-right without manipulating CSS manually. Start with a simple hide/show.

$(".content2").show();

how to use JSON to populate an existing user accounts information into the appropriate texboxes

Given:

<input type='text' class='name-box'>
<input type='text' class='age-box'>

and in js you have:

var data = {
    name : "John Doe",
    age : 21
};

Then simply:

$(".name-box").val(data.name);
$(".age-box").val(data.age);

answered May 09 '17 at 23:29

Don Bhrayan Singh

474
4
9

So after I hide my content 2, I need to make it visible to upon sliding it from the right? $(".content2").show(); would make it visible again. How would this work with the animation and showing it? Do you think you could show me an example related to situation? @Don Bhrayan Singh – User445555 May 09 '17 at 23:41
$('#button1').click(function () { $(".content2").show("slide", { direction: "right" }, 1000); Will something like the code I posted here work for me? @Don Bhrayan Singh – User445555 May 10 '17 at 00:03

How do I get my content 2 to be hidden initially and then slided in from the right?

1 Answers1