Login Page doesn't transition properly

Question

I made a standard login page that's supposed to slide across when you try to Sign up, except when I click on sign up nothing happens, my JS is linked properly and my CSS seems to be fine too and no errors are showing up in the console log on chrome.Login Page(https://i.sstatic.net/3qVc8XlD.png)

Here's the relevant code:

document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');

    signUpButton.addEventListener('click', () => {
        main.classList.add('right-panel-active');
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});

.container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}

 

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial- 
scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" id="main">
        <div class="sign-up">
            <form action="#">
                <h1>Create Account</h1>
                <p>or use your email for registration</p>
                <input type="text" name="txt" placeholder="Name" 
required="">
                <input type="email" name="email" 
placeholder="Email" required="">
                <input type="password" name="pswd" 
placeholder="Password" required="">
                <input type="number" name="phone" 
placeholder="Phone Number" required="">
                <button type="button">Sign Up</button>
            </form>
        </div>
        <div class="sign-in">
            <form action="#">
                <h1>Sign In</h1>
                <p>or use your account</p>
                <input type="text" name="txt" placeholder="Name" 
 required="">
                <input type="password" name="pswd" 
 placeholder="Password" required="">
                <button>Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To stay connected with us, please login 
 with your personal info</p>
                    <button id="signIn">Sign In</button>
                </div>
                <div class="overlay-right">
                    <h1>Hello Friend!</h1>
                    <p>Enter your personal details and start 
  your journey with us</p>
                    <button id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

I checked for errors in the console and there was nothing

There's errors in the console here for the snippet though, because no element with the ID main exists to begin with. Please provide a proper minimal reproducible example of the issue. — CBroe, Commented Jul 8 at 9:31
@CBroe I didnt include the entire html so it wouldnt be too long but I'll edit the post now — Tom brown, Commented Jul 8 at 9:35
.container .right-panel-active selects elements with the class right-panel-active, that are descendants of elements with the class container. But you are adding the class right-panel-active to the element that already has the class container, not to one of its descendants. So the selector needs to be .container.right-panel-active — CBroe, Commented Jul 8 at 9:42
@CBroe Thanks! Holy shit a simple space ruined my entire morning — Tom brown, Commented Jul 8 at 9:59

Meet · Accepted Answer · 2024-07-09 01:52:17Z

Quite confused about whole question but I think you want is when you click on signup button its credentials should slide to right.

Add solution for that. Please view in full page also modify code as per your needs I have added basic logic and css. Thanks.

document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');
    const signUpDiv = document.querySelector(".sign-up")

    signUpButton.addEventListener('click', () => {
       signUpDiv.style.display = "block";
      setTimeout(() => {
      signUpDiv.style.transform = "translate3d(0,0,0)";
      },500)
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});

.container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}

/* ************NEWLY ADDED************ */

.sign-in{
  display: none;
}

.sign-up{
  display: none;
  transform: translate3d(-50%, 0px,0);
  transition: 1s
}

<body>
    <div class="container" id="main">
        <div class="sign-up">
            <form action="#">
                <h1>Create Account</h1>
                <p>or use your email for registration</p>
                <input type="text" name="txt" placeholder="Name" 
required="">
                <input type="email" name="email" 
placeholder="Email" required="">
                <input type="password" name="pswd" 
placeholder="Password" required="">
                <input type="number" name="phone" 
placeholder="Phone Number" required="">
                <button type="button">Sign Up</button>
            </form>
        </div>
        <div class="sign-in">
            <form action="#">
                <h1>Sign In</h1>
                <p>or use your account</p>
                <input type="text" name="txt" placeholder="Name" 
 required="">
                <input type="password" name="pswd" 
 placeholder="Password" required="">
                <button>Sign In</button>
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To stay connected with us, please login 
 with your personal info</p>
                    <button id="signIn">Sign In</button>
                </div>
                <div class="overlay-right">
                    <h1>Hello Friend!</h1>
                    <p>Enter your personal details and start 
  your journey with us</p>
                    <button id="signUp">Sign Up</button>
                </div>
            </div>
<!--         </div> -->
    </div>
    <script src="script.js"></script>
</body>

Daud Mushtaq · Accepted Answer · 2024-07-08 09:55:53Z

document.addEventListener('DOMContentLoaded', function() {
    const signUpButton = document.getElementById('signUp');
    const signInButton = document.getElementById('signIn');
    const main = document.getElementById('main');

    signUpButton.addEventListener('click', () => {
        main.classList.add('right-panel-active');
    });
    signInButton.addEventListener('click', () => {
        main.classList.remove('right-panel-active');
    });
});

.container .right-panel-active .sign-in{
    transform: translateX(100%);
}

.container .right-panel-active .sign-up{
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.overlay-container{
    position: absolute; 
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform 0.6s ease-in-out;
    z-index: 100;
}

.container .right-panel-active .overlay-container{
    transform: translateX(-100%);
}

.overlay{
    position: relative;
    color: #ffff;
    background: #ff416c;
    left: -100%;
    height: 100%;
    width: 200%;
    background: linear-gradient(to right,#ff4b28,#ff228c);
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.container .right-panel-active .overlay{
    transform: translateX(50%);
}

.overlay-left, .overlay-right{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    top: 0;
    height: 100%;
    width: 50%;
    transform: translateX(0);
    transition: transform 0.6s ease-in-out;
}

.overlay-left{
    transform: translateX(-20%);
}

.overlay-right{
    right: 0;
    transform: translateX(0);
}

.container .right-panel-active .overlay-left{
    transform: translateX(0);
}

.container .right-panel-active .overlay-right{
    transform: translateX(20%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
  <div id="main">
    <div class="overlay-container">
      <div class="overlay">
          <div class="overlay-left">
              <h1>Welcome Back!</h1>
              <p>To stay connected with us, please login with your personal info</p>
              <button id="signIn">Sign In</button>
          </div>
          <div class="overlay-right">
              <h1>Hello Friend!</h1>
              <p>Enter your personal details and start your journey with us</p>
              <button id="signUp">Sign Up</button>
          </div>
      </div>
    </div>
  </div>  
</div>

Collectives™ on Stack Overflow

Login Page doesn't transition properly

2 Answers 2

Not the answer you're looking for? Browse other questions tagged
javascript
html
css
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Not the answer you're looking for? Browse other questions tagged javascripthtmlcss or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
javascript
html
css
or ask your own question.