Onfor

Рубрика: html

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

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

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

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

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

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

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

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

  • Html5. CSS3. Полный перечень доступных курсоров.

    CSS3, как я недавно узнал, существенно уразнообразил список доступных курсоров, что не может не радовать. В этой статье приведу полный список доступных для использования курсоров. Итак, наводите мышкой на абзацы ниже и смотрите результат: Старые стили с CSS2: cursor: auto cursor: inherit cursor: crosshair cursor: default cursor: help cursor: move cursor: pointer cursor: progress cursor:…

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

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

  • jQuery. Как преобразовать текст в html-разметку?

    Иногда html-разметка передается простым сплошным текстом, при этом также часта задача по изменению структуры этой разметки. В таком случае следует преобразовать текст в DOM-разметку. На самом деле эта задача решается невероятно просто. Для этого есть функция parseHTML. var str = «hello, my name is jQuery.» ; html = $.parseHTML( str ) ; html.find(‘b’).remove(); alert( html.text()…

  • Css. Как сделать стрелку?

    Применение различных CSS-селекторов и свойств помогает избежать использования графики, что существенно облегчает вес страницы и ускоряет ее загрузку. Думал описать теоретическую составляющую этого процесса, но решил скинуть линк на ресурс, которым я всегда пользуюсь. Это http://www.cssarrowplease.com/. Ресурс позволяет указать основные параметры и получить готовый для вставки css-код. Понять его более чем легко, если просто поиграть…

  • Html. Javascript. Как асинхронно подключить скрипты?

    Подключение внешних скриптов на сайте — всегда узкое место. Это связано с тем, что страница отображается по мере загрузки скриптов. Это очень плохо при загрузке удаленных скриптов, при /загрузке тяжеловесных скриптов и т.д. Частично помогает известный метод переноса скриптов в конец страницы — но это также не 100% выход. Т.к. скрипты все равно будут подгружаться…

  • OpenLayers 2. Начало работы.

    Приведу простой алгоритм действий по созданию страницы с картой и выеденным на нее базовым WMS-слоем, основываясь на библиотеке OpenLayers 2. Итак, по пунктам. 1. Создаем html-разметку: OpenLayers Example 2. Создаем объект map. var map = new OpenLayers.Map(‘map’); 3. Создаем WMS-слой. var wms = new OpenLayers.Layer.WMS( «OpenLayers WMS», «http://vmap0.tiles.osgeo.org/wms/vmap0», {‘layers’:’basic’} ); map.addLayer(wms); 4 Объединяем все вместе.…