Miguel Miguel - 2 months ago 7
CSS Question

jQuery code malfunction

i'm building my website and i'm running into some problems… For the landing page i want to make this thing where you have to enter a PW to get in, so i have a text input and beside it there are two divs with 50% width, one floated to the left and the other to the right.

I want it so that when the PW is entered and the RETURN key is entered, the input would fade, and the divs that were behind it would slide to their respective sides.

This works fine. But when I then click the Close button, I want them the two divs to slide back in and return back to their original position. Well, i tried it on CodePen and worked ok, but when i migrated it to my site it kinda went crazy. Here is the repository for my website.

the html:

<div class="input-div">
<i class="fa fa-lock" aria-hidden="true"></i>
<input id="secret" type="password" />
</div>
<div class="container">
<div class="left to-hide"></div>
<div class="right to-hide"></div>
</div>

<div class="container2">
<button>Close</button>
</div>


the css:

html, body{
width:100%;
height:100%;
}

.container{
width:100%;
height:100%;
position:absolute;
top:0;
}

.left{
width:50%;
height:100%;
background-color:#222;
float:left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 1px solid #111;

}

.right{
width:50%;
height:100%;
background-color:#222;
float:right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-left: 1px solid #111;

}

.input-div{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
position:fixed;
z-index:99;
}

input{
width:300px;
height:50px;
font-size:3em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin:10px;
text-align:center;
}

.fa-lock{
font-size:3em;
color:white;
}


.container2{
background-color:crimson;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
}

button{
width:100px;
height:50px;
}


and the jQuery:

$('.right , .left').show();

$(function() {
$('input').keypress(function(e) {
if (e.keyCode == 13) {
if (!$(this).val()) { //if it is blank.
alert('Denied');
} else {
$('.input-div').fadeOut();
$('.to-hide').animate({
width: "0"
},
1000,
function() {
$('.container').hide();
});
}
}
});
});

$('button').click(function() {
$('.container').show();
$('.input-div').fadeIn(1500);
$('.to-hide').animate({width: "50%" }, 1000, function() {});
});

Answer

In your repository you are calling a function on your show() method that's what's causing the effect that it looks like the div's are sliding from the upper left corner.

You need to do this on your websites script.js:

$('button').click(function() {
    $('.container-b').show();
    $('.input-div').fadeIn(1500);
    $('.to-hide').animate({width: "50%" }, 1000);
});

instead of

$('button').click(function() {
    $('.container-b').show(function(){


        $('.to-hide').animate({width: "50%" }, 1000, function() {

            $('.input-div').fadeIn(1500);

        });
    });
});

Here is a codepen example: CodePen

Comments