CODEWITHSUNDEEP
javascript
hossein1976
hossein1976

Reputation: 21

how to know that your element is in fullscreen mode and how to get the element

i have some elements in my webpage which each of them are related to a button. that when it's button is clicked, the element goes to fullscreen mode. when each of these elements are in fullscreen mode, i want them to do something but the work they have to do is different for each of them.

<html>
<body>

<button id="button"></button>
<div id="element" style="width:100px;height:100px;background-color:red"></div>

<script>

var fullscreen_the_element = function(passedElementId){

        var element = document.getElementById(passedElementId);
        if(element.requestFullscreen) 
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)   /* Firefox */
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)   /* Chrome, Safari & Opera */
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)   /* IE/Edge */
            element.msRequestFullscreen();
    }

var btn = document.getElementById('button');

btn.click(function(){
    fullscreen_the_element('button');
});

/* if the div element is in fullscreen mode then change the elements backgound-color to yellow

here i can use the documnet.fullscreen to know if the document is in
 fullscreen mode, but i need to know if this specific element is in fullscreen mode by 
id (because i have many elements that have to go to 
fullscreen mode and also have to execute different code when they are in 
fullscreen mode. the document.fullscreen just tells that the document is in 
fullscreen mode and i wouldn't know that which element is in fullscreen mode, 
because the document is not the element. what should i do here and what 
methods can i use when entering and exiting the fullscreen mode of this 
element and not the document)

*/

<script>
</body>
</html>
  1. first i need to know if the element is in it's fullscreen mode.
  2. i need to know which element is in the fullscreen mode by it's specific id, (because each element has different code to run when it is in fullscreen mode).

how can i do these two things? i also would like that your answer support all browsers (especially old and tricky ones like IE). (and please give me enough explanation about the code)

thank you

Upvotes: 0

Views: 1054

Answers (1)

Ankur Parihar
Ankur Parihar

Reputation: 495

There can be only one element in fullscreen mode at a time.

Use document.fullscreenElement to find out if some element is in fullscreen mode

function fs_status() {
    var fullScreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
    return fullScreenElement;
}

// To find id of element
var id
var fs_elem = fs_status()
if(fs_elem != null){
    // No element in full screen
}else {
    // There is an element in fullscreen
    id = fs_elem.id
    // Do some work with element having id
}

Upvotes: 1

Related Questions