Ответы пользователя по тегу HTML
  • Как экранировать # в пути к файлу 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>

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

    @alexalexes
    Взять самый большой блок страницы и масштабировать через transform:
    document.body.style.transform = 'scale(' + ваше_значение + ')';

    Но это никакое отношение к тому свойству масштаба в меню браузера не имеет. Это только мнимая магия CSS преобразований.
    PS: А вообще, как-то не очень дублировать то, что есть в браузере из коробки. Времена, когда каждый второй рисовал циферблат часов времени пользователя на страничке уже давно прошли.
    Ответ написан
  • Как изменить input type="hidden" на "text" в Chrome?

    @alexalexes
    По идее, самым пробивным способом со времен ie6, чтобы что-то заменить в атрибуте тега было использование setAttribute:
    inputs[i].setAttribute('type', 'text');
    Ответ написан
    7 комментариев
  • Как в css удлинить видимое поле в select?

    @alexalexes
    Нельзя. Многие свойства активного элемента выпадающего списка относятся к дизайну браузера.
    От браузера к браузеру этот элемент будет выглядеть по другому, иногда совсем по другому.
    Например, на десктопном браузере вы видите select как выпадающий список. А вот в мобилках он будет уже выглядеть как модальное окно с радио кнопками - в этом случае ни о какой частичной высоте речи идти не будет.
    Ответ написан
    Комментировать
  • Как сделать полупрозрачное видео?

    @alexalexes
    Если используете тег video для вывода видео, то попробуйте дать ему свойство радиального градиента.
    background: radial-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1)); /* второй параметр цвета нужно подобрать близкий к фоновому */

    PS:
    1. Может не сработать на фрейме видео.
    2. Может не подойти вид градиента. Этих видов в css3 не так много.
    Ответ написан
    Комментировать
  • Как сбросить только 1 input file?

    @alexalexes
    Можно использовать css превдокласс nth-child, чтобы выловить нужный элемент с одинаковым классом в пределах одного контейнера.
    $('.image-upload:nth-child(' + номер_интупа_начиная_с_единицы + ')').val('');

    Можно воспользоваться возможностями jquery:
    $('.image-upload')[номер_интупа_начиная_с_нуля].val('');

    А вообще, тут напрашивается сделать шаблон в VueJS, чтобы обеспечить привязку элементов DOM-дерева и бизнес-логики скрипта. Чтобы не высчитывать на каждое событие, а для какого i-ого элемента оно предназначено. Но это уже совсем другая история.
    Ответ написан
    Комментировать
  • Как удалить # из url, чтобы не мешал обновлению страницы?

    @alexalexes
    Добавьте "return false" чтобы предотвратить действие по умолчанию при клике на ссылку - переход по ссылке.
    onclick="window.location.reload(); return false;"
    Ответ написан
  • Как добавить один html файл в другой с помощью {{> }}?

    @alexalexes
    Перемотать видеоролик на начало или посмотреть предыдущий видеоролик и обратить внимание на инструментарий мужика. Что он использует еще помимо классики - CSS/HTML/JS.
    Ответ написан
    Комментировать
  • Как сделать такую штуку в HTML?

    @alexalexes
    Можно честно спиратить из vk.com плашку "Новые сообщения".
    <h4 class="im-page--history-new-bar _im_unread_bar_row">
    :before
    <span>Новые сообщения</span>
    :after
    </h4>
    Ответ написан
    Комментировать
  • Как сверстать блок, чтобы дочерние элементы переносились на новую строку с учетом фиксированной кнопки в углу?

    @alexalexes
    Как упомянуто в соседнем ответе, будет очень костыльно и чисто для спортивного интереса.
    К тому же, есть ограничение на фиксированный размер элемента, которое вам не нужно.
    <style>
        div.container
        {
          display: flex;
          flex-wrap: wrap;
          width: 770px;
          height: 90px;
          background-color: green;
          overflow: hidden;
        }
        div.container > div
        {
          width: 60px;
          height: 25px;
          background-color: #df1245;
          text-align: center;
          margin: 5px;
          padding: 5px 0;
        }
        div.container > div:nth-child(n + 22) /*этим селекторам задаем свойство сортировки элементам, которые идут после кнопки "показать еще" если контейнер будет адаптивным, придется прописывать кучу вариантов nth-child */
        {
          order: 2;
        }
        div.container > label.more
        {
          display: block;
          width: 130px;
          height: 25px;
          margin: 5px;
          padding: 5px 0;
          text-align: center;
          order: 1; /* У кнопки стоит такой индекс сортировки чтобы оказаться между видимыми и невидимыми элементами */
          background-color: #78d412;
        }
        div.container label.more span.less
        {
          display: none;
        }
        #show-more-state
        {
          display: none;
        }
        #show-more-state:checked ~ div.container
        {
          height: auto;
        }
        #show-more-state:checked ~ div.container label.more
        {
          order: 3;
          margin-left: auto;
        }
        #show-more-state:checked ~ div.container label.more span.more
        {
          display: none;
        }
        #show-more-state:checked ~ div.container label.more span.less
        {
          display: initial;
        }
      </style>
      <input id="show-more-state" type="checkbox"/> <!-- Этим чекбоксом запонимаем состояние кнопки, чтобы можно было оттолкнуться стилями от превдокласса :checked -->
      <div class="container">
        <label class="more" for="show-more-state"><span class="more">ПОКАЗАТЬ ЕЩЕ</span><span class="less">СВЕРНУТЬ</span></label>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
        <div>ITEM</div>
      </div>
    Ответ написан