Задать вопрос
Fortoo

Сергей Василенко

Top-Web OpenCart
Ответы пользователя по тегу HTML

  • Почему не отображается имя выбранного файла input?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Может просто добавить чёрный цвет текста?
    <input type="file" multiple="" class="custom-file-input" id="fileInput" style="color: #000;">
    Ответ написан
    Комментировать
    Комментировать

  • Как отключить скролл при открытой модалке?

    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);
}
    Ответ написан
    Комментировать
    Комментировать

  • Почему не отображаются маркеры в списке?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Отменённый маркер

    list-style-type: none;

    может быть как тегу <ul>, так и тегу <li>
    Ответ написан
    Комментировать
    Комментировать

  • Не работает переключение input-ов radio. В чём может быть проблема?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Чтобы input-ты переключались зависимо, должны быть одинаковые name
    <input type="radio" name="one"><br>
<input type="radio" name="one"><br>
<input type="radio" name="one">


    А если name разные, то использовать js
    <input type="radio" name="one"><br>
<input type="radio" name="two"><br>
<input type="radio" name="three">

    $('input[type="radio"]').on('click', function() {
  $('input[type="radio"]').prop('checked', false);
  $(this).prop('checked', true);
});
    Ответ написан
    Комментировать
    Комментировать

  • Как выполнить скрипт при повороте экрана?

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

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


    // Вы также можете вручную запустить это событие.
    $( window ).orientationchange();
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать ссылку с номер whatsapp на сайте?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Сейчас (2023г) проверил, надёжнее работает так

    И телеграм вот так лучше
    <a href="tg://resolve?domain=USERNAME">Telegram</a>

    USERNAME без собаки

    И для Whatsapp
    <a href="whatsapp://send?phone=79809999999">Whatsapp</a>
    Ответ написан
    Комментировать
    Комментировать

  • Как создать HTML Якорь на текущую страницу?

    Fortoo
    @Fortoo
    Top-Web OpenCart
    Можно для якоря использовать любые идентификаторы, начиная от data-url и заканчивая просто классами
    <body>
  <div class="calculator__step step_1">
    <img src="" alt="">
  </div>
  <div class="calculator__step step_2">
    <img src="" alt="">
  </div>
  <div class="calculator__step step_3">
    <img src="" alt="">
  </div>
</body>

    К примеру прокручивать между блоками, используя классы.....
    $("body").on('click', '.calculator__step img', function(e){
        var sc = '.step-' + (Number($(this).parent().attr("class").match(/(step\-[0-9]+)/)[0].match(/[\d]+$/)[0]) + 1);
        var dn = $(sc).offset().top;
           // sc - в переменную заносим информацию о том, к какому блоку надо перейти
           // dn - определяем положение блока на странице
            $('html, body').animate({scrollTop: dn}, 1000);
    });
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать плавную прокрутку страницы до якоря?

    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>


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