Ответы пользователя по тегу HTML
  • Apache и кириллица?

    nowm
    @nowm
    Судя по скриншоту в комментариях к вопросу, у вас файл в кодировке UTF-8.

    В Apache

    Первый способ: в файле httpd.conf самого апача, либо в файле .htaccess, который находится в той же папке, что и HTML-файл (если его там нет, то создайте) можно прописать такую директиву:

    AddDefaultCharset utf-8

    Или так (если кодировку нужно устанавливать только для HTML-файлов):

    AddCharset utf-8 .html

    В HTML

    Второй способ: в самом HTML-файле в блоке <head> можно добавить тег, который скажет браузеру, что это UTF-8.

    <meta charset="UTF-8"/>
    Ответ написан
    Комментировать
  • Как правильно раздвинуть кнопки?

    nowm
    @nowm
    Кнопки растягиваются корректно, но вы используете бутстрап и класс .container, и бутстрап ограничивает ширину этого элемента, потому что это служебный для бутстрапа класс и он для него прописывает много собственных стилей. Блоки с кнопками, соответственно, за пределы родительского контейнера не вылезают.

    Как один из фиксов, класс container можно заменить на d-flex justify-content-between и они начнут нормально растягиваться.
    Ответ написан
    Комментировать
  • Почему на некоторых сайтах страницы не открываются в новом окне при ctrl+click?

    nowm
    @nowm
    Это происходит из-за того, что ссылка находится внутри элемента, на который навешано прослушивание события click. При этом это навешанное событие не проверяет ни источник клика, ни использование модификаторов (shift, alt, ctrl и так далее). Далее, когда вы кликаете по ссылке, при условии, что навигация происходит не в текущей вкладке, событие клика передаётся по цепочке всем родителям этой ссылки, и если один из родителей слушает click, он его обработает.

    Это обычное следствие кривых рук отсутствия опыта — никакой стратегии тут нет. Люди просто не умеют просчитывать варианты того, в каких обстоятельствах будет работать их код.

    И если перейти на частности, то на сайте, который вы упомянули, на строку таблицы, внутри которой находится ссылка, навешано событие, которое при клике открывает страницу /en/subtitles/***. Если вы просто кликаете по ссылке, то вы переходите по корректному адресу, потому что используется та же самая вкладка, но если вы открываете ссылку в новом окне, кликая не правой клавишей мыши, а левой плюс кнопка-модификатор Ctrl, событие клика передаётся в тег TR, который переадресовывает текущую вкладку на адрес /en/subtitles/***.
    Ответ написан
    2 комментария
  • Как убрать скролл в браузере mozilla?

    nowm
    @nowm
    В Firefox нет такой штуки, как ::-moz-scrollbar, но для элемента можно сделать scrollbar-width: none;:

    div {
      max-height: 120px;
      overflow-y: auto;
      overflow-x: none;
      scrollbar-width: none;
    }
    
    div::-webkit-scrollbar {
      display: none;
    }


    Я ваш jsfiddle-пример протестировал с scrollbar-width, и скролбар после этого исчезает корректно в Firefox.
    Ответ написан
    1 комментарий
  • Функция toLocaleString. Не получается сделать отступы?

    nowm
    @nowm
    Вместо ${data.items[key].price*1.2} можно написать
    ${parseInt(data.items[key].price*1.2).toLocaleString('ru-RU')}
    и не будет никакой проблемы, и не нужно будет дополнительно делать $('.content__api__price').each(function() {}) и фиксить формат.

    (Извиняюсь за форматирование. Я всё писал в одну строку, просто «Хабр Q&A» не умеет переносить длинный код внутри строки и получается не очень красиво, когда он его начинает лепить с новой строки.)
    Ответ написан
    1 комментарий
  • Почему не работает hover для иконки font awesome?

    nowm
    @nowm
    Hover не работает из-за того, что иконка находится рядом с тегом <a>. А должна быть внутри.

    <div class="previewLinks">
        <div class="previewLinks1">
            <!-- Неправильно -->
            <i class="far fa-star"></i><a href="#">Рейтинги</a>участников
            <!-- Правильно -->
            <a href="#"><i class="far fa-star"></i> Рейтинги</a> участников
        </div>
    </div>
    Ответ написан
    Комментировать
  • Как узнать на каком скрытом HTML элементе установился фокус?

    nowm
    @nowm
    Обычно ручной поиск сфокусированного элемента не срабатывает, потому что когда ты открываешь консоль разработчика, фокус с элемента слетает. Если снова его фокусируешь при открытой консоли, фокус слетает в тот момент, когда ты переключаешься в уже открытую консоль. Так что, самый подходящий вариант: можно прослушивать события фокуса и сразу печатать в лог, кто этот фокус получил. Должен помочь такой код:

    window.addEventListener('focusin', event => console.log(new Date, event.target));


    Если он ничего не выводит в момент смены фокуса, значит фокус ушёл за пределы страницы — например, в строку адреса в браузере, на какую-нибудь иконку на панели и так далее.
    Ответ написан
  • Как убрать значок reCaptcha?

    nowm
    @nowm
    Мне нравится эта статья про CSS: сопособы добавления стилей на страницу. Она написана вполне доступным языком, описывает кучу способов, которыми можно решить вашу проблему, и очень легко ищется поисковиком.

    Upd: Блок с бейджем рекаптчи использует класс grecaptcha-badge.
    Ответ написан
    1 комментарий
  • Как изменить место placeholder?

    nowm
    @nowm
    У input-элементов есть CSS-свойство ::placeholder. Можно сделать так:

    #my-phone-input::placeholder {
        padding-left: 2em;
    }


    Просто замените #my-phone-input на корректный селектор для инпута, который у вас на скриншоте. Но, вообще, обычно у плейсхолдера такой же отступ, как и у текста в поле ввода, так что если вы для самого input зададите отступы с помощью padding, плейсхолдер это унаследует.
    Ответ написан
  • Как правильно составить XPath?

    nowm
    @nowm
    С самого начала у вас должно быть понимание, что Query можно вызывать только для DomXPath, который инициализируется только с DomDocument. Всё. Ему нельзя подсовывать DomNodeList или DomNode. Только DomDocument. Из-за этого нужно применять другой подход к получению данных.

    Вы думаете, что можно найти запросом таблицу, потом ещё одним запросом найти в ней DIV, потом ещё одним запросом найти в этом DIV какой-нибудь SPAN, а в нём ещё одним запросом найти A. С DomXPath так нельзя работать. Хотите найти элемент, ищите его сразу — от корня DOM.

    Прямо сейчас могу что-то неточно написать в самих XPath-запросах, но делать нужно примерно так:

    $pageDom = new DOMDocument();
    @$pageDom->loadHTML($pageHtml);
    $pageXPath = new DomXPath($pageDom);
    
    $elementsName = $pageXPath->query('.//table/.//div[class="name"]');
    $elementsDescription = $pageXPath->query('.//table/.//div[class="description"]');
    $elementsRating = $pageXPath->query('.//table/.//div[class="rating"]');
    
    $elements = array();
    
    for ($i = 0; $i < $elementsName->length; $i++) {
        $elements[] = array(
            'name' => $elementsName->item($i)->nodeValue,
            'description' => $elementsDescription->item($i)->nodeValue,
            'rating' => $elementsRating->item($i)->nodeValue,
        );
    }
    
    //Profit


    Однако!

    Якориться к предыдущим результатам поиска всё-таки возможно. У функции DomXPath::query есть необязательный параметр с типом DOMNode. Получаются такие неявные под-запросы.

    $pageDom = new DOMDocument();
    @$pageDom->loadHTML($pageHtml);
    $pageXPath = new DomXPath($pageDom);
    
    $elementsDom = $pageXPath->query('.//table/tr');
    
    $elements = array();
    
    foreach ($elementsDom as $elementDom) {
        $elements[] = array(
            'name' => $pageXPath->query('.//div[class="name"]', $elementDom)->item(0)->nodeValue,
            'description' => $pageXPath->query('.//div[class="description"]', $elementDom)->item(0)->nodeValue,
            'rating' => $pageXPath->query('.//div[class="rating"]', $elementDom)->item(0)->nodeValue,
        );
    }


    Особенность в том, что используется всё тот же $pageXPath, а не происходит попытка создать из DOMNode отдельный DOMXPath. И дальше происходит поиск в контексте предыдущих результатов запроса — за счёт добавления в функцию DomXPath::query дополнительного параметра, уточняющего контекст, в котором происходит поиск — DomXPath::query(строка_запроса, контекст_поиска). Так что в такой ситуации «.//div[class="name"]» будет искаться не во всём документе, а только в текущей строке TR.
    Ответ написан
    3 комментария
  • Как вырасти из верстальщика в JS-программиста?

    nowm
    @nowm
    «Гордое звание» — это когда есть награды, дипломы, сертификации и прочее. Вообще, к слову, я уже лет 5 пишу на PHP почти каждый день и всё равно не считаю себя программистом. Возможно, когда у меня будет диплом от Zend, я буду думать, что я что-то вроде программиста.

    Если вам шашечки нужны, то сдавайте всякие_сертификации, если же нужно ехать, то лучше просто писать код и не загоняться, гордое у вас звание или нет.

    Upd. А вообще, извините за ёрничество. Возможно вам помогут некоторые мысли на эту тему:

    Выражение «просто пиши код», на самом деле, — это квинтэссенция. Просто некоторым людям становится неохота несколько раз разными словами описывать одно и тоже, и родился такой концентрат — который, как Yupi, куда можно «просто добавить воды», и получится готовый продукт. По сути, большую часть советов можно свести к этой одной фразе [пиши код]. Можно (даже нужно) для развития прочитать кучу книжек, но если вы мысли из этих книг не оформите кодом, толка от этого развития не будет, и программистом вы не станете. Мышцы будут развиваться только в том случае, если вы их напрягаете, а не только читаете инструкции, как их правильно напрягать. Инструкции помогут это делать правильно, но без практики не будет никакого развития.

    Для постоянного развития нужен постоянный поток работы с новыми необычными заданиями. В веб-студиях обычно с новыми необычными заданиями очень туго бывает. Моё мнение, что долгая работа в веб-студии — дорога, которая убивает любознательность начисто. Через некоторое время работа становится настолько однотипной, что, кажется, можно бота написать, который будет за вас её делать. Новые задачи, которые напрягают мозги и не позволяют пользоваться готовыми решениями — очень хороший движитель, но за целый день делания однотипной работы в веб-студии, самостоятельно искать новые задачи становится неохота — всё же есть такая штука как оффлайн и, вообще, банальная усталость и тупиздняк от однотипной работы.

    Когда вы пользуетесь каким-нибудь готовым решением, полезно заглядывать к нему под капот. У меня примерно похожая история была с Opencart. Я в какой-то момент очень сильно начал загоняться процессами, происходящими на этапе инициализации движка и отдельными классами, входящими в его состав. В результате родилось решение, которое позволило использовать PDO, вместо mysql_*, при этом, оно хорошо работало на боевых серверах и не ломало модули, где использовался старый подход. По сути, особенно заметной разницы в быстродействии не стало, но лично для меня это был хороший буст. (Я потом ещё загнался тем, чтобы выдрать из опенкарта костяк и использовать его в качестве своеобразного бутстрапа, на котором можно собрать любой сайт. Вряд ли я всё это дело буду где-то публиковать и использовать, но, опять же, лично для меня это было полезным для развития процессом.)

    После того, как вы сделали работу, тысячу раз её перепроверьте и сделайте кучу ненужных замеров производительности и потребления ресурсов. Попробуйте всё это дело как-нибудь оптимизировать. Например, сдали работу — всех всё устраивает, денег заплатили и т.п. В этой ситуации нужно загнаться тем, чтобы снизить потребление памяти на 10% процентов. Никто не заметит, что вы огромную работу сделали, чтобы снизить потребление, но это будет лично для вас практика. Можно сделать какую-нибудь ненужную работу, вроде выкидывания из исходников jQuery всех функций, которые вы никогда не будете использовать. Или, наоборот, можно что-то своё добавить. По сути, постоянное развитие — это как жизнь киргизского комсомольца, который постоянно ищет себе проблемы, чтобы потом их героически преодолевать.

    А ещё... а ещё... У меня очень большая куча мыслей — я наверное когда-нибудь напишу книжку, чтобы все их аккуратно уложить в голове.

    Первый шаг, который нужно сделать: заняться каким-нибудь личным проектом, где вы сможете развивать свои навыки (и, даже, не обязательно его выпускать за пределы локальной машины). Что угодно. Например, калькулятор с какими-нибудь расширенными функциями. Тут как раз на вёрстку будет минимальный упор. В этом проекте нужно отказаться от использования любых сторонних библиотек и изобретать свои решения. Например, вам хочется делать выбор элементов из DOM простыми селекторами с синтаксисом, похожим на jQuery, смотрите, как это реализовано в jQuery и пишите с нуля свой аналог. Главное не копипастить, а писать самостоятельно. Пусть будет похоже, но будет не точная копия. Вы в процессе будете напрягать мозги и развиваться. Будете часто лазать в документацию по языку. У вас появится понимание не многочисленных фреймворков, а именно чистого нативного кода и функций. И мыслить вы начнёте не категориями «какую функцию jQuery можно использовать», а категориями «какой алгоритм сюда можно придумать».

    Это всё сравнимо с обычной грамотностью и умением выражать мысли — чтобы развиваться, нужно читать и писать. В любом случае, писать код всё равно придётся. Без этого программистом не станешь.
    Ответ написан
    4 комментария
  • Как называется подход, обеспечивающий работоспособность сайта с отключенным javascript?

    nowm
    @nowm
    Как один из вариантов, это называется Progressive enhancement (EN). На хабре ещё есть статья про такой подход.
    Ответ написан
    Комментировать
  • Как сделать кнопку наверх без прокрутки?

    nowm
    @nowm
    По-моему вот такая конструкция будет нормально везде работать:

    <a onclick="$(document).scrollTop(0);">Наверх</a>

    На тач-устройстве, во всяком случае нормально работает — не только на компьютере с мышью. Никакой анимации. Реализовано с помощью jQuery, так как у вас в тегах это упоминается.

    Или, если нужна именно кнопка:

    <button type="button" onclick="$(document).scrollTop(0);">Наверх</button>


    И вообще можно практически любой элемент так использовать.

    При использовании тега < A > с атрибутом href, нужно добавить в onclick инструкцию return false, чтобы переход по ссылке не происходил:

    <a href="#" onclick="$(document).scrollTop(0);return false;">Наверх</a>


    Если href не используется, то return false не обязательно указывать.
    Ответ написан
  • Как растянуть li по высоте?

    nowm
    @nowm
    Этот вопрос лучше архитектурно решать. Если вы вместо списка будете использовать таблицу для представления таких данных, то у вас автоматически решится куча вопросов с дизайном. И не нужно будет задавать кучу absolute/relative правил, и текст не будет на метки наезжать, и всё растягиваться будет нормально. Да и вообще, не нужно будет имитировать табличное представление — оно и так будет табличным.

    И для тех же тегов «TD» вполне нормально можно «itemptop» прописывать.
    Ответ написан
    Комментировать