jQuery .animate показывает контактную форму, скрытую в div, с отрицательным полем над заголовком - PullRequest
Новая
       8

jQuery .animate показывает контактную форму, скрытую в div, с отрицательным полем над заголовком

0 голосов
/ 05 января 2011

Моя контактная форма скрыта с отрицательным верхним краем, поэтому, когда посетитель нажимает кнопку «Контакт», он показывает div. 

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

Вы можете посмотреть его в прямом эфире здесь: http://www.brianrhea.com/index_contact.php - нажмите на ссылку Контакты в правом верхнем углу

Моя проблема в том, что, как только форма отправлена, она наследует поле -620, и приглашение (или ошибка) становится невидимым.

Я сталкиваюсь с некоторыми другими проблемами кросс-совместимости с интервалом запаса, так что я даже не уверен, что это лучший способ сделать это. Очевидно, было бы замечательно, если бы я мог начать с div как display: hidden и затем анимировать его в видимое, но я не смог этого сделать.

Любой вклад приветствуется, либо с советом о том, как сохранить маржу после отправки формы, либо с предложением лучшего метода для достижения этого скрытия / раскрытия.

Спасибо, Brian

Ответы [ 3 ]

1 голос
/ 05 января 2011

Нажмите кнопку контакта несколько раз, и вы получите неприятную проблему. Я бы изменил функцию click. Просто чтобы было круче (не помню, но есть - это функция, которая делает это намного лучше): 

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

Я бы предложил вообще не разрешать отправку и отправлять ее через AJAX (и не использовать пустой атрибут action. Это более кросс-браузерно, поскольку люди без JS даже не могут использовать эту форму. дайте этой форме id. Давайте назовем ее mr_form.

Когда отправлено mr_form, вы можете фактически заставить его не делать этого и делать свои ошибки без обновления страницы: 

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

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

Для сообщений я бы просто установил их z-index на -99 или display на none. Это делает их невидимыми или делает их плавающими под всем остальным контентом (также установите свой контент z-index). Затем, в зависимости от вашего ответного сообщения, вы можете постепенно увеличивать / уменьшать или перемещать нужное сообщение.

Удачи (просто к вашему сведению, этот код не проверен и может не работать . Скажите, если он неработоспособен, и я его исправлю).

0 голосов
/ 06 января 2011

Я получил несколько отличных предложений и хотел бы поделиться своим решением на случай, если кто-нибудь еще натолкнется на это.

Живая версия доступна здесь: http://www.brianrhea.com - нажмите Запрос проекта

Я начинаю с размещения двух отдельных элементов над содержимым моего сайта.Первый div содержит контент «Спасибо за отправку».Другой div содержит саму контактную форму (div id = contactNone).Оба эти элемента отображаются на экране: ни один в таблице стилей.

Моя кнопка призыва к действию - это элемент, как показано ниже: 

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

Это относится к следующему js 

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

У меня есть кнопка закрытия, которая ссылается на следующее 

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

Для формы я использовал очень хорошую форму на основе AJAX, найденную здесь: www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery

Я очень доволен результатами и благодарен за направление, которое я получил здесь.

Надеюсь, что другие найдут это полезным!

0 голосов
/ 05 января 2011

Попробуйте некоторые из встроенных анимаций, они обычно могут сделать свое дело.Ключом здесь может быть абсолютное позиционирование формы и ее скрытие для начала. 

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