sur le formulaire de modification de la plage de changements de message position pourquoi?

Question

J'essaie de comprendre pourquoi le message généré par jquery change de position chaque fois qu'un champ se vide! Ainsi, si le message est généré par le retour d'ajax, il est placé à l'endroit approprié, juste en dessous de la boîte de connexion. Si le champ (zone de saisie) est vide lors de la soumission, le script ajax n'est pas appelé et le message du champ vide s'affiche correctement, mais 40px ou plus en dessous.

Le script jquery:

<script type="text/javascript"> 
         <!-- 
         $(document).ready(function(){ 
          $("#loginform").submit(function(){ 

           $('#loginform input[type=text]').each(function(n,element){ 
            if ($(element).val()=='') { 
             $(".message").html('<p>O campo '+element.id+' tem de ter um valor!</p>').fadeIn("slow").delay(2000).fadeOut(1000); 
             return false; 
            } 

            else{ 
             $.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){ 
              if(data == '1'){ 
               $("#subLog").hide(); 
               $(".message").html('<p>Login efectuado com sucesso, a redirecionar...</p>').fadeIn("slow").delay(2000).fadeOut(1000, function(){ 
                $("#login").fadeOut('slow', function(){ 
                 location.reload(); 
                }); 
               }); 
              } 
              else{ 
               $("#subLog").hide(); 
               $(".message").html('<p>Erro! Tente novamente por-favor!</p>').fadeIn("slow").delay(1500).fadeOut(1000, function(){ 
                $("#subLog").fadeIn('fast'); 
               }); 
              } 
             }); 
            } 
           }); 
           return false; 
          }); 
         }); 
         //--> 
         </script> 

Le style de message css:

.message{ 
    text-align:center; 
    color: white; 
    background: rgba(0, 0, 0, .5); 
    margin-top: 65px; 
    padding: 4px; 
    font-weight: bold; 
    font-size: small; 
    border: 2px solid white; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
    -khtml-border-radius: 6px; 
    border-radius: 6px; 
} 

la forme:

<div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;"> 

<form id="loginform" action="" method="post"> 

    <fieldset style="display: block"> 
     <legend></legend> 
      <input id="Nome" class="transparent" type="text"> 
     <input id="Palavra-passe" class="transparent" type="password"> 
     <input id="subLog" type="submit" value="Login"> 
    </fieldset> 

</form> 

<div class="message"></div> 

MISE À JOUR:

Le bouton de soumission est masqué lorsque l'instruction ajax est appelée, par conséquent, la position change 65px. Pour corriger ce petit problème, j'ai supprimé la propriété margin-top de la règle css et changé la position avec .css ('margin-top', 'value'). De cette façon, je change la valeur pour les différents messages et les deux sont affichés dans la même position d'écran. Je vous remercie.

Answer 1

Eh bien, je ne sais pas exactement à quoi il ressemble après la réponse ajax, mais si vous laissez le champ vide, vous avez juste besoin d'enlever cette ligne de css

margin-top: 65px; 

et il est ok.

regarder ici: http://jsfiddle.net/Ature/2/

post-scriptum J'ai aussi ajouté

$('div.message').hide(); 

pour éviter d'avoir l'affichage des messages div avant avertissement est généré

EDIT - peut-être vous avez d'autres règles affectant votre div. Si les autres règles sont chargées avant de l'insérer, vous pouvez ajouter la ligne

margin-top: 0px; 

pour les ignorer.

En outre: n'oubliez pas de vider votre cache lorsque vous rechargez votre page!