Ответы пользователя по тегу HTML
  • Как быть с 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 нет многопоточности, только последовательная обработка событий. Они не должны стопорить единственный поток, так что позаботьтесь чтобы функции обработчики не были перегружены вычислениями или постоянным глубоким поиском каких-то элементов на странице.
    Ответ написан
  • Как изменить положение у строчно-блочных элементов списка?

    @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).
    Ответ написан
  • Как сделать чтобы 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: ваш цвет;
    }
    Ответ написан
  • Как подключить на одной странице к одному phpmailer-файлу две формы?

    @alexalexes
    Можно. Самое главное, мы не подключаем php-скрипт, а отправляем данные этих форм на обработку этим php-скриптом. Так проще прийти к пониманию, как оно работает.
    Чтобы php-скрипт мог воспринимать данные первой формы, он должен уметь пренебрегать наличием параметра user_car.
    А делается это таким образом:
    строчка:
    $car = $_POST['user_car'];
    исправляется на:
    $car = array_key_exists('user_car', $_POST) ? $_POST['user_car'] : null;

    и другая строчка:
    $mail->Body    = '' .$name . ' хочет перегнать машину ' .$car. '  из ' .$from. ' в ' .$to. '. <br> Вот его номер телефона ' .$phone;

    исправляется на:
    $mail->Body    = $name . ' хочет перегнать '.(is_null($car) ? 'неуточненную машину' : 'машину ' .$car). '  из ' .$from. ' в ' .$to. '. <br> Вот его номер телефона ' .$phone;

    PS:
    Чтобы вам не прислали js-инъекцию на почту, все принимаемые параметры, из которых формируется текст письма, следует экранировать.
    $name = htmlspecialchars($_POST['user_name']);
    $phone = htmlspecialchars($_POST['user_phone']);
    $car = array_key_exists('user_car', $_POST) ?  htmlspecialchars($_POST['user_car']) : null;
    $from = htmlspecialchars($_POST['from']);
    $to = htmlspecialchars($_POST['to']);
    Ответ написан
    Комментировать
  • Как прекрутить редирект к Api Яндекс карт?

    @alexalexes
    Чтобы определить используемый язык клиентской стороны сайта достаточно проанализировать свойства window.navigator.
    Как определить язык браузера пользователя?
    PS:
    header('loacation ') - вы не можете использовать это в JS, это PHP.
    В JS то же поведение вызывается изменением свойства window.location.href
    Ответ написан
    Комментировать
  • Как сделать визуальный эффект на сайте в виде колонок?

    @alexalexes
    Делать правые и левые отступы, ширину элементов кратно размеру колонки.
    Приведенный пример эту идею и воспроизводит, нужно только покопаться в Elements в панели разработчика браузера, чтобы увидеть эту закономерность.
    Ответ написан
    Комментировать