Blog. Just Blog

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

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

Как узнать, что web-страница была распечатана на принтере

13.05.2017 | Категория: Web-мастеру и не только | Автор: ManHunter
В процессе создания одной из рабочих систем, с подачи начальства возникла очень необычная задача. Организационные подробности описывать не буду, только техническую сторону. В системе пользователю генерируется некий документ, который он должен распечатать. Задача заключалась в том, что система должна была узнать, что документ был распечатан. Причем просто просмотр версии для печати на экране не считается, требовалось определить именно факт отправки документа на принтер. После недолгих размышлений пришло на ум следующее решение. На страницу документа, которая должна быть распечатана, добавляется примерно следующий код:
  1. <style type="text/css">
  2. .print_hook {
  3.     displayinline-block;
  4. }
  5. @media print {
  6.     .print_hook {
  7.         background:url('/print_hook.php?id=123');
  8.     }
  9. }
  10. </style>
  11. <div class="print_hook"></div>
Поясню словами. Вспомогательному элементу div назначается фоновый рисунок в виде скрипта-перехватчика. Стили, определенные через @media print, задействуются только при печати, просто при просмотре страницы фоновый рисунок дергаться не будет. В параметрах перехватчику передаются определенные значения, по которым идентифицируется печатаемый документ. Файл-перехватчик print_hook.php, к которому выполняется обращение, разбирает переданные ему параметры, заносит в базу необходимые статистические данные, а затем выдает в качестве фона прозрачный однопиксельный GIF.

Стили для перехватчика динамически генерируются на странице, во внешних файлах и в глобальных таблицах CSS их хранить не надо. Способ кроссбраузерный, работает везде, где поддерживаются CSS3 Media Queries и не требует включения никаких скриптов на стороне клиента.

В полной мере задача не решилась, потому что пользователь может просто открыть в браузере предварительный просмотр страницы, а потом закрыть его, не отправив фактически документ на печать. При этой операции также задействуется перехватчик, поскольку браузер отрисовывает страницу, как она бы выглядела на печати. Но более лучшего способа я так и не придумал, так что после согласования с начальством остановились на таком решении. Может быть пригодится кому-нибудь еще.

Просмотров: 1656 | Комментариев: 2

Стилизация нумерованных списков с помощью CSS

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

Стилизация нумерованных списков с помощью CSS

Продолжаем тему стилизации различных HTML-элементов. Сегодня это будут нумерованные списки. Если вы захотите изменить отображение цифр перед строками в нумерованном списке, то обнаружите, что сделать это при помощи CSS невозможно. Но также невозможно объяснить заказчикам, почему дизайнер нарисовал в фотошопе красивый список, а повторить его на web-странице в таком же виде не получается. Решение этой проблемы есть, и даже не одно.

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

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

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

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

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

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

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

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

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

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

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

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

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