Vefolio

WordPress

Для создания всплывающего окна с яндекс-формой можно использовать следующий подход:

Создайте кнопку или ссылку, по клику на которую будет открываться всплывающее окно.

<button id="open-form-btn">Открыть форму</button>

Добавьте JavaScript-обработчик на кнопку, который будет открывать всплывающее окно.

const openFormBtn = document.querySelector('#open-form-btn');
const formPopup = document.querySelector('#form-popup');

openFormBtn.addEventListener('click', function() {
  formPopup.classList.add('show');
});

Здесь мы добавляем обработчик события click на кнопку с id "open-form-btn" и добавляем класс "show" к элементу с id "form-popup", который будет содержать всплывающее окно.

Создайте всплывающее окно и добавьте в него яндекс-форму.

<div id="form-popup" class="form-popup">
  <div class="form-content">
    <!-- Ваша яндекс-форма здесь -->
  </div>
</div>

Здесь мы создаем элемент с id "form-popup" и классом "form-popup", который будет содержать всплывающее окно. Внутри него создаем элемент с классом "form-content", в котором будет располагаться сама яндекс-форма.

Добавьте стили для всплывающего окна и яндекс-формы.

.form-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.form-content {
  background-color: #fff;
  padding: 20px;
  max-width: 400px;
  max-height: 80%;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.form-popup.show {
  display: flex;
}

Здесь мы задаем стили для элемента с классом "form-popup", который будет содержать всплывающее окно. Задаем ему фиксированное положение, 100% ширины и высоту, полупрозрачный цвет фона и высокий z-index, чтобы он был поверх всего содержимого страницы. Также добавляем свойства display: none и justify-content: center; align-items: center;, чтобы он не отображался изначально и чтобы содержимое было выровнено по центру. Для элемента с классом "form-content" задаем стили для самой формы.

Теперь вы можете добавить свою яндекс-форму внутри элемента с классом "form-content" и по клику на кнопку с id "open-form-btn"

В JavaScript существует несколько способов определения направления прокрутки при срабатывании события. Один из них - использование свойств scrollTop и scrollLeft элемента, на котором происходит прокрутка, и сравнение их значений с предыдущими значениями.

Например, можно определить направление прокрутки при событии scroll на элементе window следующим образом:

let lastScrollTop = 0;
window.addEventListener("scroll", function() {
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > lastScrollTop) {
    console.log("Прокрутка вниз");
  } else {
    console.log("Прокрутка вверх");
  }
  lastScrollTop = scrollTop;
});

В этом примере мы определяем значение scrollTop на элементе window и сравниваем его со значением lastScrollTop, которое мы сохраняем в глобальной переменной. Если значение scrollTop больше, чем lastScrollTop, то происходит прокрутка вниз, иначе - прокрутка вверх.

Аналогичным способом можно определить направление прокрутки на любом другом элементе с прокруткой, например, на элементе с классом "scrollable":

javascript

let lastScrollTop = 0;
let scrollable = document.querySelector(".scrollable");

scrollable.addEventListener("scroll", function() {
  let scrollTop = scrollable.scrollTop;
  if (scrollTop > lastScrollTop) {
    console.log("Прокрутка вниз");
  } else {
    console.log("Прокрутка вверх");
  }
  lastScrollTop = scrollTop;
});

Здесь мы определяем значение scrollTop на элементе с классом "scrollable" и сравниваем его со значением lastScrollTop. Если значение scrollTop больше, чем lastScrollTop, то происходит прокрутка вниз, иначе - прокрутка вверх.

Можно через .htaccess как описано в инструкции

Селектор точка ($('.')) в jQuery используется для выбора элементов на странице по их классу.
Синтаксис для использования селектора точка следующий:
Где "имя_класса" - это название класса, который вы хотите выбрать.
Пример:
HTML:

<div class="example">Пример</div>

JavaScript (с использованием jQuery):

$('.example').css('color', 'red');

В данном примере мы выбираем элемент с классом "example" и применяем к нему CSS-стиль "color: red;".

Обратите внимание, что селектор точка может быть комбинирован с другими селекторами, чтобы выбирать элементы по более сложным критериям. Например:

$('.example p') // выбирает все элементы <p> внутри элементов с классом "example"
$('.example:first') // выбирает первый элемент с классом "example"
$('.example:nth-child(3)') // выбирает третий дочерний элемент с классом "example"

Если вы хотите расположить картинку и текст в одной строке, можно воспользоваться свойством display: inline-block; для обоих элементов. Однако, как вы уже заметили, картинка может оказаться сверху текста.

Чтобы картинка была выровнена по вертикали с текстом, можно использовать свойство vertical-align и задать ему значение middle.

Пример кода:

<div>
<img src="icon.png" alt="icon" style="display: inline-block; vertical-align: middle;">
<a href="#" style="display: inline-block; vertical-align: middle;">Ссылка</a>
</div>

В этом примере мы создали контейнер div и добавили в него изображение и ссылку, оба с применением свойства display: inline-block; и vertical-align: middle;. Это помогает выровнять их по вертикали.

Вы также можете использовать другие способы выравнивания, такие как flexbox или grid. Например, вы можете создать контейнер с display: flex; и align-items: center;, чтобы выровнять элементы по вертикали.

Пример кода:

<div style="display: flex; align-items: center;">
<img src="icon.png" alt="icon">
<a href="#">Ссылка</a>
</div>

В этом примере мы создали контейнер с display: flex; и align-items: center;, чтобы выровнять изображение и ссылку по вертикали. Картинка и ссылка будут автоматически выровнены по центру контейнера.

Источник https://aie24.ru/states/kak-raspolozhit-kartinku-i...

Самый простой и наверное многими проверенный плагин sftp.
Инструкция есть тут https://marketplace.visualstudio.com/items?itemNam...
и тут https://aie24.ru/states/ftp-sftp-vs-code/

Сложно представить Backend разработчика без знания HTML CSS и JS . Если делать свой плагин нужно ведь и админку доверстать и настроить взаимодействие с пользователем. Проще говоря нормальный Backend разработчик включает в себя все навыки frontend + CMS и тот язык что выбран для разработки.