Быстрый поиск
Введите фрагмент названия статьи для поиска
Таблица с фиксированной шапкой на JavaScript
14.04.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
В одном из рабочих проектов появилась необходимость выводить достаточно длинную таблицу с большим количеством однотипных колонок. При вертикальной прокрутке заголовок таблицы уезжает, и уже на втором скролле становится очень сложно сориентироваться, какая из колонок к чему относится. Проблема решается с помощью создания фиксированной шапки у таблицы, которая всегда будет отображаться, пока "родной" заголовок таблицы находится за пределами видимой области страницы.Начнем с верстки. Для корректной работы скрипта нужно выполнение всего несколько требований. Таблица, у которой будет фиксироваться заголовок, обязательно должна иметь атрибут id и фиксированную ширину. Шапка таблицы должна быть обрамлена тегом thead. Например:
Code (HTML) : Убрать нумерацию
- <table id="my_table" style="width:980px;" rules="all">
- <thead>
- <tr>
- <th style="width:20px;">N</th>
- <th style="background: #BABABA;">Наименование</th>
- <th>Описание</th>
- <th style="width:60px;">Цена</th>
- <th style="width:60px;">Количество</th>
- <th style="width:60px;">Сумма</th>
- </tr>
- </thead>
- <tr>
- <td>1</td>
- <td>Предмет 1</td>
- <td>Описание 1</td>
- <td>26</td>
- <td>97</td>
- <td>2522</td>
- </tr>
- ... остальное содержимое таблицы
- </table>
Читать статью целиком »
Просмотров: 9333 | Комментариев: 8
Рейтинг на CSS и JavaScript
17.02.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
Рейтинг на CSS и JavaScript
Один из ставших привычным элементов web-страниц - рейтинг. Это может быть средняя пользовательская оценка какой-нибудь статьи, популярность товара или что-нибудь подобное. Обычно рейтинг представляет собой полоску с пятью или десятью звездочками, часть из которых серая, а часть, соответствующая значению рейтинга, - золотистая. Сегодня я расскажу, как сделать отображение такого рейтинга и как он может взаимодействовать с пользователем.
Читать статью целиком »
Просмотров: 7842 | Комментариев: 5
Кроссбраузерная стилизация input type="file" с помощью CSS
14.04.2015 | Категория: Web-мастеру и не только | Автор: ManHunter
Продолжаем тему извечного противостояния дизайнеров и верстальщиков. Основной конфликт возникает тогда, когда дизайнер рисует картинку сайта так, как нужно заказчику, а потом верстальщику приходится адаптировать под это изображение различные элементы HTML. Один из самых сложных для стилизации элементов - это поле выбора файлов, элемент input с типом file. В качестве наглядного примера, вот как он отображается в различных браузерах:Поле input type="file" в разных браузерах
Дополнительную сложность создает то, что это поле попадает под различные правила безопасности браузеров, поэтому его нельзя, например, заменить каким-нибудь стилизованным div, нельзя обернуть тегом label, нельзя напрямую присвоить значение с помощью скриптов или вызвать окно выбора файла, сэмулировав нажатие через element.click(). А в некоторых браузерах даже нельзя сделать поле выбора файлов скрытым, так как после отправки формы его значение не будет передано на сервер. В разных интернетах я встречал попытки сделать кроссбраузерное решение, но все они, на самом деле, не универсальные и ограничиваются конкретными браузерами.
Читать статью целиком »
Просмотров: 14143 | Комментариев: 3
Горизонтальная раскраска текста на CSS
04.03.2015 | Категория: Web-мастеру и не только | Автор: ManHunter
Предлагаю вашему вниманию простой эффект раскраски текста горизонтальными полосами. Делается просто, выглядит хорошо, в итоге получается валидная и кроссбраузерная верстка. Сперва немного теории. Разноцветные горизонтальные полосы проще всего сделать путем наложения друг на друга нескольких слоев разной высоты, но с одинаковым содержимым. Вот как это выглядит схематически:Наложение слоев текста
Теперь переходим к верстке. Высота и количество цветных полос могут быть любыми. Например, вот так можно раскрасить текст в цвета российского триколора:
Code (HTML) : Убрать нумерацию
- <!-- фоновый DIV - нижняя полоса -->
- <div style="color:#FF0000; position:relative;">RUSSIA
- <!-- первый абсолютно позиционированный DIV - средняя полоса -->
- <div style="color:#0000FF; position:absolute; top:0px; height:28px;
- overflow:hidden;">RUSSIA</div>
- <!-- второй абсолютно позиционированный DIV - верхняя полоса -->
- <div style="color:#FFFFFF; position:absolute; top:0px; height:18px;
- overflow:hidden;">RUSSIA</div>
- </div>
Читать статью целиком »
Просмотров: 4952 | Комментариев: 2
Галерея в стиле старого альбома с фотоуголками
04.07.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Галерея в стиле старого альбома с фотоуголками
В каждой семье наверняка хранятся старые советские фотоальбомы, в которые фотографии надо было вклеивать самим. Обычно для этого использовались бумажные фотоуголки. Они надевались на углы фотографий, смачивались языком и прикладывались на страницу фотоальбома. Однажды я подумал: а почему бы не сделать нечто подобное в виртуальном мире, создать веб-страницу галереи, которая будет выглядеть как старый фотоальбом? Вот что у меня получилось.
Читать статью целиком »
Просмотров: 7497 | Комментариев: 9