Метка: html5

  • Php. DOMDocument. Ошибки при загрузке html5-тегов.

    При загрузке контента при помощи loadHTML в объект DOMDocument Вы, скорее всего получите ошибку разбора данных. О том, как решить проблему — в этой статье. Наиболее простой и безкостыльный, как по мне способ — в примере ниже: $dom = new DOMDocument; libxml_use_internal_errors(true); $dom->loadHTML(‘…’); libxml_clear_errors(); Он позволяет безошибочно загрузить контент с html5-тегами и продолжить работу с […]

  • JavaScript. Как программно переключить вкладку (tab)?

    Сегодня появилась необходимость программного переключения вкладок на bootstrap tabs. Решение очевидное — но сразу пошел не верным путём — поэтому сейчас раскажу, как быстро и правильно переключить bootstrap вкладку. На самом деле — все сверх-просто, причем, конечно же, есть в Документации. Но, тем не менее — не будет лишним еще раз указать исковые методы. Итак: […]

  • Css. Подсветка четных и нечетных строк.

    Табличный вывод очень плохо визуально читается если не выделять четные и нечетные строки какой-то особенностью — например, легким оттенком фонового цвета. Как при помощи css реализовать подсветку четных и нечетных строк таблицы я покажу в этой короткой статье. Итак, все, что нам нужно — это понимание селектора nth-child. Пример стилей, прописанных в моем блоге для […]

  • Yii2. Поле number в ActiveForm.

    Yii2, конечно же, поддерживает элементы форм с html5 — но, в случае с, например, полем типа number, не совсем интуитивно понятно. Рассмотрим, как добавить поле number в форму ActiveForm. Делается это, на самом деле, просто: Все, что требуется — добавить вызов textInput и в передаваемом массиве параметров указать ‘type’ => ‘number’. Все просто. Удачи!

  • Bootstrap. Как добавить иконку к кнопке?

    Немного, казалось бы, очевидный вопрос, — но, как оказалось, часто встречаемый в интернете. Посмотрим, как мы можем вставить иконку в кнопку на bootstrap. Для начала приведу линк на перечень доступных икoнок. Что касается самого кода — то он также очень прост: Sign in Здесь мы видим обычный button с bootstrap-классами btn btn-primary, внутри которого размещена […]

  • Этот Input type number реагирует только на стрелки.

    Устанавливая для input[type=number] значения min, max и step иногда можно забыть, что это по-пержнему всего-навсего инпут, в который можно ввести любою информацию с клавиатуры. Варианов решения много и применять каждый из них следует в зависмости от поставленных задач, но я приведу, наверное, самый простой из них. Итак: В данном примере мы просто добавили js-обработчик нажатия […]

  • Yii2. Как добавить поле number?

    Работа с ActifeFields существенно облегчает жизнь, но бывают моменты, которые интуитивно не понятны — например, как добавить в форму поле типа number. На самом деле сделать это очень просто — ниже приведен пример решения проблемы: Этот же код подойдет для всех типов html5-инпутов.

  • Как изменять высоту textarea в зависимости от количества строк?

    Люблю отзывчивые дизайны, люблю, когда все продумано до мелочей и сейчас речь пойдет именно о таком jqeury-плагине. Он позволяет изменять высоту textarea в зависимости от количества введенного текста, при этом не создает дубликатов и скрытых полей, которые замедляют работу страницы. Все очень просто и удобно. Не буду приводить много примеров — приведу две ссылки, на […]

  • Html. Css. Как указать свой файл курсора?

    Изменение курсора, в последнее время, редкая практика, но, тем не менее, следует знать о такой возможности. Все, на самом деле, очень просто: cursor: url(images/cursor.cur); cursor: url(images/cursor.png) x y, auto; Все просто — кто хоть немного знаком с CSS — все поймет без проблем. Ну а посмотреть список доступных базовых шаблонов можно здесь.

  • Html5. Как убрать стрелочки с input[type=number]

    Стандартные стрелочки с текстового поля с типом number выглядят убого и мало когда подходят по своему внешнему виду. Ввиду этого хочу поделиться примером стилей, которые позволяют избавиться от ненужных визуальных контролов, при этом сохранив базовый функционал. input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=’number’] { -moz-appearance: textfield; } Этот простой сниппет позволит получить желаемый результат, выполнив […]