Ответы пользователя по тегу HTML
  • Как добавить сумму полей только один раз при клике?

    @alexalexes
    numberStudentsPrice.innerHTML = +numberStudentsPrice.innerHTML + +numberStudentsPriceWeekend.innerHTML;

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

    @alexalexes
    Нужно менять механику смещения параметра в translate3d, чтобы смещение по вертикали анимировалось между (n/2) и (n/2) + 1 высотой списка (перелистывались соседние элементы центральной части списка). Когда анимация достигнет уровня (n/2) + 1, нужно сделать два одновременных действия: 1 - переставить последний элемент списка на первое место, 2 - вернуть уровень до отметки (n/2). Тогда будет достигнут эффект замкнутости и цикличности списка и анимация не будет откатываться назад.
    Ответ написан
    1 комментарий
  • Как правильно указать ссылку на путь?

    @alexalexes
    <a href="/index.html" class="dotted-link">Форма</a>

    А еще лучше настроить путь на индексную страницу на http-сервере, чтобы по адресу корня / перенаправляло на index.html.
    На apache это настраивается в корневом файле htaccess:
    DirectoryIndex index.html
    тогда в ссылках достаточно ссылаться на корень:
    <a href="/" class="dotted-link">Форма</a>
    Ответ написан
    4 комментария
  • Как сделать слайдер со сменяющимся текстом внутри?

    @alexalexes
    Учить основы CSS - с чем едят свойство position.
    В данном случае для вас неожиданностью является поведение свойства position: absolute; у контейнера .header__slider-text.
    Чтобы абсолютное позиционирование было относительно слайда, дайте контейнеру слайда .header__slider-item свойство position: relative;
    Ответ написан
  • Обтекание блочного элемента: как реализовать?

    @alexalexes
    Если отсутствие поддержки Internet Explorer не пугает, то можете воспользоваться свойством shape-outside.
    htmlbook.ru/blog/vvedenie-v-css-shapes
    https://developer.mozilla.org/en-US/docs/Web/CSS/s...
    Ответ написан
    4 комментария
  • Закругление для фото HTML?

    @alexalexes
    Гуглите border-radius.
    1. border-radius делаете >= 50% и у вас получается круг.
    2. Закругление можно делать по отдельным сторонам блока.
    Ответ написан
    Комментировать
  • Как сделать валидацию на нескольких инпутах, и не зависимые от модально окна?

    @alexalexes
    Чешите валидацию не по всему документу, а по форме.
    Параметр формы у вас передается внутрь функции.
    Было:
    let formReq = document.querySelectorAll('._req');
    Должно:
    let formReq = form.querySelectorAll('._req');
    Ответ написан
    1 комментарий
  • Как в HTML без CSS сделать тултип с картинкой?

    @alexalexes
    А что вам мешает css инлайн стилем добавить? Можно даже картинку в base64 перевести и туда же интегрировать, чтобы не обращаться ни к каким сторонним ресурсам.
    Ответ написан
  • Как правильно верстать используя bootstrap?

    @alexalexes
    При использовании bootstrap вы не можете мыслить фиксированными шириной.
    У вас есть 12 колонок - 12 долей единиц ширины экрана, и есть с полдюжины разных размеров экранов.
    Самый маленький, малый, средний, большой и очень большой.
    И логика расстановки классов такая:
    "На большом экране и больше у меня слайдер будет шириной 6 из 12 колонок,
    на среднем 8 из 12 колонок,
    от малого и меньше 12 из 12 колонок".
    С этой логикой и навешиваете нужный набор классов на контейнер слайдера.
    JS код не должен фиксировать размер контейнера в пикселях, нужно ему позволить расширяться по bootstrap сетке.
    Ответ написан
    Комментировать
  • Как сделать что бы при нваедении иконки не прыгали?

    @alexalexes
    .header-dropdown-item {
    ...
      height: 4rem;
    ...

    .header-dropdown-item:hover {
    ...
      height: fit-content;
    ...

    Эти значения высот в вычисленном состоянии имеют разный результат в пиксельном выражении?
    Как вы думаете?
    Ответ написан
    Комментировать
  • Как сделать табы с выводом из бд?

    @alexalexes
    Выводить также как из любого другого источника данных.
    1. Подготовьте источник данных.
    - Разверните службу СУБД в операционной системе сервера.
    - Выберите менеджер, чем вам будет удобно просматривать объекты СУБД.
    - Установите менеджер СУБД.
    - При помощи менеджера СУБД заведите пользователя базы данных, схему базы данных, структуру таблиц и связей, вставьте необходимые данные.
    2. Изучите способы подключения к источнику данных и взаимодействия из PHP (как делать коннект к СУБД, как подготавливать запросы и параметры к ним, как фетчить результат выборки запроса).
    3. Подключитесь к базе, выполните запрос, встройте выборку результата в ваш шаблон HTML (табы).
    Ответ написан
    3 комментария
  • Как сделать, чтобы высота 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 медиа запросы", чтобы отладить число колонок на разной ширине экрана.
    Ответ написан
    Комментировать