Войти Регистрация

Вход на сайт

Логин *
Пароль *

RSForm прокрутка вверх страницы многостраничной формы

Вторник, 27 октября 2020 08:20 Автор 

Рассмотрим еще одно небольшое, но очень важное усовершенствование мощного конструктора форм RSForm для CMS Joomla. На этот раз затронем многостраничную форму, когда очень большая форма разбивается с помощью инструмента "Разделитель страниц" на несколько страниц с навигацией. Не расписываю как это делается, предполагается, что у нас уже есть подобная форма и нужно её немного поправить для лучшей визуализации.

Что именно не так в многостраничном варианте? Да просто при переходе от страницы к странице скролл остается в том же положении. То есть заполняет пользователь поля, прокручивая страничку вниз, а потом нажимает далее и видит что то в середине или конце следующей страницы и ему приходится прокручивать страницу вверх.
Собственно понятный глюк, кто столкнётся, тот сразу поймёт о чём речь.

Исправим это недоразумение (странно, почему разработчики не увидели эту проблему, ведь даже на их сайте, демо форма с таким же эффектом...)

Итак, открываем форму, заходим на вкладку "Свойства" и слева выбираем пункт "CSS и Javascript"

rsfp config

Далее прокручиваем вниз и в поле Javascript вставляем следующий код:


<script>
RSFormPro.Pages.show = function(thePage) {
  RSFormProUtils.removeClass(thePage, 'formHidden');
    var pageNumber = parseInt(thePage.id.split("_").pop());
    if(pageNumber > 0 ){
        window.scrollTo(0, findPos(document.getElementById('userForm')));
    }
}
 
function findPos(obj) {
  var curtop = 0;
   if (obj.offsetParent) {
    do {
        curtop += obj.offsetTop;
       } while (obj = obj.offsetParent);
   return [curtop-80];
   }
}
 
</script>

Для простого варианта это решение, предлагаемое на сайте разработчика, может быть окончательным, теперь при переходе к другой странице будет работать прокрутка до начала формы! И тут важно понять, что не до начала всей страницы, а именно до начала самой формы. Опа, и опять открывается новая проблема для тех, кто решил воспользоваться отображением "прогресса" - это текстовая и графическая визуализация количества страниц. Вот так выглядит:

rsfp steps

Эти элементы по умолчанию находятся выше формы, а значит при прокрутке к началу формы, они просто будут не видны :( Но и тут есть решения, даже два!

Первый вариант, это поиграться со смещением прокрутки наверх, просто подберите значение для вашего случая. У меня получилось так:

rsfp curtop

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

Но! У всех ведь разные ситуации и вам потребуется прокрутка именно наверх всей страницы. При такой необходимости воспользуйтесь упрощенным вариантом кода без определения всяких там позиций. Просто прокрутка на самый верх и всё :)


<script>
RSFormPro.Pages.show = function(thePage) {
  RSFormProUtils.removeClass(thePage, 'formHidden');
    var pageNumber = parseInt(thePage.id.split("_").pop());
    if(pageNumber > 0 ){
        window.scrollTo(0, findPos(document.getElementById('userForm')));
    }
}
function findPos(obj) {
  scroll(0,0);
}
</script>


Всем удачи в покорении RSForm! Там еще много интересного

P.S. Решение протестировано на Joomla 3.9.22 и конструкторе форм RSForm! Pro 2.3.16

Stanislav

Master's Degree

Сайт: skopil.ru
Авторизуйтесь, чтобы получить возможность оставлять комментарии

Новые статьи

  • Сбой при обновлении расширений Regular Labs
    Сбой при обновлении расширений Regular Labs

    Давно пользуюсь различными расширениями от студии Regular Labs, но недавно при очередном обновлении через панель администратора Joomla я получил ошибку обновления. При этом не все расширения выдавали такую ошибку. Разумеется, решение было найдено, делюсь :)

    Подробнее ...
  • Adobe Photoshop - чёрный экран при создании нового файла
    Adobe Photoshop - чёрный экран при создании нового файла

    Новые фишки от компании Adobe видимо работают не на всех устройствах, то ли видеопроцессоры не тянут, то ли ещё какие заморочки, но суть в том что многие сталкиваются с проблемой сразу при открытии Adobe Photoshop и видят черный экран. А при создании нового файла наблюдается пустое серое окно, что тоже не очень приятно. В этой статье опишу как исправить это.

    Подробнее ...
  • Intel Dual Band Wireless-AC 7260. Ошибки.
    Intel Dual Band Wireless-AC 7260. Ошибки.

    Для тех, кто решил установить себе модуль WiFi/Bluetootth с поддержкой двух диапазонов WiFi от компании и столкнулся с ошибками Bluetooth код 43 или код 10, а также с отсутствием поддержки режима "ac" WiFi, собственно и пригодится данная статья, в которой я опишу решение данных проблем.

    Подробнее ...
  • RSForm прокрутка вверх страницы многостраничной формы
    RSForm прокрутка вверх страницы многостраничной формы

    Рассмотрим еще одно небольшое, но очень важное усовершенствование мощного конструктора форм RSForm для CMS Joomla. На этот раз затронем многостраничную форму, когда очень большая форма разбивается с помощью инструмента "Разделитель страниц" на несколько страниц с навигацией. Не расписываю как это делается, предполагается, что у нас уже есть подобная форма и нужно её немного поправить для лучшей визуализации.

    Подробнее ...
  • RSForm маска ввода телефона
    RSForm маска ввода телефона

    Столкнулся с очень интересным и мощным конструктором форм RSForm под управлением Joomla CMS. Кто хоть раз им пользовался понимает, что функционал данного конструктора сразу не освоить, а умеет этот компонент очень много! Не буду сильно расписывать данный конструктор, а перейду непосредственно к теме статьи. Хочу поделиться простым способом подключения ввода телефонного номера по определенной маске.

    Подробнее ...
  • Страница 404 ошибки в Joomla 3 с помощью пункта меню
    Страница 404 ошибки в Joomla 3 с помощью пункта меню

    Ранее в статье Страница 404 ошибки в Joomla 3.9 был описан способ подключения страницы с помощью штатного материала Joomla. Однако, это не всегда подходит, особенно в сложных шаблонах, где используются конструкторы контента. В данной статье речь пойдет о способе подключения страницы 404 используя пункт меню, что позволит подключить страницу в любом оформлении.

    Подробнее ...
  • Webasyst. Не работает локализация
    Webasyst. Не работает локализация

    Это статья для тех, кто пользуется системой управления Webasyst, и в один прекрасный момент наблюдает, что часть наименований становится на английском языке.

    Подробнее ...