• Как растянуть SVG по ширине при этом сохранив высоту?

    petermzg
    @petermzg
    Самый лучший программист
    Ответ написан
    Комментировать
  • Как растянуть SVG по ширине при этом сохранив высоту?

    RadCor
    @RadCor Автор вопроса
    Если мой ответ вам помог, отмечайте его решением.
    Решил вопрос с помощью preserveAspectRatio="none"
    Демо: https://jsfiddle.net/RadCor/esf16w9y/3/
    Ответ написан
    Комментировать
  • Mac Book Pro 16 как охладить при подключенном внешнем мониторе?

    @andrew_aa
    Конечно вам тут ответили и посоветовали купить подставку аххаах, смешно на самом деле.

    Да, это проблема всех 16 макбуках и часть 13 из 2020 года. Очень много тем на форумах. Решения есть, одно из них тут - https://forums.macrumors.com/threads/16-is-hot-noi...

    Больше информации можно найти по теме MacBook Pro 16 hot issue.
    У меня тоже 16 дюймовый макбук про сейчас да, страдал тоже. Решил проблему включением HiDPI. проблема скорей в драйверах амд (как говорят с форумах). Больше инфы можно загуглить.
    Ответ написан
    3 комментария
  • Как в .jsx указывать xlink:href у тега use?

    @denisbookreev Автор вопроса
    методом тыка нащупал рабочий вариант: xlinkHref
    Ответ написан
    2 комментария
  • JADE. Как передать br в mixin?

    lunpully
    @lunpully
    Надо отключить защиту от ввода html тегов:
    mixin whyus_item(h2)
      .item
        h2!=h2
    +whyus_item('Line1\nLine2')
    +whyus_item('Line1 <br /> Line2')


    На третьей строке.
    Хотя если это дело генерится на сервере в онлайн доступе делать подобное надо с оглядкой чтобы не получить дыру. Если же локальная обработка - то все ок.

    Вот можно руководство почитать: jsman.ru/jade/#section-15
    Про незаэкранировнный вывод
    Ответ написан
    Комментировать
  • Почему ВКонтакте не подцепляет мой OpenGraph image?

    Mycelin
    @Mycelin
    Эквиумист
    Кто-нибудь знает, обновляется ли кэш вообще? Нигде нет информации, раньше у меня менялся быстро, сейчас что-то изменилось.

    UPD: Они сделали инструмент для этого! :)
    vk.com/dev/pages.clearCache
    Как и Фейсбук (developers.facebook.com/tools/debug)
    Ответ написан
    4 комментария
  • Что лучше Owl Carousel или Slick?

    LenovoId
    @LenovoId
    svg, css,js
    что лучше тайота или фольсваген ?
    от рук зависит и даже запорожец может быть им конкурентом ...
    Ответ написан
    Комментировать
  • Как получить высоту блока от верха страницы jquery или js?

    cimmwolf
    @cimmwolf
    Веб-разработчик
    В jQuery есть специальный метод .offset() для получения координат элемента относительно документа. Чтобы получить расстояние от верха страницы до шапки используйте вот такой код: $('<селектор шапки>').offset().top

    На чистом Javascript всё немного сложнее. Сначала нужно получить координаты объекта на странице с помощью getBoundingClientRect() а после этого прибавить к этим координатам значение скроллинга. Вот функция, которая работает аналогично jQuery.offset() (взято здесь):
    function offset(el) {
        var rect = el.getBoundingClientRect(),
        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
        scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
    }
    Ответ написан
    Комментировать
  • Какие название используете для классов в HTML/CSS?

    GoodProject
    @GoodProject
    Верстальщик
    Лови

    Основные
    .wrapper - /*обвертка сайта*/
    .header - /*верхняя часть сайта*/
    .sidebar - /*сайдбар (левая или правая часть сайта)*/
    .content - /*тело сайта (центральная часть)*/
    .footer  - /*нижнаяя часть сайта*/


    Название блока (обвертка)
    .bl 
    .block 
    .box
    .wrap
    .inner
    .container
    .main


    Секции блока
    .head, .header - /*верхняя часть блока например заголовок*/
    .cnt, .content, .body - /*тело блока например текс с картинкой*/
    .footer - /*нижняя часть блока к примеру дата добавления, категория и т.д.*/


    Колонки
    .column, .col - /*колонка*/

    Списки
    .list
    .item


    Позиционные классы
    .top /* элемент сверху */
    .left /* элемент слева float:left */
    .right /* элемент справа float:right */
    .bottom /* элемент внизу */
    .center /* элемент отцвентрирован  margin:0 auto; */
    .fixed - /*фиксированный элемент postion:fixed */


    Переходы
    .next  - /*следующий*/
    .prev  - /*предыдущий*/
    .last  - /*последний*/
    .first - /*первый*/
    .back  - /*назад*/
    .ahead - /*вперед*/


    Чисельные
    .one
    .thwo
    .three
    .four
    .five


    Размеры
    .xs, .tiny   - /*очень маленький*/
    .s,  .small  - /*маленький*/
    .md, .medium - /*средний */
    .lg, .large, .big - /*большой */
    .xl, .extra-large - /*очень большой*/


    Цвета
    .danger  - /*цвет опасности*/
    .default - /*стандартный цвет*/
    .warning, .error - /*цве ошибки*/
    .success - /*цвет успеха (к примеру верно введн код подтвержления)*/
    .primary - /*основной цвет */


    Кнопки
    .button, .btn - /*кнопка*/
    .loading - /*загрузка*/
    .close - /*закрыть*/
    .open  - /*открыть*/
    .touch - /*клик*/
    .edit  - /*редактировать*/
    .more  - /*больше*/
    .remove  - /*удалить*/
    .logout  - /*выход*/
    .select  - /*выбрать*/
    .divider - /*выпадающийся список меню*/
    .caret, .arrow - /*стрелочка*/
    .up - /* Вверх */
    .down - /* Вниз */
    .delete - /* удалить */
    .reply    - /*ответить*/


    Персона
    .profile - /*профиль*/
    .person - /*человек*/
    .ava, .avatar - /*аватарка, картинка*/
    .name - /*имя*/
    .description - /*описание*/
    .address  - /*адресс*/
    .nickname - /*ник*/
    .birthday - /*дата рождения*/
    .sex - /*пол*/
    .author - /* автор */

    Заголовки
    .title - /*заголовок*/
    .short-title - /*скороченный заголовок*/
    .full-title  - /*полный заголовок*/


    Ссылки
    .link - /*ссылка*/

    Текст
    .text, .txt, .paragraph  - /*текст*/
    .info, .information - /*информация*/


    Картинки
    .image, .img - /*картинка*/
    .icon, .ic   - /*иконка*/
    .bg - /*фоновая картинки или цвет*/


    Формы
    .search, .form-search - /*поиск по сайту*/
    .input - /*текстовый элемент*/
    .form  - /*форма*/
    .form-group - /*группа элементов формы*/
    .help-block - /*текст подсказки*/
    .label - /*название элемента формы*/


    Катагории
    .type - /*тип*/
    .cat, .category - /*катигория*/
    .subcat, .subcategory - /*подкатегория*/
    .section    - /*раздел*/
    .subsection - /*подраздел*/


    Видео
    .video
    .play  - /*пуск*/
    .stop  - /*стоп*/
    .pause - /*пауза*/


    Социальные сети
    .social - /* социальные сети */
    .vk   - /*вконтакте*/
    .fb   - /*фейсбук*/
    .twit - /*твиттер*/
    .inst - /*инстаграм */


    Активные классы
    .none     - /*скрытый элемент*/
    .disabled - /*заблокированный*/
    .active, .current   - /*активный */
    .selected - /*выбраный*/
    .visible  - /*видный элемент*/
    .focus    - /*нажатый*/


    Временные классы
    .time  - /*время*/
    .date  - /*дата*/
    .day   - /*день*/
    .month - /*месяц*/
    .year  - /*год*/


    Очистка
    .clear, .clearfix, .clr - /*очистка*/

    Разделители
    .separator, .divide - /*разделитель вертикальный для слов */
    .br, .line - /*разделитель горизонтальный для блоков*/


    Остоньлые названия
    .logo    - /*лого сайта*/
    .new    - /*новинка*/
    .sale   - /*распродажа*/
    .feedback - /*обратная связь*/
    .support - /*помощь */
    .group  - /*группа*/
    .module - /*модуль*/
    .posters - /*пост*/
    .form   - /*форма*/
    .tabs   - /*вкладки*/
    .slider - /*слайдер*/
    .news   - /*новости*/
    .table  - /*таблица*/
    .full   - /*полный*/
    .breadcrumbs - /*Хлебные крошки*/
    .pagination, .pager - /*Нумерация страниц*/
    .navbar, .nav, .menu, .navigation - /*Навигация (меню)*/
    .dropdown - /*выпадающейся меню */
    .comment  - /*комментарий*/
    .subscription - /* Подписка */
    .special - /* особенный элемент */
    .standard - /* стандартный элемент */
    .screens - /* Скрины */
    .rate - /* рейтинг */
    .online - /* онлайн */
    .panel - /* панель */
    .popup - /* попап */
    .version - /* версия */
    .page - /* страница */
    .banners - /* баннер */
    .map - /* Карта */
    .more - /*еще, подробнее*/
    .tags - /* тег */
    .price - /* цена */


    Взято с этого видео.
    Ответ написан
    2 комментария
  • Какой есть плагин на Gulp для "красивой" компиляции из SASS в CSS?

    iiiBird
    @iiiBird
    Пока ты спишь - твой конкурент совершенствуется
    обычный gulp-sass плагин такое умеет. просто поставь Output Styles - expanded
    Ответ написан
    3 комментария
  • Как вывести Migx в Migx?

    @AlexRas
    Все просто,

    Пример,
    1-ое поле, которое выводится на странице ресурса и в нужном поле где хочешь вывести другое поле MIGX делаешь так joxi.ru/KAxx4Ws4bD19A8

    2-е поле как обычно. только в шаблонах вывода ничего не выбираешь

    Для вывода на сайте, внутри getImageList вставляешь еще один getImageList с таким параметром joxi.ru/5md4Jasv0g8nm1

    --------------------------------------------------------

    Первый вызов:
    [[getImageList? tvname=`tv` tpl=`tpl`]]

    Второй вызов в чанке tpl:
    [[getImageList? value=`[[+image]]` tpl=`tpl2`]]
    Ответ написан
  • Почему сетка Bootstrap неправильно работает с Owl Carousel?

    @Kjuri
    Насколько я знаю, owl-карусель сама по себе рассчитана на адаптив, т.е. можно указать интервал и, в зависимости от разрешения, должна адаптироваться. Т.е. пытаться ее запихнуть в бутстрап - это во-первых странно, а во-вторых, чревато осложнениями.
    Ответ написан
    Комментировать
  • Почему сетка Bootstrap неправильно работает с Owl Carousel?

    VoxelGod
    @VoxelGod Автор вопроса
    Настройка шаблонов WordPress
    Т.к каждый элемент оборачивается в .owl-item автоматически, то .col-md-3 означает 25% именно от этого класса. Поэтому следует вместе с .col-md-3 прописывать руками .owl-item, чтобы эти классы висели на одном Div'е. В таком случае все BootStrap'овские классы работают исправно.
    P.S Спасибо откликнувшимся!
    Ответ написан
    Комментировать
  • Как с помощью radio inputa сделать динамическое изменение цены опционального товара?

    @dimentimor
    // может быть любым элементом (не только инпутом)
    $('[data-price]').on('click', function () {
    
    	// значение атрибута data-price кликнутого элемента
    	var price = this.dataset.price;
    
    	// "подняться" на 2 уровня по DOM
    	// найти внутри элемент с классом .price
    	// и заменить его текст на полученное значение
    	$(this).parent().parent().find('.price').text(price);
    });
    Ответ написан
    1 комментарий