jquery - JS script causes little shift, how do i prevent it? -
i have form, , if validation failed, jquery prepends error message. when user clicks on form again, error faded out, , here problem: error fade out causes form shift little bit. not big issue, annoys me every time see it. tried fix playing css , setting different margin-top , on, nothing helps. thank 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%; }
what's happening when remove dom doesn't take space anymore. instead hide 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: , should use "on" instead of "delegate" if jquery version 1.7 or later
Comments
Post a Comment