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

    @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 комментарий
  • Как вывести и одновременно передать значение value в форме HTML?

    @alexalexes
    Кнопку оставляете в покое, значение передаете скрытым полем.
    <form action="?action=select_pay" method="POST">
    <input type="hidden"  name="pay_mode" value="20"  />
    <input type="submit" class="superbutton"  value="Яндекс Деньги"  />
    </form>
    <form action="?action=select_pay" method="POST">
    <input type="hidden"  name="pay_mode" value="10"  />
    <input type="submit" class="superbutton"  value="Еще одна платежка"  />
    </form>
    Ответ написан
  • Как безопасно загрузить изображение на сервер?

    @alexalexes
    На стороне PHP пропустить полученный файл через GD библиотеку.
    При необходимости, уменьшить качество выходного файла, и попутно сгенерировать preview, отправив его обратно клиентку (+ подтвердив получение сервером).
    Учтите, придется увеличить доступный объем оперативной памяти для одного процесса PHP.
    На моем опыте, чтобы GD проглотила 16 Мпикс картинку, нужно 128 Мб ОЗУ.
    Перед скармливаем GD взвешиваем картинку с помощью getimagesize().
    Если это не сделать, и с превышением лимита отдать на обработку библиотеке, то скрипт тихо-мирно заглохнет, не сообщив клиенту ничего, а так можно сгенерировать сообщение, что файл большой.
    Ответ написан
  • Как сделать, чтобы все нечекнутые и чекнутые чекбоксы отправлялись на бэк?

    @alexalexes
    Сталкивался с такой особенностью, решал как раз через дополнительное поле hidden:
    <label>
    <input type="hidden" id="field_0_1" name ="param_list[0][field_1]" value="off"/>
    <input type="checkbox" onchange="set_hidden_checkbox(this, 'field_0_1')"/>
    </label>

    function set_hidden_checkbox(target, id)
    {
      var hidden = document.getElementById(id);
      if(hidden !== undefined)
         hidden.value = target.checked ? 'on' : 'off';
    }

    Атрибут value в hidden нужно инициализировать значением по умолчанию.
    Ответ написан
    Комментировать
  • Как сделать кроссбраузерное оформление для Select?

    @alexalexes
    select-ы, чекбоксы, полосы прокрутки - это самые некастомизируемые элементы веб интерфейса.
    В качестве альтернативы используют JQuery ui виджеты.
    Ответ написан
    Комментировать
  • Как прочитать текст между тегами HTML на Node.js( cheerio)?

    @alexalexes
    Это текст не между тегами, это содержимое самого тега.
    links.eq(i).html() - не оно ли?

    Задаете вопросы, ответы на которые есть в документации.
    Ответ написан
    3 комментария