Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2020, 12:41
Аспирант
Отправить личное сообщение для vitek-82 Посмотреть профиль Найти все сообщения от vitek-82
 
Регистрация: 18.03.2017
Сообщений: 30

Проблема с поиском кода JS по сайту отвечающего за некоторую работу.
Здравствуйте. Столкнулся с проблемой. Есть сайт (лендинг). При первом скроллинге (вниз), элементы DOM последовательно анимируются (плавное появление и небольшой плавный сдвиг).

Вопрос в том, как проще всего найти на сайте JS код который отвечает за смену CSS-классов анимирующихся DOM-элементов.

Раньше проблем не возникало. Но в очередном сайте (смотрю в панели разработчика), анимация происходит следующим образом:

- когда при скроллинге я дохожу до очередного анимирующегося элемента, ему добавляются два класса которые отвечают за анимацию и через пару миллисекунд эти классы удаляются. Времени заметить что это были за классы очень мало. Раньше код JS я просто искал именно по названию классов. Если в JS файле есть эти CSS-классы (тупо их названия), то определял оно не оно, и если не оно, то производил поиск этих классов в следующем файле *.js, пока не найду то что нужно.

В данном случае я просто не успеваю заметить названия классов, только вижу что их два. Конечно после 100 попыток получилось разобрать названия классов CSS, но это ведь не выход.

Если кто понял что я хотел, напишите плиз как можно найти JS-код отвечающий за работу того или иного элемента DOM. Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2020, 12:48
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

В FF, в инспекторе, видно каким элементам какие обработчики установлены, раскрыв этот список можно увидеть и код, и перейти в отладчик его. Для хрома есть плагин, который также позволяет отметить установленные обработчики элементам.
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2020, 12:53
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,719

Сообщение от laimas
Для хрома есть плагин, который также позволяет отметить установленные обработчики элементам.
Разве это не встроенная фича инспектора?

Да и вряд ли так получиться найти слушателя, ведь слушаются не события элемента, а события скролла.
Ответить с цитированием
  #4 (permalink)  
Старый 02.09.2020, 13:00
Аспирант
Отправить личное сообщение для vitek-82 Посмотреть профиль Найти все сообщения от vitek-82
 
Регистрация: 18.03.2017
Сообщений: 30

Чтобы было понятнее, вот сайт: http://m911.by/

Большинство элементов анимируются (opacity и transform) ,благодаря коду JS который добавляет-удаляет этим элементам классы-CSS.

Например мне надо найти код JS который это делает и отменить его (удалить функцию вообще или добавить в нее другой класс).

Как этот код-JS найти?)
Ответить с цитированием
  #5 (permalink)  
Старый 02.09.2020, 13:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Nexus
Разве это не встроенная фича инспектора?
У кого? Не видел подобного у Хрома, а с плагином да. У Лисы в отладчике эта фича встроена.

Сообщение от Nexus
Да и вряд ли так получиться найти слушателя
Это смотря что, естественно динамически устанавливаемые обработчики не будут отображаться, все остальное есть.

Последний раз редактировалось laimas, 12.10.2020 в 16:58.
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2020, 13:10
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,719

У элемента есть обработчик события окончания анимации, но ссылается он на jq, что ни о чем не говорит.

Нужный вам файл: assets/theme/js/script.js
Ищите строку: fadeInUp
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2020, 13:12
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,719

Сообщение от laimas
У кого? Не видел подобного у Хрома
Вот только что им в хроме воспользовался.
Изображения:
Тип файла: jpg 2020-09-02_132637.jpg (16.2 Кб, 7 просмотров)
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2020, 13:37
Аспирант
Отправить личное сообщение для vitek-82 Посмотреть профиль Найти все сообщения от vitek-82
 
Регистрация: 18.03.2017
Сообщений: 30

Сообщение от Nexus Посмотреть сообщение
У элемента есть обработчик события окончания анимации, но ссылается он на jq, что ни о чем не говорит.

Нужный вам файл: assets/theme/js/script.js
Ищите строку: fadeInUp
Я нашел, спасибо, вы мне лучше подскажите как вы нашли. Явно не моим пещерным способом)
Ответить с цитированием
  #9 (permalink)  
Старый 02.09.2020, 13:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Nexus
но ссылается он на jq, что ни о чем не говорит
Ссылка указывает на событие/обработчик, собственно зачастую код обработчика виден непосредственно в списке, и не обязательно он указывает на jq.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возникла проблема с анимацией кнопки после внедрения js кода! Помогите пожалуйста. DobrovolskyDen (X)HTML/CSS 0 08.05.2018 21:48
Проблема с видеоплеером на js web-master2014 Общие вопросы Javascript 0 26.02.2014 13:24
Вставка кода js с помощью js Alice Общие вопросы Javascript 1 12.06.2013 19:05
Ищу приличный редактор кода под JS Universe Общие вопросы Javascript 28 30.10.2012 18:30
Добавление кода js в js файл BEUJ Общие вопросы Javascript 13 12.01.2012 21:35