—»     —»   Учимся использовать 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   Прочитано (раз): 7152   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 8 апреля 2013 @ 17:35
Написал: mihdan — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Не хватает демки
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Eutelsat интернет
eutelsat интернет
starlinkos.net
Промышленный фотограф
Профессиональный фотограф в Москве, Высочайшее качество услуг! Дешево
professionalproduction.ru
Покупка лома
Скупка металлического Лома. Круглосуточно. Выгодные цены. Любые объемы
pokupkaloma.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31