jQuery .animate revelan formulario de contacto oculto en div con margen negativo por encima de cabecera

Question

Tengo mi formulario de contacto oculto con un margen superior negativo, de modo que cuando los clics de los visitantes "Contacto" Revela la div.

<script type="text/javascript">$("#revealContact").click(function(){
     $("#contact").animate({
          marginTop: "+=620px"
    }, 1000);
});</script>

También se puede ver en vivo aquí: http://www.brianrhea.com/index_contact.php - haga clic en Contacto eslabón de arriba a la derecha

Mi problema es que tan pronto como se envía el formulario, hereda el margen de -620 y el éxito (o error) del sistema es invisible.

Me estoy quedando en algunos otros problemas de compatibilidad cruzada, así como con el espaciado de margen por lo que ni siquiera estoy seguro de que esta es la mejor manera de ir sobre esto. Obviamente sería genial si pudiera comenzar con el div como pantalla:. Escondido y luego animar a visible, pero no he sido capaz de hacer eso

Cualquier entrada es apreciado, ya sea con consejos sobre cómo salvar el margen después de envío de formularios, o sugerencia sobre el mejor método para lograr esta piel / revelar.

Gracias, Brian

Answer 1

Tengo algunas sugerencias excelentes y quería compartir mi solución en el caso de cualquier otra persona se encuentra con esto.

La versión en vivo se puede ver aquí: http://www.brianrhea.com - hacer clic Solicitud Proyecto

Para empezar, coloque dos divs separados por encima del contenido de mi sitio web. La primera div contiene los "Gracias por enviar" contenido. El otro div contiene el formulario de contacto en sí mismo (div id = contactNone). Ambos de estos divs se dan pantalla:. Ninguno en la hoja de estilo

Mi llamado a botón de acción es un div de la siguiente manera:

<div id="projectRequestHome">
<a href="#">Request a Project</a>
</div>

Esto hace referencia a los siguientes js

 $("#revealContact").click(function(){
   $("#contactNone").slideDown('slow');
 });

Tengo un botón de cierre que hace referencia al siguiente

 $("#hideContact").click(function(){
   $("#contactNone").slideUp('slow');
 });

Para la forma, que utiliza una muy buena forma basada en AJAX encontrar aquí: www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery

Estoy muy satisfecho con los resultados y agradecido por la dirección que he recibido aquí.

Esperamos que otros ha resultado útil!

Answer 2

Haga clic en el botón de contacto varias veces, y se obtiene un desagradable problema. Que cambiaría la función alrededor click. Sólo para que sea más fresco (no me acuerdo, pero hay es una función para hacer esto mucho mejor):

$('#revealContact').click(function()
{
  if ($('#contact').css('marginTop') != '620px')
  {
    $("#contact").stop().animate({marginTop: '620px'}, 1000);
  } else {
    $("#contact").stop().animate({marginTop: '0px'}, 1000);
  }
});

Yo sugeriría que no permite un submit en absoluto, y su presentación a través de AJAX (y no usar un atributo action en blanco. Eso es más de multi-navegador, como las personas sin JS ni siquiera pueden usar esa forma. Daría que formar una id. llamada Hagámosle mr_form.

Cuando se envía mr_form, en realidad se puede obligar a no hacerlo y sus errores sin una actualización de la página:

$('#mr_form').submit(function()
{
  return false;

  $.post('your_contact_file.php', $('#mr_form').serialize(), function(response)
  {
    if (response == 'blah')
    {
      /* Do blah */
    } else {
      /* Blah */
    }
  });
});

Para los mensajes, me acaba de establecer su z-index a -99 o display a none. Eso los hace invisibles, o hace a continuación, flotando por debajo de todos los otros contenidos (establecido z-index de su contenido también). Luego, dependiendo de su mensaje de respuesta, puede fade in / out o diapositivas, etc., el mensaje deseado.

Buena suerte (como digo, este código no se ha probado y podría no funcionar . Dime si es brokeded, y yo lo arreglo).

Answer 3

probar algunas de la incorporada en las animaciones, que normalmente puede hacer el truco. La clave aquí puede ser para posicionar la forma absoluta, y esconderlo para comenzar.

$("#revealContact").click(function(){
     $("#contact").slideDown();
});