—»     —»   Учимся использовать Fullscreen API
  Раздел: CSS/Style Sheets   Комментариев: 1  

Учимся использовать Fullscreen API



Вместе с появлением HTML5 и большим количеством отличных API, появился также и Fullscreen API, который позволяет нам родными методами реализовать в браузере то, что раньше было возможно только при помощи Flash: отобразить страницу в полноэкранном режиме.

Это бывает очень удобно при воспроизведении видео, просмотре изображений, либо если вы решили создать собственную онлайн-игру. На самом деле, сюда подойдет любой контент, на котором желательно сосредоточить внимание пользователя.

Лучше всего то, что Fullscreen API уже готов к использованию.

Учимся использовать Fullscreen API
изображение от Shutterstock

Методы

Несколько методов уже составляют часть Fullscreen API:

element.requestFullScreen()

Этот метод позволяет разворачивать отдельный элемент на весь экран.

Document.getElementById(“myCanvas”).requestFullScreen()

Этот позволяет развернуть на весь экран любой элемент canvas с id «myCanvas».

document.cancelFullScreen()

Этот позволяет выйти из полноэкранного режима, и вернуться к просмотру документа в обычном режиме.

Document.fullScreen

Этот позволяет определить, в каком режиме находится пользователь, и возвращает значение true, если полноэкранный режим на данный момент активен.

document.fullScreenElement

Возвращает элемент, который на данный момент находится в полноэкранном режиме.

Учтите, что это лишь стандартные методы, и иногда вам понадобятся браузерные префиксы, чтобы все корректно работало в Chrome, Firefox и Safari (Internet Explorer и Opera на данный момент не поддерживают этот API).

Запускаем полноэкранный режим

Сначала нам нужно определить, какой метод браузер распознает. Мы создадим функцию, которая будет подбирать правильный метод для запуска его в браузере:

//helper function
function fullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}

Как видно, вся эта функция направлена на то, чтобы проверить, возвращает ли какой-нибудь из методов requestFullScreen значение true, а затем запускает функцию, подходящую браузеру, используя браузерные префиксы.

После чего, все, что нам нужно сделать, это запустить функцию fullScreen следующим образом:

// для всей страницы
var html = document.documentElement;
fullScreen(html);

// для конкретного элемента на странице
var canvas = document.getElementById('mycanvas');
fullScreen(canvas);

Эта функция отправит пользователю запрос на переход в полноэкранный режим. Если запрос будет принят, все панели управления в браузере растворятся, и на экране останется лишь желаемая страница или отдельный элемент.

Отключаем полноэкранный режим

Для этого метода также потребуются браузерные префиксы, поэтому мы воспользуемся тем же принципом и создадим функцию, которая будет определить, какой префикс нам следует использовать, чтобы функция корректно сработала в браузере.

Здесь вы должны заметить, что этому методу, в отличие от requestFullScreen, не требуется никаких элементов, так как он всегда применяется ко всему документу.

// the helper function
function fullScreenCancel() {
if(document.requestFullScreen) {
document.requestFullScreen();
} else if(document .webkitRequestFullScreen ) {
document.webkitRequestFullScreen();
} else if(document .mozRequestFullScreen) {
document.mozRequestFullScreen();
}
}

//cancel full-screen
fullScreenCancel();

CSS псевдо-класс

Вместе с javascript API появился и CSS псевдо-класс :full-screen, и использовать его можно для стилизации любого элемента на странице, когда пользователь растягивает ее на все окно. Это очень удобно, так как размер окна слегка увеличивается, когда вы переходите в режим полного экрана.

/* изменение чего-либо в body */
:-webkit-full-screen {
font-size: 16px;
}
:-moz-full-screen {
font-size: 16px;
}

/* только один элемент */
:-webkit-full-screen img {
width: 100%;
height: 100%;
}
:-moz-full-screen img {
width: 100%;
height: 100%;
}

Не забывайте, что вы не можете разделить браузерные префиксы запятыми, так как иначе браузер не прочтет их:

/* это работать не будет */
:-webkit-full-screen img,:-moz-full-screen img {
width: 100%;
height: 100%;
}

Чтобы правильно применить стили, вам нужно будет поместить каждый префикс в отдельный блок.

В завершение

Этот API на javascript – один из самых малоизвестных API, который появился вместе с HTML5, но лично нам кажется, что это очень эффективный и простой в использовании инструмент. Для продвинутого пользователя будет несложно создать особый эффект, позволяющий сосредоточить внимание посетителей на отдельном объекте страницы, будь то видео, изображения или игры.

Использовали ли вы когда-нибудь Fullscreen API? Что вы можете рассказать нам о своем опыте? Пожалуйста, поделитесь в комментариях...
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: API, javascript, CSS, HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 7415   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 апреля 2013 @ 17:35
Написал: mihdan — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Не хватает демки
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Покупка лома
Скупка металлического Лома. Круглосуточно. Выгодные цены. Любые объемы
pokupkaloma.ru
Омрон ингалятор
Ингаляторы ОМРОН. Низкие цены, гарантия, быстрая доставка
med-tehnik.ru
Решетка ливневая чугунная
Дождеприемник ДБ,ДК,ДМ,решетка сливная для ДБ
az-drenag.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930