Blog. Just Blog

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

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

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

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

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

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

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

Аккордеон на CSS3

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

Аккордеон на CSS3

Так называемый аккордеон, или вариант раскрывающегося горизонтального или вертикального меню, очень популярный элемент при оформлении сайтов. Существует огромное количество вариантов реализации, с использованием скриптов, стилей и разных HTML-элементов в качестве управляющих конструкций. Представляю вам мой вариант аккордеона на чистом CSS3, но не удивлюсь, если такой вариант уже где-то был.

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

Таблица с фиксированной шапкой на 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, но тут этот элемент необходим, чтобы обозначить границы и содержимое шапки таблицы. Дополнительных обрамляющих элементов для таблицы не требуется.

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

Рейтинг на CSS и JavaScript

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

Рейтинг на CSS и JavaScript

Один из ставших привычным элементов web-страниц - рейтинг. Это может быть средняя пользовательская оценка какой-нибудь статьи, популярность товара или что-нибудь подобное. Обычно рейтинг представляет собой полоску с пятью или десятью звездочками, часть из которых серая, а часть, соответствующая значению рейтинга, - золотистая. Сегодня я расскажу, как сделать отображение такого рейтинга и как он может взаимодействовать с пользователем.

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

Предзагрузка изображений с помощью CSS

01.02.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
При размещении на web-странице "тяжелых" изображений, которые в дальнейшем должны будут без задержек сразу открываться, часто используют технологию предзагрузки. Она заключается в том, что изображение открывается браузером в фоновом режиме, но не отображается сразу, а только кэшируется. Затем, при обращении к изображению, оно извлекается из локального кэша и мгновенно отображается, так как не требуется повторной загрузки данных из сети. Обычно прелоадеры изображений делают на JavaScript и вешают на событие onload или на DOMContentLoaded, или же просто размещают скрипт в начале страницы. Сам скрипт сводится к созданию нужного количества объектов Image и назначению им свойства src со ссылками на предзагружаемые изображение. Что-то наподобие такого:
  1. var img1=new Image();
  2. img1.src='/images/slider_image.jpg';
  3. var img2=new Image();
  4. img2.src='/images/menu_sprites.png';
  5. var img3=new Image();
  6. img3.src='/images/loading_spinner.gif';
Но можно обойтись вообще без скриптов, сделав предзагрузку изображений на чистом CSS. Делается это путем добавления псевдоэлемента :after к тегу body. В свойствах псевдоэлемента перечисляются ссылки на все картинки, которые должны быть предварительно загружены, а сам псевдоэлемент скрывается через display:none.
  1. <style type="text/css">
  2. body:after {
  3.     content:
  4.         url('/images/slider_image.jpg')
  5.         url('/images/menu_sprites.png')
  6.         url('/images/loading_spinner.gif')
  7.     ;
  8.     displaynone;
  9. }
  10. </style>
Способ протестирован во всех современных браузерах, все работает как надо. Большим плюсом прелоадера на CSS является то, что он будет работать даже в том случае, если у пользователя отключены скрипты в браузере.

Просмотров: 4046 | Комментариев: 5

Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2020
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 3 (0.0228 сек.) / Память: 4.75 Mb
Наверх