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

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

    @alexalexes
    Оборачиваете блок в ссылку.
    <a href="какая-то_ссылка">
    <div class="block__element">
        <img src="<?= SITE_TEMPLATE_PATH; ?>/assets/pictures/image.jpg" alt="" class="block__bg">
        <div class="block__title">
             <span class="block__title-name">Жилищная инициатива</span>
             <p>ул. Попова №150</p>
        </div>
    </div>
    </a>

    или так
    <div class="block__element">
        <a href="какая-то_ссылка">
        <img src="<?= SITE_TEMPLATE_PATH; ?>/assets/pictures/image.jpg" alt="" class="block__bg">
        <div class="block__title">
             <span class="block__title-name">Жилищная инициатива</span>
             <p>ул. Попова №150</p>
        </div>
        </a>
    </div>

    Для тега A обязательным является только атрибут href - его-то роботы и будут анализировать, как точку перехода на другую страницу.
    Еще одно применение тега A - якорь на странице.
    Вы пытались изобразить именно это применение, но делается якорь при помощи атрибута name, а не href.
    <div class="block__element">
        <a name="какой-то_якорь"></a>
        <img src="<?= SITE_TEMPLATE_PATH; ?>/assets/pictures/image.jpg" alt="" class="block__bg">
        <div class="block__title">
             <span class="block__title-name">Жилищная инициатива</span>
             <p>ул. Попова №150</p>
        </div>
    </div>

    Чтобы страница прокрутилась именно до этого якоря при переходе на нее, нужно воспользоваться ссылкой вида "адрес_страницы#какой-то_якорь".
    Ответ написан
  • Почему на MacOS криво работает кнопка наверх?

    @alexalexes
    У вас очень тяжелый файл www.annalev.ru/static/bundle/js/bundle.min.js, в котором лежит функция скроллинга, пока он не загрузиться на клиенте полностью, скроллинг не будет работать.
    Решить проблему можно несколькими путями:
    1) Все легковесные функции, которые не зависят от библиотек поместить в отдельный файл, который будет подключаться выше списком, чем тяжеловесные js.
    2) Написать код легковестных функций прямо в документе (или в общем шаблоне страниц, где описывается head или footer, в случае если у вас CMS);
    3) Написать обработчик скроллинга непосредственно в атрибуте onclick.
    PS: Дополнительно, посмотреть, какой функционал можно "выбросить" в подключенных библиотеках.
    Например, на JQuery можно опционально отключать некоторые возможности и скачивать js-файл значительно меньших размеров, чем в полной комплектации.
    Ответ написан
    4 комментария
  • Можно ли задать соотношение сторон изображения?

    @alexalexes
    У меня самый колхозный вариант был: создать png картинку с прозрачным цветом с нужным соотношением сторон (и самых гигантских размеров, каким может быть монитор) и поместить ее в виде img в контейнер на самом глубоком z-значении.
    Пропорции контейнера выравнивались по содержимому и одновременно он мог быть любых не фиксированных стилем размеров.
    Ответ написан
    Комментировать
  • Как избавиться от бага на IOS?

    @alexalexes
    Скорее всего нужен svg формат для гарнитуры шрифта.
    PS: по стопам вопроса Как подключить шрифт для iOS?
    Ответ написан
  • Как называется данная адаптация?

    @alexalexes
    font-size тоже проценты принимает, но вы ужаснетесь, как он будет тупо все масштабировать.
    Вам все-равно придется корректировать частные случаи медиазапросами.
    Ответ написан
    Комментировать
  • Зашифрованный адрес картинки в браузере?

    @alexalexes
    data:image/png;base64

    Это не адрес, это ресурс самой картинки в формате base64.
    Если вы пытаетесь найти гипотетические файлы каптчи, то будьте уверены, что их нет на ftp, картинки генерируются налету.

    Где этот адрес найти в ручную?

    Там, где вызывается модуль генерации каптчи, оттуда отдается картинка браузеру.
    Ответ написан
  • Как заставить крайние правые пункты меню трансформироваться в выпадающий блок при ресайзе окна?

    @alexalexes
    Если чисто в теории, то как обычно - JS. Подписываем на событие resize документа функцию, которая будет отслеживать размер контейнера меню и пересчитывать суммарную длину блоков пунктов меню вместе с отступами и прятать/выносить их в/из особого контейнера в конце списка, либо прятать этот контейнер, если все пункты вмещаются в меню.
    Ответ написан
  • Отправка данных в функцию?

    @alexalexes
    В обработчике addItem(id) пробежаться по DOM через дескриптор события event до img и h2, содержащийся в article.
    var article = e.target.parentNode.parentNode;
    var src = article.getElementsByTagName('img')[0].getAttribute('src');
    var title = article.getElementsByTagName('h2')[0].innerHTML;

    Только если собрались тащить эти параметры в список корзины, то оно нафиг не сдалось. Получайте заново параметры выбранного товара по его id. Выцарапывать свойства из уже отображенной формы представления - это костылизация.
    Ответ написан
    1 комментарий
  • Как вставить формулу в таблицу?

    @alexalexes
    Вот, собственно, решение:
    <input type="button" onclick="calc_table_add_row()" value="Добавить"/>
    <div id="calc_table" class="table"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
          // функция для добавления вычисляемой строки
          function calc_table_add_row()
          {
            //Элементы input подписаны на события onkeypress и onblur, что позволяет делать пересчет как при непосредственном изменении значения, так и во время потери фокуса
            $('#calc_table').append(
            '<div class="tr">\
               <div class="td">' + ($('#calc_table>div.tr').length + 1 /* это нумератор строки, добавляется номер от существующего кол-ва строк */) + '</div>\
               <div class="td">\
                 <input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
               <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
               <div class="td"><input type="text" onkeypress="calc_table_recalc_row(event)" onblur="calc_table_recalc_row(event)"/></div>\
               <div class="td"></div>\
               <div class="td"></div>\
             </div>'
            ); 
          }
          // функция-обработчик пересчета значений в строке
          function calc_table_recalc_row(e)
          {
            var cur_input = e.target; // на этом элементе произошло событие (input)
            var cur_td = cur_input.parentNode; // получаем родительский элемент (div.td, в котором нажодится затронутый input)
            var cur_tr = cur_td.parentNode; // получаем родительский элемент (div.tr, в котором нажодится div.td с затронутым input)
            var td_divs = $(cur_tr).find('div.td'); // находим все элементы div.td на данной строке
            try // если возникнет какая-то ошибка, то тихо прекратим вычисления
            {
              var input1 = parseFloat($(td_divs[1]).find('input')[0].value); // получаем значение ячейки 2
              var input2 = parseFloat($(td_divs[2]).find('input')[0].value); // получаем значение ячейки 3
              var input3 = parseFloat($(td_divs[3]).find('input')[0].value); // получаем значение ячейки 4
              if(!isNaN(input1) && !isNaN(input2) && !isNaN(input3)) // все ли значения получились числами вещественными ?
              {
                var result4 = input3 / input2; // считаем результат для ячейки 5
                $(td_divs[4]).html( (result4).toFixed(2) ); // записываем результат в ячейку 5 с округлением до 2 знаков
                $(td_divs[5]).html( (result4 * (input1.toFixed(2) == 10.00 ? 0.1 : 5)).toFixed(2) ); // считаем и записываем результат в ячейку 6 с округлением до 2 знаков
              }
            }
            catch(ex)
            {
            }
          }
    </script>
    Ответ написан
    Комментировать
  • Как остановить выполнение setTimeout на 2 шаге?

    @alexalexes
    Можно.
    function highlightcurrent(items, index) 
    {
      if(index != 2) // выходим из функции, если достигли определенного индекса
      {
        items.removeClass("highlightcurrent");
        items.eq(index).addClass('highlight');  
        items.eq(index).addClass('highlightcurrent');   
        setTimeout(function()
        {
          highlightcurrent(items, index + 1)
        }, 1000);
      }
    }
    
    highlightcurrent($('.progress-page-tabs-col'), 0);
    Ответ написан
    3 комментария
  • Как получить id компонента(html) c помощью php?

    @alexalexes
    чтобы записать в базу данных данные мне нужен id

    Насчет записать в БД, нужно понимать две различные ситуации:
    а) вставка записи;
    б) обновление записи.
    Для вставки id передавать и знать не нужно, ключик сам должен генерироваться автоинкрементом или соответствующим триггером на insert.
    Для обновления записи, естественно, нужно передавать какой-нибудь идентификатор или уникальную метку, чтобы однозначно можно было провести update с параметром. В примитивнейшем случае в качестве такой метки будет выступать идентификатор. Его можно передавать скрытым полем и этого будет достаточно.
    <form action="" method="POST">
    <input type="hidden" name="id" value="5"/>
    <input type="sabmit" value="Отправить"/>
    </form>

    На стороне сервера имя и значение поля также отыскивается во входящих массивах, как и другие вводимые поля:
    $id = $_POST['id']; // каким методом отправили форму, таким и принимаем на сервере - все просто.
    Ответ написан
    Комментировать
  • Почему в Firefox не подгружаются изображение пока не нажмешь F12?

    @alexalexes
    У вас на странице куча миниатюр на 2500x2500 по ~1Мб каждая.
    Идет гонка, кто быстрей загрузится: скрипты или картинки.
    Скрипты находятся в конце, и они последние начинают загрузку.
    Такое расположение скриптов рекомендуют разработчики Google.
    Еще они рекомендуют делать упрощенный функционал сайта, пока скрипты не вступили в свою силу после того, тогда как загрузятся.
    Что требуется этому сайту:
    1) Создать и наладить отображение упрощенного стиля;
    2) Найти баланс в размере миниатюр.
    Ответ написан
  • Что быстрее градиент или изображение?

    @alexalexes
    Это не вопрос быстродействия, а вопрос адаптации под различные браузеры.
    Если бы все браузеры могли обрабатывать свойство градиент, никто бы не заморачивался с картинками. Особенно, было актуально во времена WinXP с IE7 / IE8.
    Ответ написан
    Комментировать
  • Нужно создать кнопку, и когда кто-то нажимает, я хочу отобразить метку со ссылкой. Как это можно сделать?

    @alexalexes
    Управляйте видимостью вашей ссылки по событию кнопки onclick.
    Какие тут проблемы могут возникнуть-то у вас?
    <a id="my_link" href="https://vk.com/durov" target="_blank" style="display: none;">
      <img src="img/57d3d0a9e386c157136717cc.png" width="30px"/>
    </a> 
    <input type = "button" onclick = "document.getElementById('my_link').style.display = 'inline';" value = "связаться со мной" />
    Ответ написан
    Комментировать
  • Почему onclick срабатывает не на том div?

    @alexalexes
    Потому что к элементу, на котором произошло событие, нужно выходить через e.target, то есть использовать дескриптор события e.
    pole.onclick = function(e)
      {
          if(e.target.getAttribute('class') != 'pole-blue')
          {
              e.target.setAttribute('class', 'pole-blue');
          }
      }

    Еще момент, переменная через var должна быть объявлена один раз, переопределять через var нельзя.
    var pole = null;
    for(var i = 0;i<10;i++)
    {
      pole = document.createElement('div');
    Ответ написан
    1 комментарий