CODEWITHSUNDEEP
jqueryhtmlcss
Joe Half Face
Joe Half Face

Reputation: 2323

JS script causes little shift, how do i prevent it?

I have some form, and if validation failed, Jquery prepends it with error message. When user clicks on form again, error is faded out, and here is the problem: error fade out causes form to shift up a little bit. Not like this is big issue, but it really annoys me every time I see it. Tried to fix by playing with CSS and setting different margin-top and so on, nothing helps. Thank you for advice.

Jquery:

$('body').delegate("input#email",'focus',function(){
        $('#errors_of_sign').remove();});

$('body').delegate("input#password",'focus',function(){
        $('#errors_of_sign').remove();});

CSS:

.sign_in {
    display: none;
    position: fixed;
    top: 30%;
    left: 28%;
    border-style: solid;
    border-width: 3px;
    border-color: #c1ffc6;
    background: #fff;
    padding: 2%;
    width: 40%;
    height: 25%;
    font-family: Arial, sans-serif;
    z-index: 9999999;
    font-size: 14px;


}
.signs_form{

    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
    display: inline-block;
    border-right-style: solid;
    padding-right: 10%;
    border-width: 1px;
    border-color: #c1ffc6;


}
.fb_sign {

    display: inline-block;
    vertical-align: 100%;
    margin-left: 10%;


}
#sign_in_fb {
    vertical-align: 100%;

}

Upvotes: 0

Views: 64

Answers (1)

jah
jah

Reputation: 1305

What's happening is that when you remove it from DOM it obviously doesn't take up the space anymore. So instead just hide it like this:

$('body').delegate("input#email",'focus',function(){
    $('#errors_of_sign').css('visibility','hidden');
})

$('body').delegate("input#password",'focus',function(){
    $('#errors_of_sign').css('visibility','hidden');
})

Edit: And also you should use "on" instead of "delegate" if your jquery version is 1.7 or later

Upvotes: 1

Related Questions