Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Конфликт скриптов

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

xocotl

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Добрый день!
Возник конфликт нескольких скриптов. Опыта нет и отладить не соображу как. Можете подсказать или помочь?
Проблему можно наблюдать на странице:
http://yarplastik.ru/products/
 
Вот два скрипта они рядом работают нормально, но конфликтуют с третьим.  
 
// Показ блока при нажатии на ссылку
$(function() {
    $('.content-block').on('click', function(e) {
        e.preventDefault();
        $('.showblock').each(function() {
            $(this).css('display', 'none');
        });
            
        var showblock = $(this).attr('href');
        
        $(showblock).css('display', 'block');
            //Анимационные эффекты
                 $('.showblock').animate({ opacity: '0.1'}, 1);
        $('.showblock').animate({ opacity: '1.0'}, 900);
    });
       //Закрыть картинку
        $('.close').on('click', function(e) {
        e.preventDefault();
        $('.showblock').each(function() {
                
            $(this).css('display', 'none');
        });
    });
    
});
 
 
 
 
//Листание экрана
$(function() {
  const container = document.querySelector('.js-scroll-content');
  const items = Array.from(container.querySelectorAll('.js-scroll-item'));
  let itemsNumber = items.length;
  const navLinks = Array.from(document.querySelectorAll('.js-scroll-link'));
  let currentItemIndex = 0;
  let scroll = true;
 
  const moveSection = index => {
    let positionTop = (-index * 100) + '%';
    container.style.top = positionTop;
  };
 
  const setLocation = index => window.location = `#${items[index].id}`;
 
  // Set strart params
  container.style.top = 0;
  setLocation(currentItemIndex);
  itemsNumber--;
   
  // Scrolling section by navigation.
  navLinks.forEach(element => {
    element.addEventListener('click', event => {
      event.preventDefault();
      event.stopPropagation();
 
      let sectionID = element.getAttribute('href').slice(1);
 
      currentItemIndex = items.findIndex(element => {
        return element.id === sectionID;
      });
 
      moveSection(currentItemIndex);
    });
  });
 
  // Scrolling sections by mouse/touchpad.
  window.addEventListener('wheel', event => {
    event.preventDefault();
    event.stopPropagation();
 
    let direction = event.deltaY;
 
    if (scroll) {
      if (direction > 0 && currentItemIndex < itemsNumber) {
        currentItemIndex++;
        scroll = false;
      } else if (direction < 0 && currentItemIndex !== 0) {
        currentItemIndex--;
        scroll = false;
      }
      moveSection(currentItemIndex);
    }
 
  });
 
  container.addEventListener('transitionend', () => {
    setTimeout(() => scroll = true, 300);
    setLocation(currentItemIndex);
  });
 
})();
 
 
Третий скрипт с которым конфликт:
 
$(function() {
    'use strict';
    var multiItemSlider = (function () {
      return function (selector, config) {
        var
          _mainElement = document.querySelector(selector), // основный элемент блока
          _sliderWrapper = _mainElement.querySelector('.menu-mob__wrapper'), // обертка для .slider-item
          _sliderItems = _mainElement.querySelectorAll('.menu-punkt-mob'), // элементы (.slider-item)
          _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
          _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
          _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
          _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
          _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента    
          _positionLeftItem = 0, // позиция левого активного элемента
          _transform = 0, // значение транфсофрмации .slider_wrapper
          _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
          _items = []; // массив элементов
        // наполнение массива _items
        _sliderItems.forEach(function (item, index) {
          _items.push({ item: item, position: index, transform: 0 });
        });
 
        var position = {
          getMin: 0,
          getMax: _items.length - 1,
        }
 
        var _transformItem = function (direction) {
          if (direction === 'right') {
            if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {
              return;
            }
            if (!_sliderControlLeft.classList.contains('slider__control_show')) {
              _sliderControlLeft.classList.add('slider__control_show');
            }
            if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
              _sliderControlRight.classList.remove('slider__control_show');
            }
            _positionLeftItem++;
            _transform -= _step;
          }
          if (direction === 'left') {
            if (_positionLeftItem <= position.getMin) {
              return;
            }
            if (!_sliderControlRight.classList.contains('slider__control_show')) {
              _sliderControlRight.classList.add('slider__control_show');
            }
            if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
              _sliderControlLeft.classList.remove('slider__control_show');
            }
            _positionLeftItem--;
            _transform += _step;
          }
          _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
        }
 
        // обработчик события click для кнопок "назад" и "вперед"
        var _controlClick = function (e) {
          var direction = this.classList.contains('slider__control_right') ? 'right' : 'left';
          e.preventDefault();
          _transformItem(direction);
        };
 
        var _setUpListeners = function () {
          // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
          _sliderControls.forEach(function (item) {
            item.addEventListener('click', _controlClick);
          });
        }
 
        // инициализация
        _setUpListeners();
 
        return {
          right: function () { // метод right
            _transformItem('right');
          },
          left: function () { // метод left
            _transformItem('left');
          }
        }
 
      }
    }());
 
    var slider = multiItemSlider('.menu-mob')
        
        });
 

Всего записей: 32 | Зарегистр. 17-02-2017 | Отправлено: 14:23 17-04-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
xocotl
начать нужно с
Цитата:
Uncaught TypeError: $(...) is not a function at script.js:92

уберите в конце template22/script.js это
Цитата:
()
, потому что $(function() {}); уже конечная конструкция, запускающаяся по загрузке DOM структуры.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 19:53 17-04-2019
xocotl

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii Спасибо! С одной ошибкой вроде покончено, а как понять эту?
 
TypeError: $(...).attr(...) is undefined[Подробнее] products:48:23
    <анонимная> http://yarplastik.ru/products/:48
    jQuery 4
     
    n
     
    fireWith
     
    ready
     
    B

Всего записей: 32 | Зарегистр. 17-02-2017 | Отправлено: 23:56 17-04-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
xocotl
тема по jQuery есть отдельная.
 
след ошибка, что вижу

Цитата:
Uncaught TypeError: Cannot read property 'querySelector' of null at script.js:7


Код:
          _mainElement = document.querySelector(selector), // основный элемент блока
          _sliderWrapper = _mainElement.querySelector('.menu-mob__wrapper'),

то есть _mainElement равен null, значение selector при этом равно ".menu-mob", но значит ничего не находит (возможно меню еще не отрисовано)

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 00:00 18-04-2019 | Исправлено: Mavrikii, 00:01 18-04-2019
xocotl

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Mavrikii Спасибо большое. Разобрался! Там у меня на  это странице меню не выводилось.  
Я сделал его и теперь все скрипты работают.
 
Правда ошибка, которую выше писал все равно осталась... Но по крайней мере все сейчас заработало. Спасибо за помощь!

Всего записей: 32 | Зарегистр. 17-02-2017 | Отправлено: 00:21 18-04-2019
Mavrikii

Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
xocotl
именно этой не вижу, есть
Цитата:
Uncaught TypeError: Cannot read property 'replace' of undefined at HTMLDocument.<anonymous> ((index):48)


Код:
url = $("a.modalbox").attr('href').replace("for_spider","content2");

у ссылки нет атрибута href, поэтому нечего заменять.

Всего записей: 15040 | Зарегистр. 20-09-2014 | Отправлено: 01:09 18-04-2019
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Конфликт скриптов


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru