Ответы пользователя по тегу HTML
  • Как сделать, чтобы высота iframe была равна соотношению 16:9?

    @alexalexes
    Чтобы сохранить пропорции при отображении в любом браузере, нужно сделать контейнер под видео с относительным позиционированием:
    .video__container
    {
      position: relative;
    }

    И в него положить img от png файла с однотонным заполнением с нужным соотношением сторон (можно в виде встроенного бинарника сформировать ресурс, такой файл в эквиваленте png весит пару сотен байт).
    Для iframe сделать абсолютное позиционирование, чтобы можно было его приподнять над img блоком, с помощью z-index, и задать 100% ширину и высоту, чтобы его размер зависел от контейнера, а размер (точнее, пропорции) контейнера будет зависеть от размера img.
    iframe.video__iframe
    {
      position: absolute;
      z-index: 1;
      /* width и height устанавливаются в атрибутах iframe! */
    }

    В итоге получится такая конструкция:
    <div class="video__container">
      <img src="video-iframe-background-1920x1080.png"/>
      <iframe class="video__iframe" src="" width="100%" height="100%"></iframe>
    </div>

    Такой подход позволяет гибко настраиваться размерам контейнеру .video__container, или фиксировать один из его размеров. При этом, iframe всегда будет держать пропорции того изображения, которое заложено в img. И это будет работать практически на любом браузере не первой свежести.
    Ответ написан
    Комментировать
  • С помощью чего сделан эффект как на сайте https://www.fromscout.com/?

    @alexalexes
    Анимация по ключевым кадрам.
    animation: main-logo-texture 10s linear infinite;
    Ключевые кадры:
    @keyframes main-logo-texture {
        0% {
            transform: translate(0)
        }
    
        to {
            transform: translate(-99px)
        }
    }
    Ответ написан
    3 комментария
  • Как хранить массив внутри value каждой опции выпадающего списка selectize?

    @alexalexes
    Если переводить массив в JSON то там тоже будут кавычки и это возможно может сломать html.

    Если вы не самописной функцией создаете строку JSON, то в функции-энкодере json_encode уже есть механизмы экранирования, чтобы ваши данные не сбежали за пределы закодированного строкой значения в JSON. (речь идет пока об абстракции JSON, принятые меры экранирования для этого уровня экранирования html не касаются!)

    Каждой опции соответствует свой массив данных, которые я планирую записать в значение value в этой форме html.

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

    @alexalexes
    1. Сначала занулите свойство анимации. Потом вызовите setTimeout с нулевым временем, чтобы JS применил изменения анимации в DOM и внутри setTimeout добавьте свойство анимации. Тогда анимация перезапустится.
    nickinput.style.animation = "none";
      setTimeout(function() {
        if (validmail === false) {
            mailinput.style.animation = "blinker 0.6s linear 3";
        }
        }, 0);

    2. Задайте какой-нибудь color в ключевом кадре:
    @keyframes blinker {
      50% {
        background-color: #b11515;
        color: #aaa;
      }
    }
    Ответ написан
    3 комментария
  • CSS как сверстать вертикальное расположение? либо JS как правильно находить элемент в DOOM?

    @alexalexes
    Можно указывать нужный элемент с помощью псевдоселекторов:
    let life = lifesBlock.querySelector("span:first-child");

    или
    let life = lifesBlock.querySelector("span:last-child");
    Ответ написан
    Комментировать
  • Как сделать фото с камеры HTML js?

    @alexalexes
    Комментировать
  • Возможно ли сверстать таблицу с уникальной шириной колонок на каждой строке?

    @alexalexes
    Только если каждая строка - отдельная таблица с нулевым margin сверху и снизу. Еще придется повозиться с толщиной границ с использованием table:first-child, table:last-child, но это мелочи.
    Ответ написан
    Комментировать
  • Как записать данные с LocalStorage в таблицу?

    @alexalexes
    for(let i = 0;i < rows;i++){ // вы собираетесь сначала создать строку, а по кол-ву строк идут игроки, значит нужно брать число rows, а не cols
            let tr = document.createElement('tr');
      
          for(let j = 0;j < cols;j++){ // а тут cols, но тут еще нужна другая переменная для счетчика, i уже используется для индекса rows
            let td = document.createElement('td'); 
            if(j == 1) // мы ведь хотим добавить контент на вторую колонку (по индексу 1)?
            {
             td.innerHTML = localStorage.getItem(i + ""); // добавляем значение, "" - нужен, чтобы получить ключ по j в виде строки
            }
            tr.appendChild(td);
          }

    ЗЫ: Мне не нравится, что у вас некий массив очков вывален по индексам (которые 0-3) прямо в хранилище по ячейкам ключ-значение. Хорошо бы, чтобы этот массив лежал в одной ячейке хранилища под своим именем. Для этого этот массив нужно преобразовать в JSON и положить в отдельную именованную ячейку. И пользоваться значением этой ячейки нужно будет с кодированием и декорированием JSON строки.
    Ответ написан
    1 комментарий
  • Как расположить неизвестное количество блоков?

    @alexalexes
    Изучайте, как верстать контейнеры с display: flex или display: grid.
    Еще запишите пункт "CSS медиа запросы", чтобы отладить число колонок на разной ширине экрана.
    Ответ написан
    Комментировать
  • Как экранировать # в пути к файлу html?

    @alexalexes
    Так же как и кириллицу, и пробелы.
    # это %23
    Есть один нюанс, если вы кодируете полный путь к файлу, то нужно:
    1) строку url разбить на составляющие пути по разделителю слеш;
    2) каждую составляющую перекодировать функцией rawurlencode;
    3) собрать обратно путь.
    $in_str = 'files/test/Test! symbol # and % and & and (=-,.).pdf';
    $out_str = implode('/', array_map('rawurlencode', explode('/', $in_str)));
    file_put_contents('test_url.txt', $out_str);
    // test_url.txt
    // files/test/Test%21%20symbol%20%23%20and%20%25%20and%20%26%20and%20%28%3D-%2C.%29.pdf
    Ответ написан
    8 комментариев
  • Как сделать отправку формы в телеграмм бота но и чтобы форма делала запрос?

    @alexalexes
    document.getElementById('tg').addEventListener('submit',function(e){

    Вместо события submit подпишитесь на событие click не на тег формы, а на кнопку.
    На эту кнопку.
    <button type="submit">Отправить</button>
    У кнопки уберите тип submit - вы же не хотите дергать классическую отправку формы через submit.
    Все отправки делайте через axios (внутри этой библиотеки используется ajax - что вам и требуется, что и так используется).
    Ответ написан
  • Как убрать лишнюю букву в дате комментария?

    @alexalexes
    Значит не полностью убрали время.
    Точнее, прекращения вывода времени недостаточно, нужно еще исправить шаблон формирования даты (+ время), чтобы предлог не выводился вообще, или выводился при непустой составляющей времени (или когда оно не равно 00:00).
    Ответ написан
    Комментировать
  • Как правильно сделать иконку возле текста?

    @alexalexes
    Чтобы применить свойство text-decoration на названии пункта меню, но не применять на псевдо элементе, нужно название обернуть в span:
    <a href="#" class="menu__item menu__item--sport"><span>Зимний спорт</span></a>

    Чтобы псевдо-элемент after был вплотную к названию, он, как вариант, должен быть строчным элементом. То есть, нужно отменить для него абсолютное позиционирование. Также, его нужно изобразить символом, а не геометрическим прямоугольником:
    .menu__item
    {
      text-decoration: none;
    }
    .menu__item > span
    {
      text-decoration: underline;
    }
    .menu__item:after
    {
      position: unset;
      content: '▪';
      margin-left: 5px;
    }
    Ответ написан
    Комментировать
  • Если я поменяю наполнение сайта, как изменится ранжирование его в поисковых системах?

    @alexalexes
    Если не нарушите метатеги, заголовки страниц и разделов текста, используемые для поисковых ботов. То ничего не поменяется с их точки зрения.
    Ответ написан
    Комментировать
  • Как добавить блок в input?

    @alexalexes
    Либо вместо input использовать textarea высотой в одну строку, чтобы можно было добавить псевдоэлемент.
    Либо повесить обработчик события который перехватывает любой ввод символов в поле, извлекает число из строки, и дописывает символ. Но тут придется еще бороться с тем, чтобы курсор не съезжал в конец строки.
    Ответ написан
    Комментировать
  • Как раскодировать эту херабору ðîçûñê?

    @alexalexes
    В редакторе вместо режима просмотра документа win-1252 поставьте win-1251, без перекодирования содержимого.
    Ответ написан
    Комментировать
  • Передать значение в форме?

    @alexalexes
    <form action="/index.php" method="POST" >
      <input name='pers_delete' type='hidden' value="сюда подставляете значение переменной"/>  
      <input name='submit' type='submit' value="1" class='del_pers'/> 
    </form>

    <?php
       if (isset($_POST['submit']))
       {
         echo $_POST['pers_delete'];
       }
    ?>
    Ответ написан
    Комментировать
  • Правильно ли использовать position absolute & relative в верстках?

    @alexalexes
    Менять свойство position оправдано, если стоит задача в одном контейнере визуально наложить друг на друга дочерние блоки, которые в html не вложены друг в друга - по тексту иду один за другим.
    Например, у вас есть контейнер div.photo__container с img и блоком описания div.photo__descr:
    <div class="photo__container">
      <img src="photo.jpg"/>
      <div class="photo__descr">
        <p>Описание для фото</p>
      </div>
    </div>

    Если стили оставить как есть, то описание отобразится под изображением.
    Чтобы наложить описание на фото, нужно изменить позиционирование блока описания.
    Если мы тупо пропишем position: absolute для блока описания photo__descr, то этот блок убежит черт знает куда (точнее, спозиционируется относительно body, или ближайшего родителя, у которого будет position: relative).
    div.photo__descr
    {
      position: absolute;
    }

    Для этого нужно ограничить абсолютное позиционирование данного блока родительским блоком:
    div.photo__container
    {
      position: relative;
    }

    Далее, хотелось бы, чтобы блок приклеился к низу контейнера. Поскольку у нас блок в абсолютном позиционировании, то могут работать свойства top, right, bottom, left. Нужен bottom:
    div.photo__descr
    {
      position: absolute;
      bottom: 0;
    }

    Еще есть желание ограничить макс. высоту блока описания, можно воспользоваться процентами, причем они будут высчитываться от родительского блока position: relative:
    div.photo__descr
    {
      position: absolute;
      bottom: 0;
      max-height: 30%;
      overflow-y: auto; /* можно еще добавить возможность прокручивать содержимое при вертикальном переполнении */
    }

    Увы, чтобы работали процентные величины относительно родителя, нужно чтобы у родителя были заданы конкретные значения ширины и(или) высоты:
    div.photo__container
    {
      position: relative;
      height: 600px;
    }
    Ответ написан
    Комментировать
  • Работа с таблицами?

    @alexalexes
    К сожалению, геометрические свойства table по отношению к строкам и ячейкам слишком древние и не подчиняются подстройки через first-child, last-child. Можно только добавить внутренние отступы для ячеек последней строки. Но эти ячейки должны содержать какой-то контейнер, чтобы имитировать цвет фона ячейки.
    В этом случае, цвет фона не должен быть на самой строке или ячейке.
    .table tr:last-child td
    {
      padding: 5px 0;
    }
    Ответ написан
    Комментировать
  • Как лучше делать слоистую структуру в HTML+CSS?

    @alexalexes
    Примерно так:
    <div class="подложка">
      <div class="элемент-подложки" style="background-color: transparent; transform: translate(0, -30px)">
      </div>
    </div>

    Сам .элемент-подложки не будет двигаться. Будет смещаться только его графический образ.
    Ответ написан