Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Скрипт быстрого выбора для элемента SELECT

22.09.2017 | Категория: Web-мастеру и не только | Автор: ManHunter
Небольшой вспомогательный скрипт на JavaScript, который облегчает работу с выпадающими списками. Суть его в том, что рядом с элементом select создается текстовое поле. При вводе фрагмента строки в это поле, выпадающий список автоматически устанавливается на строку, в которой этот фрагмент найден. Это заметно упрощает работу с формами, где есть длинные выпадающие списки. Форма остается прежней, никаких кастомных модификаций не требуется:
  1. <div>
  2.     <select>
  3.         <option value="">---</option>
  4.         <option value="1">Yellow Banana</option>
  5.         <option value="2">Red Apple</option>
  6.         <option value="3">Green Leaf</option>
  7.         <option value="4">Some strange</option>
  8.     </select>
  9.  
  10.     <input type="text" onkeyup="selecthelper(event);">
  11. </div>
Важно, чтобы вспомогательное поле ввода находилось после выпадающего списка, но обязательно на одном уровне иерархии с ним в DOM-структуре. Вы можете, в случае необходимости, доработать скрипт-обработчик под ваши нужды. Верстка остается валидная, количество выпадающих списков и полей ввода в форме может быть любым.

Читать статью целиком »
Просмотров: 385 | Комментариев: 3

Как отследить потерю фокуса вкладки в браузере

23.04.2017 | Категория: Web-мастеру и не только | Автор: ManHunter

Как отследить потерю фокуса вкладки в браузере

В современных браузерах есть очень полезный инструмент - Page Visibility API. Он позволяет узнать, когда вкладка с веб-страницей видна пользователю, а когда пользователь находится на другой странице. Через Page Visibility API можно установить обработчик для реагирования на изменение состояния видимости. Для чего это надо? Например, если сайт открыт на мобильных устройствах, то при переходе на другую вкладку есть смысл отключить ненужные сетевые запросы, всякие спецэффекты, динамическое обновление контента и прочие ресурсоемкие операции. В веб-приложениях, например, можно сделать автоматическое сохранение незаполненной формы при переходе на другую вкладку. На моем сайте при потере фокуса вкладки активируется опция "камуфляж".

Читать статью целиком »
Просмотров: 688 | Комментариев: 0

Placeholder для изображений на JavaScript

12.11.2016 | Категория: Web-мастеру и не только | Автор: ManHunter

Placeholder для изображений на JavaScript

При разработке сайтов одна из главных задач - правильное размещение контента, в том числе и изображений. Но часто случается ситуация, когда заказчик еще не предоставил материал, а что-то показать ему уже надо. В таких случаях используют "рыбы", или, если по-английски, "placeholder". Для текстового контента это классический "Lorem ipsum..." или какие-нибудь программные генераторы. Для графического контента есть различные онлайновые сервисы, которые предоставляют картинки-placeholder'ы (про них будет отдельная статья). А я решил сделать динамический генератор картинок-пустышек на JavaScript.

Читать статью целиком »
Просмотров: 790 | Комментариев: 0

Обработка двойного тапа с задержкой на JavaScript

10.07.2016 | Категория: Web-мастеру и не только | Автор: ManHunter

Обработка двойного тапа с задержкой на JavaScript

Обычно для обработки двойного клика на каком-нибудь элементе HTML-страницы используется событие ondblclick. Но у ondblclick есть большой недостаток: при задании обработчика нельзя устанавливать произвольный интервал между первым кликом (тапом на экране мобильного устройства) и последующим кликом. Кроме того, я встречал в интернетах информацию, что на некоторых мобильных устройствах событие ondblclick передается как два последовательных события одиночного нажатия onclick.

Читать статью целиком »
Просмотров: 752 | Комментариев: 0

Таблица с фиксированной шапкой на JavaScript

14.04.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
В одном из рабочих проектов появилась необходимость выводить достаточно длинную таблицу с большим количеством однотипных колонок. При вертикальной прокрутке заголовок таблицы уезжает, и уже на втором скролле становится очень сложно сориентироваться, какая из колонок к чему относится. Проблема решается с помощью создания фиксированной шапки у таблицы, которая всегда будет отображаться, пока "родной" заголовок таблицы находится за пределами видимой области страницы.

Начнем с верстки. Для корректной работы скрипта нужно выполнение всего несколько требований. Таблица, у которой будет фиксироваться заголовок, обязательно должна иметь атрибут id и фиксированную ширину. Шапка таблицы должна быть обрамлена тегом thead. Например:
  1. <table id="my_table" style="width:980px;" rules="all">
  2. <thead>
  3. <tr>
  4.     <th style="width:20px;">N</th>
  5.     <th style="background: #BABABA;">Наименование</th>
  6.     <th>Описание</th>
  7.     <th style="width:60px;">Цена</th>
  8.     <th style="width:60px;">Количество</th>
  9.     <th style="width:60px;">Сумма</th>
  10. </tr>
  11. </thead>
  12.  
  13. <tr>
  14.     <td>1</td>
  15.     <td>Предмет 1</td>
  16.     <td>Описание 1</td>
  17.     <td>26</td>
  18.     <td>97</td>
  19.     <td>2522</td>
  20. </tr>
  21.  
  22. ... остальное содержимое таблицы
  23.  
  24. </table>
Обычно при верстке HTML я никогда не использую thead, но тут этот элемент необходим, чтобы обозначить границы и содержимое шапки таблицы. Дополнительных обрамляющих элементов для таблицы не требуется.

Читать статью целиком »
Просмотров: 3447 | Комментариев: 8

prev 01 02 03 04 05 06 07 08 09 10 11 next
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 3 (0.0209 сек.) / Память: 4.5 Mb
Наверх