Ответы пользователя по тегу JavaScript
  • Как запускать скрипт при изменении высоты блока?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если тебе не нужно менять содержимое прилипшего блока, а только делать ему перерасчет, то почему ты не воспользовался обычным position:sticky;?
    Ответ написан
    4 комментария
  • Как сделать чтобы div (уведомление с кнопкой) закрывался на время или совсем закрывался?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    https://learn.javascript.ru/settimeout-setinterval

    + Куки\SessionStorage\LocalStorage\БД
    Ответ написан
    Комментировать
  • Как сделать так, чтобы информация, которая находится за пределами блока со скроллом, была видна?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Если появляется у элемента скролл, значит он имеет фиксированную высоту\ширину и у него включен скролл по умолчанию или в стилях и при этом все, что не входит в область захвата будет скрыто.

    Чтобы обойти это ограничение используй кастомный скролл. Если речь именно о том, чтобы показать элементы, которые «торчат».

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

    Если же вопрос был о том, как не довести до такого → не использовать фиксированные размеры, там, где контент превышает размер родителя, не указывать overflow: hidden\auto\scroll.
    Ответ написан
    Комментировать
  • Как настроить передачу информации в value с страницы А на страницу B?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Если тебе хоть что-то говорят GET\POST\API, то воспользуйся ими, не морочь себе голову. Если не знаешь, то рекомендую заполнить этот пробел. Так как за ним закроется и данная проблема.

    В остальном же также рекомендую освоить базовые принципы взаимодействия с DOM, ибо:
    ...
    $('#por1').value = $('#zanr', data).html();
    ...
    Ответ написан
    Комментировать
  • Закрытие меню при клике на пустое место?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    По правде говоря твой пример не заработал вообще. Тем не менее рекомендую почитать про всплытие и перехват событий.
    Ответ написан
    Комментировать
  • Как сделать выполнение функции бесконечным с задержкой?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    https://learn.javascript.ru/settimeout-setinterval

    Помимо цикличности их можно записывать в переменную и очищать.
    Ответ написан
    Комментировать
  • Как дальше развиваться в верстке?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Тебе нужны HTML\CSS\BEM\JS→Vue\React.

    Не стоило разделять их на два пункта, так как все, что ты назвал → фронтенд. При этом движки вторичны, но от них еще никто не умирал. Разве что от joomla)

    Чтобы стать хорошим фронтендщиком или фулом у тебя в любом случае уйдет много времени. Либо ты гений.
    Ответ написан
  • Как сделать такое меню в мобильной версии?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Ммм... у тебя обычное вертикальное меню. Горизонтально это когда слева-направо или наоборот.

    И вообще тебе не очень-то и нужен jQuery, чтобы запустить анимацию, CSS это вполне умеет, но да, тебе нужно использовать анимацию от jQuery для слайда в сторону, если хочешь минимизировать свои мучения.

    Чтобы легче было сделать переключение бургера на крестик можешь воспользоваться ванилкой JS, и привязав бургер, скажем к ment-toggle--burger, а крест к menu-toggle--times просто переключать их. Привязав это к примеру бэкграунд картинку крестика и бургера.

    Вообще лучше сделать анимацию на SVG, или 3 span-а анимировать из бургера в крест, но сдается мне, это сложновато для тебя по твоему вопросу. Тем не менее, мотай на ус.
    Ответ написан
  • Использование нескольких БД внутри 1 или больше микросерисов нормально-ли?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Архитектура должна строится по принципу экономии оперативной памяти, если цена за поддержание нескольких БД будет выше, чем польза, то нет смысла разбивать. При этом надо понимать, что у разных БД разные возможности.

    Поэтому да, использовать несколько БД, в том числе хранить параметры в файликах это нормально. Если оно действительно помогает, а не усложняет и тратит ресурсы просто потому что есть.
    Ответ написан
    Комментировать
  • Высота одного блока зависит от другого?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Сетки, построенные на флексбоксах и гридах, по-умолчанию наследуют высоту соседнего блока.
    Ответ написан
    Комментировать
  • Передача значений из checkbox?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    1. Если под перезагрузкой ты имеешь в виду просто перезагрузку, а не отправленную форму → используй sessionStorage. Это просто JS.
    2. Если ты хочешь, чтобы после отправки формы, ее валидации и обработке тебе приходили данные — тебе необходимо на стороне сервера иметь хранилище этих данных. Обычно в этой роли выступают БД с пользователями, привязками и т.д., а тут уже отличным решением будет использовать фреймворк на ЯП, в котором будет либа форм, с помощью которых ты при сохранении данных в модели при загрузке этой формы снова (скажем редактирования чего-либо), ты получишь prepopulated form.
    3. Если же ты хочешь гонять форму без каких-либо проверок, просто передавая данные в POST\GET, с сабмитом формы ведущий туда же, то тебе надо сформировать генерацию документа посредством ЯП, который разберет запрос и сможет сделать банально так:
    <input type="checkbox" checked="<?= $field[3] != true ?: 'checked' ?>">...

    либо разбирать запрос JS и уже раздавать значения в загруженной странице.

    Иными словами, все зависит от конечной цели.
    Ответ написан
    Комментировать
  • Не могу понять, как сделать закрытие меню, нажимая на пустое поле?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Привяжи перехват клика к #wrapblur. Кстати, не используй ID на странице просто так.
    Или воспользуйся всплытием и перехватом событий.

    А, тю, невнимательно прочитал.
    Тебе надо в каждой функции скрывать все, что должно быть скрыто, даже если элемент не отображен. Или привязать проверку к переменной «глобальной»-триггеру.
    Ответ написан
  • JSON вывод данных JS?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Создай новый массив через map.
    Ответ написан
    Комментировать
  • Как реализовать слушатель событий по массиву?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Ты с какой-то не той стороны зашел.

    Тебе надо получить массив элементов, и гонять в его диапазоне туда-сюда (или переносить элементы из конца в начало и наоборот для бесконечного цикла) элементы.

    А, чтобы показать несколько элементов, тебе стоит по клику на стрелку, инкрементировать (например) индекс активного элемента и от него проходится в n-диапазоне (заданном или расчитанном) по элементам, которым ты будешь добавлять класс активного отображения.

    Это примерно в том ключе, что ты делаешь, звучит сложно, а код никто в здравом уме тебе писать не будет, потому что реализаций слайдером на нативном JS и более того на html + css (без JS) в интернете полно.
    Ответ написан
  • Как получить нужный тег родительского тега?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Перебирать родителя с шагом вверх и сравнивать с заданными условиями.
    Ответ написан
    Комментировать
  • Как сделать пошаговую форму с записью данных в БД?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Тут много описано про сессии и да, это это корректный подход при незавершенной базовой регистрации.

    А вот если у тебя уже есть в базе логин и пасс пользователя, по которому можно зайти. Или привязка к социальной сети, то тут помогут триггеры в базе в виде boolean-значений. Скажем:

    user сущность с колонками:
    1. is_active — так можно делать ленивое удаление.
    2. is_confirmed — подтвердил почту.

    И т.д. Так, ты сможешь проверять в роуте текущее состояние и в зависимости от сценария пускать в ту или иную сторону. Например при is_confirmed == false → вместо ЛК отправлять на страницу с кнопкой «выслать ключ еще раз».

    Я думаю ты видел такое на сервисах.
    Ответ написан
    Комментировать
  • CSS JS Как сделать тень блока точками?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Это не «современный дизайн», это пустые украшалки.

    И делаются они с помощью псевдоэлементов (так проще) с абсолютным позиционированием и через background свойства с репитом. В комментариях тебе Рустам Байназаров дал корректный референс.
    Ответ написан
    Комментировать
  • Фильтрация товаров на js без перезагрузки страницы?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    1. Если тебе надо фильтровать только то, что пришло на страницу ты можешь взять фильтрацию по классу и показывать только те, где classList.contain.
    1.2 Либо вешать дата-параметры.
    1.3 Либо загружать их сразу в JS и JS-ом же рисовать.
    1.4 А еще лучше загонять в модуль какой от JS-фреймворка, в котором есть реактивность.

    А если ты получаешь данные из API, то этот же подход, только модифицированный запросами в сервис, например.
    Ответ написан
    Комментировать
  • По какой причине ломается верстка?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Есть такой восхитительный инструмент. Называется панель отладки\дебаггер и в большинстве браузеров вызывается с помощью F12. Именно он тебе и поможет, а так это будет попытка сыграть в вангу.

    Тем не менее Асингую, скорее всего у тебя где-то выпадают данные или ошибка в коде, которую ты почему-то не видишь глазами, словить сможешь это или другой баг с дебаггером.
    Ответ написан
    4 комментария
  • Как распознать ссылку в строке?

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега JavaScript
    Руководитель frontend направления, предприниматель
    Ага, я вроде понял.

    У ссылки есть некоторые атрибуты, опираясь на которые ты можешь ее распознать. Среди них:
    1. Протокол: http\s (в ответах есть пример)
    2. Домен + доменная зона (вот тут уже посложней, так как доменных зон овердомного)

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

    Поисковая строка, к слову, тоже не идеальна, ибо работает по подобному принципу и легко можно улететь на какой-нибудь дот.com. Впрочем, никто не запрещает делать тебе плохой интерфейс, «ведь все так делают».

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