Ответы пользователя по тегу JavaScript
  • Как отключить скролл при открытой модалке?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Опишу мой случай:
    Скопировал рабочий сайт на другой хостинг (masterhost) и модалка (magnific popup) начала прокручиваться вместе со всей страницей на любых мобильных устройствах.
    Целый день Поиска такого поведения не дал результата, хоть я и перешерстил все события и всевозможные сценарии.
    Наверное какие-то глюки хостинга- ибо нет другого объяснения, чтобы перестала адекватно работать библиотека(magnific popup).
    Я неоднократно замечал, как из-за хостинга (eternalhost) переставал работал ajax и т.п.(хотя такое редко случается). И только долгие переписки с поддержкой, помогали решить проблему.
    Конечно можно было-бы продолжать поиски, т.к. в библиотеке есть Ветвления с определением устройства.....

    Но решил сделать костыль:
    учитывая что при открытии модалки, некоторым тегам должны добавляться стили
    <html style="margin-right: 17px; overflow: hidden;">

    <div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow: hidden auto;">

    но overflow: hidden; не добавлялся

    пример из OpenCart (быстрая корзина)
    function fastorder_open_cart() { 
      $.magnificPopup.open({
    	tLoading: '<span><i style="font-size:50px;" class="fa fa-spinner fa-pulse"></i></span>',
    	items: {
    	  src: '#popup-quickorder',
    	  type: 'inline',
    	  modal: true
    	}			
      });
      $( "#quick_checkout_cart" ).load( 'index.php?route=checkout/quick_checkout_cart');
      //SV исправление бага скрола вместе с попапом
        setTimeout(function(){
          $('html').css('overflow', 'hidden');
          $('.mfp-wrap').css('overflow', 'hidden auto');
        }, 100);
    }
    Ответ написан
    Комментировать
  • При ajax запросе, знак '+' заменяеся на пробел, как исправить?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    data: $('#fastorder_data').serialize() + '&action=send' + '&together=' + encodeURIComponent($('input[name=\'together\']:checked').val()),
    Ответ написан
    Комментировать
  • Как поймать событие клика на элемент внутреннего списка в jquery?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Мой вариант
    <ul class="nav navbar-nav">
    	<li>
    		<a href="/index.php?route=product/category&amp;path=1852" rel="nofollow">Заборы
    			<span class="show-sc-mobile" data-toggle="collapse">
    				<i class="fa fa-plus plus"></i>
    			</span>
    		</a>
    		<div class="collapse mob-submenu-list">
    			<ul class="list-unstyled">
    				<li><a href="/index.php?route=product/category&amp;path=1852_1853">Заборы из профнастила</a></li>
    				<li><a href="/index.php?route=product/category&amp;path=1852_1854">Заборы из дерева</a></li>
    			</ul>
    		</div>
    	</li>
    	<li>
    		<a href="/index.php?route=product/category&amp;path=1852" rel="nofollow">Навесы
    			<span class="show-sc-mobile" data-toggle="collapse">
    				<i class="fa fa-plus plus"></i>
    			</span>
    		</a>
    		<div class="collapse mob-submenu-list">
    			<ul class="list-unstyled">
    				<li><a href="/index.php?route=product/category&amp;path=1852_1853">Навесы из профнастила</a></li>
    				<li><a href="/index.php?route=product/category&amp;path=1852_1854">Навесы из поликорбоната</a></li>
    			</ul>
    		</div>
    	</li>
    </ul>


    658abb3f13054730133701.png

    $("#menu-mobile-ns .show-sc-mobile").on('click', function(e) {
        e.preventDefault();
        var $link = $(this).closest("a");
    
        if (e.target === $link[0]){
            return false;
        } else {
           $(this).toggleClass("open-sc-mobile");
           $(this).parent().next().toggleClass("in");
        }
    });
    Ответ написан
    Комментировать
  • Как сделать плавную прокрутку к якорю на другой странице?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    А можно ещё вот так:

    var myHash = window.location.hash; //получаем значение хеша
    history.replaceState({}, document.title, window.location.href.split('#')[0]); //очищаем хеш
    
    $(document).ready(function(){
        if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение
            $('html, body').animate({scrollTop: $(myHash).offset().top}, 500); //скроллим за полсекунды
        };
    });


    В таком варианте, не придётся подменять #anchor_search на #search

    Обратите внимание, что внутри
    $(document).ready(function(){

    только часть скрипта

    Ну или вот так https://qna.habr.com/q/355083
    Ответ написан
    Комментировать
  • Как в плагине validate убирать сообщение об ошибке если пользователь нажал галочку в checkbox?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Сообытия формы, на которые подписывается плагин — это «click», «focusin», «focusout», «keyup», «submit».
    Т.е он следит именно за формой- поэтому все поля должны быть внутри формы.
    и
    https://jqueryvalidation.org/category/selectors/
    https://api.jquery.com/checked-selector/
    Ответ написан
    Комментировать
  • Как выполнить скрипт при повороте экрана?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Jquery
    $(window).on('orientationchange', function(e) {
    // код
    });

    Некоторые устройства не поддерживают событие orientationchange,
    поэтому можно отловить изменение размера окна.
    Поэтому лучше так
    $( window ).on('load resize orientationchange', function( event ) {
      // код
    });


    // Вы также можете вручную запустить это событие.
    $( window ).orientationchange();
    Ответ написан
    Комментировать
  • Как отменить переадресацию после ошибки 302, используя jquery ajax?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    В комментах Vladimir Abramov правильно описал.
    Но не всегда понятна причина такого поведения браузера.
    К примеру:
    В консоле- post запрос, вкладка Заголовки
    Вдруг появляется поле location
    64fc7ee302daf641203740.png

    В этом поле виден длинный адрес
    https://accounts.google.com/o/oauth2/auth/oauthchooseaccount?response_type=code&access_type=offline&client_id=344682867558-pqngnatm6b7tf9ko067ktiuq7ae4mao9.apps.googleusercontent.com&redirect_uri=https%3A%2F%2Fuss-center.ru%2Foauth2callback.php&state&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fspreadsheets&approval_prompt=auto&service=lso&o2v=1&flowName=GeneralOAuthFlow


    И как выянилось, в коде был старый код метрики от Гугла и он делал эту переадресацию.
    Глобальным поиском пришлось искать всё что начинается на ga(' (пример- ga('send', 'pageview'); )
    После удаления, код ответа 200
    Ответ написан
    Комментировать
  • Как сделать плавную прокрутку страницы до якоря?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Можно вообще не использовать ID
    Вот мой пример https://qna.habr.com/q/556291#answer_item_2349276

    А это пример с ID
    $(document).ready(function() {
      //$("body").on('click', '[href*="#"]', function(e){ такой вариант НАДЁЖНЕЕ, когда динамически изменяется DOM
      $('a[href^="#"]').on('click', function(e) {
        // отменяем стандартное действие ссылки
        e.preventDefault();
    
        var sc = $(this).attr("href");
        var dn = $(sc).offset().top;
           // sc - в переменную заносим информацию о том, к какому блоку надо перейти
           // dn - определяем положение блока на странице
    
       $('html, body').animate({scrollTop: dn}, 1000);  
          // 1000 скорость перехода в миллисекундах
      });
    });


    Бывает, что при переходе по ссылке, загружается дополнительный контент,
    тогда нужно дождаться загрузки и только потом перейти по ссылке- например перешли по ссылке а потом загружаются отзывы:
    $("#review").load('index.php?route=blog/article/review&article_id={{ article_id }}', function(response, status, xhr) {
            if (status == "error") {
        	   var msg = " Извините, но произошла ошибка: ";
        	   $("#error").html(msg + xhr.status + " " + xhr.statusText);
            } else {
        	    var sc = window.location.hash;//ссылка с id (#answer_item_2349276)которую мы поймали на другой странице, например  (qna.habr.com/q/556291#answer_item_2349276)
                var dn = $(sc).offset().top;//определяем положение блока на странице 
                $('html, body').animate({scrollTop: dn}, 1000); 
            }
    	});
    Ответ написан
    Комментировать
  • Как скопировать введенное значение из одного input в другой input?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    <script>
       $("input").on('input', function () {
         var value = $(this).val();
         $("#second_input").val(value);
       });
    </script>


    Так надёжнее, ловит событие и когда не касаешься клавиатуры, а к примеру копируешь в поле с помощью мыши.
    Ответ написан
    Комментировать
  • Как инициализировать слайдер после AJAX загрузки?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Я так понял что
    observer: true,
    observeParents: true,
    observeSlideChildren: true,
    следят за изменением именно дерева самого слайдера, а у меня например после ajax слайдер почти не меняется (только адрес на картинки в слайдере).
    Хотя...не знаю почему все эти observe плохо следят)

    Поэтому я использовал пример из документации Swiper и
    observerUpdate - Событие будет запущено, если наблюдатель включен и обнаружит мутации DOM.
    И я запускаю повторную инициализацию.
    Не знаю на сколько это верно, я ещё тестирую у себя этот код.
    // К примеру это моя инициализация слайдера в другом файле
    const swiper = new Swiper('.swiper', {
      observer: true, //обязательно
      observeParents: true, //обязательно
      observeSlideChildren: true, //обязательно
      // ...
    });
    
    // И здесь же запускаю слушатель событий повторно инициализирую
    swiper.on('observerUpdate', function () {
      console.log('DOM изменился ');
    
      const swiper = new Swiper('.swiper', {
        // ...
      });
    });


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

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Для примера возмём адрес https://learn.javascript.ru/json
    В данном случае location.href вернёт строку.
    console.log(window.location.href.indexOf('json'));
    // получим цифру 28


    Метод indexOf() ищет в массиве или строке совпадение и возвращает цифру ( начиная с нуля, количество символов до искомого значения), т.е. вернётся индекс первого найденного элемента или -1, если ничего не нашлось.
    Искомый "json" начинается с 29 буквы, но учитывая что отчёт начинается с 0, поэтому 28 буква.

    'Hello, world!'.indexOf('world'); // 7
    'Hello, world!'.indexOf('o');     // 4, в конце hello
    'Hello, world!'.indexOf('o', 5);  // 8, вторая буква в world
    !!'Hello, world!'.indexOf('z');   // true, отрицательное число приводится к true
    !!'Hello, world!'.indexOf('H');   // false, 0 трактуется как false

    Это древний метод indexOf(), для таких задач лучше использовать метод includes() .

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

    Поэтому в старых скриптах можно увидеть такой код:
    const guestList = ['Петя', 'Настя', 'Артур', 'Лена', 'Настя', 'Эммануил']
    const guest = // получаем откуда-нибудь имя гостя
    
    if (guestList.indexOf(guest) >= 0) {
      // пускаем на вечеринку
    } else {
      // отправляем домой
    }


    Из-за того, что indexOf() возвращает индекс, в условии обязательно нужна проверка (>= 0 или !== -1).
    Если так не сделать, то появится неприятный баг: мы будем пускать на вечеринку всех, кроме первого гостя в списке.

    Дело в том, что JavaScript интерпретирует ненулевые числа как истину (true) и будет запускать первую ветку if.
    А на первом госте indexOf() вернёт 0, что считается ложным (false), и наш скрипт не пустит человека на вечеринку.

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

    Отличие метода includes()(добавлен в ECMAScript в 2016г) от метода indexOf() заключается в том, что он возвращает логическое значение (true, или false), а не числовое значение (индекс элемента, или -1, если элемент не найден).
    Кроме того, очень незначительным отличием includes() является то, что он правильно обрабатывает NaN в отличие от indexOf/lastIndexOf.

    Я предпочитаю так:
    if (window.location.href.includes('json')) {
        // содержит
    } else {
        // не содержит
    }
    Ответ написан
    Комментировать
  • Слайдер- Как сделать возможность в активном слайде видеть ссылку с данными на следующий и предыдущий слайд?

    Fortoo
    @Fortoo Автор вопроса
    Top-Web OpenCart
    Спасибо всем за предложенные варианты!
    Я в начале подумал что без js не обойтись(потому-что многие слайдеры при "зацикливании вкруговую" создают cloned слайды), но поразмыслив, решил попробовать сделать такой слайдер использую только PHP.
    Поэтому iBird Rose в этом смысле был ближе к моему варианту, в котором я прошёлся по массиву и вытащил из каждого next слайда нужные данные по ключам и потом используя функцию array_keys() последний ключ в массиве заменил первым, поэтому и "зацикливании вкруговую" тоже работает)
    Ответ написан
    Комментировать