Ответы пользователя по тегу HTML
  • Как сделать такую штуку в HTML?

    @alexalexes
    Можно честно спиратить из vk.com плашку "Новые сообщения".
    <h4 class="im-page--history-new-bar _im_unread_bar_row">
    :before
    <span>Новые сообщения</span>
    :after
    </h4>
    Ответ написан
    Комментировать
  • Как сверстать блок, чтобы дочерние элементы переносились на новую строку с учетом фиксированной кнопки в углу?

    @alexalexes
    Как упомянуто в соседнем ответе, будет очень костыльно и чисто для спортивного интереса.
    К тому же, есть ограничение на фиксированный размер элемента, которое вам не нужно.
    <style>
        div.container
        {
          display: flex;
          flex-wrap: wrap;
          width: 770px;
          height: 90px;
          background-color: green;
          overflow: hidden;
        }
        div.container > div
        {
          width: 60px;
          height: 25px;
          background-color: #df1245;
          text-align: center;
          margin: 5px;
          padding: 5px 0;
        }
        div.container > div:nth-child(n + 22) /*этим селекторам задаем свойство сортировки элементам, которые идут после кнопки "показать еще" если контейнер будет адаптивным, придется прописывать кучу вариантов nth-child */
        {
          order: 2;
        }
        div.container > label.more
        {
          display: block;
          width: 130px;
          height: 25px;
          margin: 5px;
          padding: 5px 0;
          text-align: center;
          order: 1; /* У кнопки стоит такой индекс сортировки чтобы оказаться между видимыми и невидимыми элементами */
          background-color: #78d412;
        }
        div.container label.more span.less
        {
          display: none;
        }
        #show-more-state
        {
          display: none;
        }
        #show-more-state:checked ~ div.container
        {
          height: auto;
        }
        #show-more-state:checked ~ div.container label.more
        {
          order: 3;
          margin-left: auto;
        }
        #show-more-state:checked ~ div.container label.more span.more
        {
          display: none;
        }
        #show-more-state:checked ~ div.container label.more span.less
        {
          display: initial;
        }
      </style>
      <input id="show-more-state" type="checkbox"/> <!-- Этим чекбоксом запонимаем состояние кнопки, чтобы можно было оттолкнуться стилями от превдокласса :checked -->
      <div class="container">
        <label class="more" for="show-more-state"><span class="more">ПОКАЗАТЬ ЕЩЕ</span><span class="less">СВЕРНУТЬ</span></label>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
      </div>
    Ответ написан
  • Как быть с 4 уровневой вложенностью кавычек в HTML?

    @alexalexes
    На более вложенном уровне экранирования нужно два символа экранирования \
    Первый символ экранирует символ экранирования для следующего уровня.
    Второй символ экранирует кавычку, чтобы не включало закрытие кавычки на уровне PHP.
    $value = '<form method="post">
    <button type="submit" onclick="return confirm(\'Вы уверены, что хотите сменить статус на \\\'Доставлен\\\' ?\')">Доставить</button>
    </form>';

    Вариант 2. Чтобы забыть об экранировании на уровне PHP, можно воспользоваться синтаксисом heredoc, который позволит вставлять любое константное содержимое без явного экранирования.
    $value = <<<ANY_RANDOM_SYMBOLS_FOR_BORDER
    <form method="post">
    <button type="submit" onclick="return confirm('Вы уверены, что хотите сменить статус на \'Доставлен\' ?')">Доставить</button>
    </form>
    ANY_RANDOM_SYMBOLS_FOR_BORDER;
    Ответ написан
    1 комментарий
  • Как исправить ошибку закрытия таба при попытки ввода информации в input?

    @alexalexes
    На элемент inputa type="number" повесить обработчик события клика с вызовом остановки всплытия события.
    PS: Ссылка для получения полного понимания механизма всплытия/погружения событий.
    Ответ написан
    Комментировать
  • Как убрать одну из прокруток?

    @alexalexes
    CSS свойство элемента overflow дробится на overflow-x и overflow-y.
    Подрегулируйте свойство overflow-x или overflow-y у контейнера .table__wrap

    Чтобы оставить возможность прокручивать контейнер, но не отображать сами полосы.
    Есть определенные CSS-хаки, но они специфичны для каждого браузера: https://qna.habr.com/q/18012
    Ответ написан
  • Виснет страница при проигрывании аудио?

    @alexalexes
    Попробуйте вместо setinterval для отображения текущей позиции использовать подписку на специализированные события элемента audio, например, на timeupdate.
    PS: Ваш плеер на основе тэга audio, надеюсь?
    полоски прогресса и таймера в отдельный поток?

    В JS нет многопоточности, только последовательная обработка событий. Они не должны стопорить единственный поток, так что позаботьтесь чтобы функции обработчики не были перегружены вычислениями или постоянным глубоким поиском каких-то элементов на странице.
    Ответ написан
  • Как лучше добавлять большие куски html на чистом JS?

    @alexalexes
    Причем данные нужно понатыкать в блок так, чтобы было красивенько - а это куча разных span, ul и прочего, что будет расставлять данные в блоке по определенно схеме.

    Эта работа для любого JS шаблонизатора, который вы не хотите использовать.
    А это очень много кода - почти 200 строк шаблонной строки, куда втыкаются полученные данные.

    Для рендеринга DOM важно не количество строк или символов, а количество узлов (тэгов и текстовых блоков). Если у вас узлов в документе меньше тысячи, то любые беспокойства по поводу того, что оно прорисуется не быстро - это экономия на спичках. Если у вас пару десятков или сотен тысяч узлов в блоке, то да, определенные задержки будут.
    В JS-файле все это выглядит не совсем круто, плюс в шаблонной строке очень неудобно писать HTML.

    Да-да, без шаблонизатора, единственный способ сшивать строки в JS:
    Это использовать плюсы:
    var html_str = '<p>'
    + 'какое-то значение'
    + '</p>';

    двойными кавычками с обратным слэшем:
    var html_str = "<p>\
    какое-то значение\
    </p>";

    или обратными кавычками (не для старых браузеров)
    var html_str = `<p>
    какое-то значение
    </p>`;

    Еще нужно заботится об экранировании внутренних кавычек, если такие используются для обрамления всей строки шаблона.
    Да, неудобно, но это плата за отсутствие шаблонизатора.
    Но и этот подход мне не нравится, так как получится очень много операций по встраиванию данных в уже сформированный html. А это, насколько я знаю, очень неэффективно.

    Опять же, если у вас не огромное полотно html на несколько десятков тысяч узлов, то тупо вставляем содержимое в innerHTML контейнера и оно отрендерится без проблем.
    Ответ написан
    2 комментария
  • Как изменить положение у строчно-блочных элементов списка?

    @alexalexes
    </li><!-- тут символ переноса строки, вносит свою лепту как текстовая нода, имеющая небольшие, но геометрические размеры -->
          <li class="modules-card layout">

    Часто такой эффект выявляется, когда используется display: inline-block.
    Выход - не переносить li элементы (и не оставлять пробелы), или нивелировать размер текстовых нод с помощью css.
    Ответ написан
    Комментировать
  • Как защитить сайт от скачивание файлов?

    @alexalexes
    Запускать игру только в своем окружении.
    Для пользователя написать тонкий клиент в виде видеоплеера с возможностью передавать команды управления интерфейсу приложения.
    На поставщика игры ложится вся ноша генерировать контент в реальном времени - удовольствие не из дешевых.
    На пользователя - иметь широкий интернет канал с малым пингом.
    Цель сохранения авторских прав будет достигнута, но ресурсы будут потрачены о-го-го.
    Ответ написан
    Комментировать
  • Как реализовать прокрутку текста с помощью табов?

    @alexalexes
    1. Определяете список заголовков.
    2. Определяете offsetTop у каждого заголовка.
    3. Определяете scrollTop у прокручиваемого блока.
    5. Определяете по offsetTop-ам i-ый и i+1 заголовок, где находится значение scrollTop.
    6. Для стрелки вверх делаете scrollTo до i-ого заголовка.
    7. Для стрелки вниз делаете scrollTo до i+1 заголовка.
    8. Если i-ого или i+1 заголовка нет, то гасите кнопку.
    9. На событии скроллинга нужно анализировать пункты 1-8, чтобы кнопки вовремя гасились.
    Ответ написан
    Комментировать
  • Как правильно сформировать регулярное выражение php?

    @alexalexes
    Просто взял регулярку из ответа.
    <a\s.*?href="(.+?)".*?>\[photo-.+<\/a>
    И методом тыка подобрал в онлайн редакторе.
    Ответ написан
  • Как сделать подобное меню?

    @alexalexes
    Решение без JS:
    Принцип действия: Над кнопкой показа меню добавляется скрытый чекбокс, который выступает как триггер состояния. Состояние чекбокса управляет применяемым css правилом на меню.
    Кнопку "Server systems development" и скрываемое меню делаете в одном контейнере top-left-container.
    На том же уровне, где находится меню делаете прозрачный input type="checkbox" над кнопкой "Server systems development".
    Вывод и скрытие меню задаете примерно такими правилами:
    div.top-left-container input[type="checkbox"]:checked ~ div.menu
    {
    /*анимация появления меню*/
    }
    div.top-left-container input[type="checkbox"]:not(:checked) ~ div.menu
    {
    /*анимация скрытия меню*/
    }

    Решение c JS:
    Вешаете обработчик на кнопку Server systems development, проверяете наличие класса отображения на меню. Если нет класса, то добавляете, если есть то убираете (в Jquery будет использоваться функция toggle).
    Ответ написан
    Комментировать
  • В чем лучше указывать ширину и высоту блоков?

    @alexalexes
    Зависит от назначения блоков.
    Точные размеры, да, возможно, примените пиксели, а может и сантиметры или дюймы.
    Относительные размеры понадобятся - возьмете проценты.
    Растягивать относительно содержимого - вообще будет auto.
    Адаптивно будете работать - еще куча альтернативных размеров появится в медиа-запросах.
    Ответ написан
    Комментировать
  • Как добавить текст к value при отправке?

    @alexalexes
    Добавляете еще одно скрытое поле с id="field_name_hidden", видимому полю присваиваете id="field_name_showed". Добавляете форме свой обработчик события onsubmit.
    <form .... onsubmit="my_submit(e)">
    ...
    <label>Имя</label>
    <input id="field_name_showed" type="text"  value=""> <!-- Поле, которое видит пользователь -->
    <input id="field_name_hidden" type="hidden"  value=""> <!-- Скрытое поле для отправки -->

    function my_submit(e)
    {
      e.preventDefault(); // останавливаете выполнение сабмита
      document.getElementById("field_name_hidden").value = document.getElementById("field_name_showed").value + " (добавленный текст)"; // добавляете в скрытое поле формы имя и что хотели еще.
     e.target.submit(); // перезапускаете сабмит формы
    }

    На стороне сервера перехватываете значение поля field_name_hidden.
    Ответ написан
    Комментировать
  • При переносе скрипта из .html файла в .js он перестает работать. Почему?

    @alexalexes
    DOM еще не доступен, когда скрипт пытается работать с его элементами.
    Два пути решения:
    а) Перенести подключение js файла после тега body.
    б) Изменить работу скрипта так, чтобы работа с DOM началась после загрузки DOM-дерева.
    Ответ написан
    1 комментарий
  • Как верстать правильно если на компьютерах стоит разный зум в настройках windows?

    @alexalexes
    Вам нужно определиться, какую цель вы преследуете при выборе свойства font-size.
    1. Физический размер элемента не должен отличаться или малозависим от настроек браузера устройства.
    Решение: используем физические величины: mm, cm, in.
    2. Размер элемента должен быть всегда столько-то пикселей. Используем px.
    3. Размер шрифта должен адаптироваться под возможности комфортного отображения на устройстве.
    Используем pt, em, %. В этом случае тестируете разные режимы адаптивности сайта: у пользователя может отличаться размер экрана, плотность пикселей, он может крутить масштаб скажем, от 60% до 150%.
    На разработчика ложится это обязанность, чтобы сайт выглядел приемлемо, в разумных изменениях настроек отображения.
    Могу путать величины CSS, но такие цели точно есть, и они взаимоисключающие.
    Ответ написан
    1 комментарий
  • Нужна помощь с таблицой VUE?

    @alexalexes
    Вы сформируйте структуру данных так, чтобы ее можно было удобно обходить.
    Например, так:
    [
      {
        header_title: "Название некоторого длительного процесса",
        date_begin: , // начало процесса, вычисляется предварительной пробежкой по всем заявкам, поиск минимума
       date_end: , //  конец процесса, вычисляется предварительной пробежкой по всем заявкам, поиск максимума
    appls: [
                 {title: "ЗАЯВКА", date_begin, date_end},
                 {title: "ЗАЯВКА", date_begin, date_end},
        ]
      }
    ]

    И вообще, отпадет вопрос как рисовать таблицу (двумя вложенными v-for).
    Ответ написан
  • Почему не может определить данные переменной из БД?

    @alexalexes
    if ($_COOKIE['user'] == '')
    Потому что, прощупывать наличие элемента в массиве нужно либо так:
    isset($_COOKIE['user'])
    либо
    array_key_exists('user', $_COOKIE)
    Еще инвертируйте логику if авторизации, так как логическое выражение для авторизованного состояния легче читать и отлаживать в сторону истина, на else может сработать что-то еще, что не предполагали что попадет под ложное условие.
    <?php
        if (isset($_COOKIE['user']) && $_COOKIE['user'] != ''):
        ?>
    
    <div class="container">
            <p>Hello, <?= $_COOKIE['user'] ?>. To exit click the button</p>
            <a href="exit.php" class="btn btn-warning mt-2">Sign out</a>
        </div>
       
    <?php else: ?>
     <div class="row">
            <div class="col">
                <h1>SIGN UP</h1>
                <form action="check.php" method="post">
                    <input type="text" class="form-control" name="login" id="login" placeholder="Login"><br/>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Name"><br/>
                    <input type="password" class="form-control" name="pass" id="pass" placeholder="Password"><br/>
                    <button class="btn btn-success" type="submit">Sign up</button>
                </form>
            </div>
            <div class="col">
                <h1>LOG IN</h1>
                <form action="auth.php" method="post">
                    <input type="text" class="form-control" name="login" id="login" placeholder="Login"><br/>
                    <input type="password" class="form-control" name="pass" id="pass" placeholder="Password"><br/>
                    <button class="btn btn-success" type="submit">Log in</button>
                </form>
            </div>
        </div>
    </div>
    <?php endif; ?>
    Ответ написан
    Комментировать
  • Как сделать чтобы iframe подстраивался под адаптивный html внутри него?

    @alexalexes
    iframe - самый древний у дубовый тег по части адаптивности.
    Им можно управлять, задавая конкретные значения ширины и высоты, запрашивая состояние скроллбаров.
    var iframe = document.getElementById('fileUploadIframe');
     iframe.width = iframe.contentWindow.document.body.scrollWidh + "px";
     iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";

    Когда корректировать эти параметры? Нужно смотреть случаи, когда контент Iframe меняется и вешать выполнение этих строк на соответствующие обработчики событий.
    Ответ написан
    Комментировать
  • Как перекрасить таблицу?

    @alexalexes
    У таблицы есть класс white_border, если он используется только на этом элементе, то можете использовать такой селектор после всех селекторов, описывающие общие стили таблиц:
    table.white_border,
    table.white_border th,
    table.white_border td
    {
        border-color: ваш цвет;
    }
    Ответ написан