Many of you might have seen this in Facebook, there is an option to to view the photo in the full-screen. You can do the same thing with BigScreen JS. There are many features in JS which are listed down,
- It can be done for a particular HTML Element in the web page
- It can also be done for the whole page
- Toggle screen option is also available
Now the supported browsers are,
- Chrome 15+
- Firefox 10+
- Safari 5.1+
The browsers supported for video:
- Safari 5.0
- iOS 4.2+
Let’s see the implementation :
Putting entire page in Full Screen
1 2 3 4 5 6 7 8 |
document.getElementById('button').addEventListener('click', function() { if (BigScreen.enabled) { BigScreen.toggle(); } else { // fallback for browsers that don't support full screen } }, false); |
Put any element in full screen
1 2 3 4 5 6 7 8 9 10 11 |
var element = document.getElementById('target'); document.getElementById('button').addEventListener('click', function() { if (BigScreen.enabled) { BigScreen.request(element); // You could also use .toggle(element) } else { // fallback for browsers that don't support full screen } }, false); |
Detecting full screen changes
1 2 3 4 5 6 7 |
BigScreen.onenter = function() { // called when entering full screen } BigScreen.onexit = function() { // called when exiting full screen } |
Requirement : JS framework & Supported browsers
Demo & Downloads :- http://brad.is/coding/BigScreen/
License : Apache 2.0 License