Ответы пользователя по тегу HTML
  • Не отображается свойство в битриксе?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Не последнем скриншоте нет кода, отвечающего за вывод этого свойства (да и вообще какого-нибудь из свойств).

    Там есть закомментированный print_r. Если его раскомментировать, свойство видно в дереве?
    Если нет — кеш чистили?
    Если чистили и нет, попробуйте не ovchinnokov:компонент, а стандартный, битриксовский.
    Ответ написан
    8 комментариев
  • Как сделать так чтобы на onClick в input, selectionStart не сбивался, когда мышь выходит за границы поля ввода?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    >>> onClick не вызывает её, если курсор мыши выходит за пределы поля input
    ===
    Как можно кликнуть на поле курсором, который не над ним?
    Мне кажется, лучше использовать не onclick а onfocus/onblur
    Ответ написан
    Комментировать
  • Показывает не ту кнопку на мобильных устройствах?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Нужно локализировать проблему, пока не ясно, где болит.

    Это могут быть стили и браузер, а может с бекенда приходит так.
    Можно подключить смартфон через USB и отладчиком chrome проинспектировать HTML-код.
    Если выдача разная — искать в компонентах, почему так.
    В этом случае идеальным будет xdebug "на лету" при просмотре сайта с устройства, а инспектированием на компьютере.
    Ответ написан
    Комментировать
  • Как закрепить вкладку мобильного браузера Chrome?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    >>> Видимо из-за скролла вверх-вниз. Вкладка то выезжает, то прячется. А речь скорее всего идёт по какой-то фиксд слой
    Антон Алексеевич: совершенно верно; может, Вы знаете, как можно это решить?

    Общие размышления такие:
    - вкладка выныривает и заныривает при скролле документа. Если документ без скролла, вкладка не реагирует.
    - предполагается, что Слой, который перекрывает собой контент, выходит на первый план внимания пользователя и то, что под ним (на время работы со Слоем), отходит на второй план, а если в это время должно что-то скроллиться, то лишь содержимое Слоя.

    Соответственно, нужно сделать так, чтобы при открытии Слоя содержимое документа... перестало иметь скролл (так вот косноязычно) — например переключалось на overflow: hidden, а Слой соответственно перехватывал скролл и не пропускал его дальше, если пользователь доскроллил и упёрся вниз/вверх содержимого.

    Может пригодиться применение preventDefault через js, а можно выкрутиться и без него.
    https://learn.javascript.ru/default-browser-action
    Ответ написан
  • Как сделать выталкивающий сайдбар?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Мне, к слову, пример не приглянулся. Нет плавности, прыгает.
    Лучше смещать и затемнять.
    Как тут: http://www.лесобаза.рф/
    Ответ написан
    2 комментария
  • Как сделать якоря в слайдере на битриксе?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    В слайдере прописаны именно такие id?
    урок1
    Ответ написан
  • Как показать/спрятать кнопку в зависимости от контента?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Определить ширину родителя, посчитать сумму из ширины каждого ребёнка и сравнить
    Ответ написан
    Комментировать
  • Как лучше сверстать такой блок?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Если хоть чуть-чуть по-мониторить ленту...
    Буквально сегодня: Как сделать такую плитку?
    Ответ написан
    Комментировать
  • Пропорционируются ли элементы из PSD-макета относительно реального сайта, созданного по этому макету?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Я так верстаю. Всё в процентах, от шрифта до отступов.
    По поводу высоты: как правило такой момент только с картинками, ими и балансирую, иногда вплоть до того, что готовлю пропорциональную прозрачную болванку, которая «держит» мне блок.
    Первый сайт был так сверстан лет 5 назад. Пример: www.dovidka.org Это один из моих личных сайтов, на нём и отрывался, когда пришла идея так сверстать.

    Потом практика показала, что такая заморочка отлично прокачивает терпение (нужно же замерять и переводить в проценты каждый параметр), но не всегда оправдана.
    Иногда лучше (именно лучше, а не проще) задать фикс (или ступеньку фиксов через media-query), который отлично смотрится и на большом экране и на мобильном.

    В общем, нужно перед вёрсткой за-Дзениться в макет, определить всё, что не потребует резины и тогда уже анализировать остальное. То есть во главе to-do разработка каркаса, но это как нулевой пункт списка, чтобы сэкономить усилия. Редко когда сайт как сделали так он года в таком виде и живёт. Если он (спасибо, что...) живой, на нём постоянно что-то пилится и нужно заранее подумать о том, как это всё поддерживать: первый макет (в виде чистого PSD) как-правило тает в летах, дизайн-доработки — это скриншоты, в которых перерисована только какая-то область и через год никто уже и не вспомнит, а какая была исходная ширина и относительно чего считать проценты?
    Ответ написан
    2 комментария
  • Как сверстать такой эффект при наведении :hover?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Внутри элемента ссылки :after с position:absolute; height: 0%; bottom: 0;
    Чтобы была плавность — transition
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;


    При наведении на ссылку
    a:hover :after { height: 100%; }
    Ответ написан
    Комментировать
  • Как заставить дёргаться div?

    AlexeyGfi
    @AlexeyGfi
    YouTube >>> Битриксоид из Колхоза
    Пример с рабочего проекта.

    @keyframes obj_noising {
      0% { transform: rotate(2deg) translate( -3px, 0 ); }
      3% { transform: rotate(1deg) translate( 0, 0 );}
      6% { transform: rotate(-1deg) translate( -3px, 0 ); }
      9% { transform: rotate(-2deg) translate( 3px, 0 ); }
      12% { transform: rotate(0deg) translate( -3px, 0 ); }
      15% { transform: rotate(1deg) translate( 0, 0 ); }
      18% { transform: rotate(-1deg) translate( -5px, 0 ); }
      21% { transform: rotate(0deg) translate( 0, 0 ); }
      24% { transform: rotate(2deg) translate( -1px, 0 ); }
      27% { transform: rotate(-1deg) translate( 3px, 0 ); }
      30% { transform: rotate(0deg) translate( 0, 0 ); }
      
      64% { transform: rotate(2deg) translate( -1px, 0 ); }
      67% { transform: rotate(-1deg) translate( 3px, 0 ); }
      70% { transform: rotate(0deg) translate( 0, 0 ); }
    }
    
    @-webkit-keyframes obj_noising {
      0% { -webkit-transform: rotate(2deg) translate( -3px, 0 ); }
      3% { -webkit-transform: rotate(1deg) translate( 0, 0 );}
      6% { -webkit-transform: rotate(-1deg) translate( -3px, 0 ); }
      9% { -webkit-transform: rotate(-2deg) translate( 3px, 0 ); }
      12% { -webkit-transform: rotate(0deg) translate( -3px, 0 ); }
      15% { -webkit-transform: rotate(1deg) translate( 0, 0 ); }
      18% { -webkit-transform: rotate(-1deg) translate( -5px, 0 ); }
      21% { -webkit-transform: rotate(0deg) translate( 0, 0 ); }
      24% { -webkit-transform: rotate(2deg) translate( -1px, 0 ); }
      27% { -webkit-transform: rotate(-1deg) translate( 3px, 0 ); }
      30% { -webkit-transform: rotate(0deg) translate( 0, 0 ); }
      
      64% { -webkit-transform: rotate(2deg) translate( -1px, 0 ); }
      67% { -webkit-transform: rotate(-1deg) translate( 3px, 0 ); }
      70% { -webkit-transform: rotate(0deg) translate( 0, 0 ); }
    }
    @-moz-keyframes obj_noising {
      0% { -moz-transform: rotate(2deg) translate( -3px, 0 ); }
      3% { -moz-transform: rotate(1deg) translate( 0, 0 );}
      6% { -moz-transform: rotate(-1deg) translate( -3px, 0 ); }
      9% { -moz-transform: rotate(-2deg) translate( 3px, 0 ); }
      12% { -moz-transform: rotate(0deg) translate( -3px, 0 ); }
      15% { -moz-transform: rotate(1deg) translate( 0, 0 ); }
      18% { -moz-transform: rotate(-1deg) translate( -5px, 0 ); }
      21% { -moz-transform: rotate(0deg) translate( 0, 0 ); }
      24% { -moz-transform: rotate(2deg) translate( -1px, 0 ); }
      27% { -moz-transform: rotate(-1deg) translate( 3px, 0 ); }
      30% { -moz-transform: rotate(0deg) translate( 0, 0 ); }
      
      64% { -moz-transform: rotate(2deg) translate( -1px, 0 ); }
      67% { -moz-transform: rotate(-1deg) translate( 3px, 0 ); }
      70% { -moz-transform: rotate(0deg) translate( 0, 0 ); }
    }
    @-o-keyframes obj_noising {
      0% { -o-transform: rotate(2deg) translate( -3px, 0 ); }
      3% { -o-transform: rotate(1deg) translate( 0, 0 );}
      6% { -o-transform: rotate(-1deg) translate( -3px, 0 ); }
      9% { -o-transform: rotate(-2deg) translate( 3px, 0 ); }
      12% { -o-transform: rotate(0deg) translate( -3px, 0 ); }
      15% { -o-transform: rotate(1deg) translate( 0, 0 ); }
      18% { -o-transform: rotate(-1deg) translate( -5px, 0 ); }
      21% { -o-transform: rotate(0deg) translate( 0, 0 ); }
      24% { -o-transform: rotate(2deg) translate( -1px, 0 ); }
      27% { -o-transform: rotate(-1deg) translate( 3px, 0 ); }
      30% { -o-transform: rotate(0deg) translate( 0, 0 ); }
      
      64% { -o-transform: rotate(2deg) translate( -1px, 0 ); }
      67% { -o-transform: rotate(-1deg) translate( 3px, 0 ); }
      70% { -o-transform: rotate(0deg) translate( 0, 0 ); }
    }
    
    
    .f_noising {  
    	-webkit-animation:	obj_noising 1.0s infinite; /* Safari 4+ */
    	-moz-animation:	obj_noising 1.0s infinite; /* Fx 5+ */
    	-o-animation:	obj_noising 1.0s infinite; /* Opera 12+ */
    	animation:	obj_noising 1.0s infinite; /* IE 10+, Fx 29+ */
    	display: inline-block;
    }
    Ответ написан
    Комментировать