Fullscreen on load

Question

my question is simple: Is there an easy way to load a webpage in fullscreenmode (like when you press F11) at the very first time you enter it? (Without pressing F11, or an specific buttom to go fullscreen)

This is for a presentation (Like a powerpoint presentation) I made using HTML/CSS (My customer wanted something more 'dynamic' than the regular powerpoint stuff) so there are no 'violations' nor user experience problems, since it won't be online and will only be used for congresses and internal meetings.

Thanks in advance!

This answer may help you: http://stackoverflow.com/a/1125113/1420186 — Tony Dinh, Oct 28 '13 at 02:48
Fullscreen is only possible when there is/was some user activity/event, on load is not possible because of security. — Codebeat, Oct 16 '18 at 02:53

score 0 · Answer 1 · answered Oct 28 '13 at 04:48

Recently I also faced this problem.

For latest versions of browsers like Chrome,Mozilla you can use webkit uhttps://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

but probelm lies with i.e and safari.As in i.e this full scrren api is not supported and in safari you can't user key input in fullscreen mode(consider case when you ask user the slide you want to visit).Under code should help.

in case of js do something like

function requestFullScreen(image1) {
    var image = document.getElementById(image1);

    image.style.width=(0.70*screen.width)+'px';
    image.style.height=(0.96*screen.height)+'px';

     // Get the element that we want to take into fullscreen mode
        var element = parent.document.getElementById('imageFullScreen');
       if(element.requestFullScreen) {
          element.requestFullScreen();
       } else if (element.mozRequestFullScreen) {
          // This is how to go into fullscren mode in Firefox
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
          // This is how to go into fullscreen mode in Chrome and Safari
          element.webkitRequestFullScreen();
       }else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        document.getElementById('imageFullScreen').style.width="100%";
        document.getElementById('imageFullScreen').style.height="100%";
        image.style.height=(0.96*$(window).height())+"px";
        document.getElementById('showFullScreen').style.display='none';
        document.getElementById('cancelFullScreen').style.display='inline';
        document.getElementById("ieCheck").value="true";
       }
}



//to close full screen manually
function cancelFullscreen() {
    if(document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if(document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if(document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (typeof window.ActiveXObject !== "undefined"){
    IEtoggleSmallScreen();
    }

}


//listners to change at full screen and small screen

document.addEventListener("fullscreenchange", function () {
    if(document.fullScreen){
         document.getElementById('showFullScreen').style.display='none';
         document.getElementById('cancelFullScreen').style.display='inline';
     }else{
         document.getElementById('showFullScreen').style.display='inline';
         document.getElementById('cancelFullScreen').style.display='none';
     }
});



document.addEventListener("mozfullscreenchange", function () {
    if(document.mozFullScreen){
         document.getElementById('showFullScreen').style.display='none';
         document.getElementById('cancelFullScreen').style.display='inline';
     }else{
         document.getElementById('showFullScreen').style.display='inline';
         document.getElementById('cancelFullScreen').style.display='none';
     }
});

document.addEventListener("webkitfullscreenchange", function () {
 if(document.webkitIsFullScreen){
     document.getElementById('showFullScreen').style.display='none';
     document.getElementById('cancelFullScreen').style.display='inline';
 }else{
     document.getElementById('showFullScreen').style.display='inline';
     document.getElementById('cancelFullScreen').style.display='none';
 }

});

//to change screen size in i.e
function IEtoggleSmallScreen(){
    document.getElementById('showFullScreen').style.display='inline';
    document.getElementById('cancelFullScreen').style.display='none';
    document.getElementById('imageFullScreen').style.width=638+"px";
    document.getElementById('imageFullScreen').style.height=479+"px";
}

// toc check esc functuonlaity for ie
$(document).keyup(function(e) {
    if (e.keyCode == 27) { 
    var check = document.getElementById("ieCheck");
    if(check.value=="true"){
        IEtoggleSmallScreen();
        check.value="false";
    }
    }  
  });

Now for html do like

<div id="imageFullScreen" class="imageFullScreen" style="width: 700px;height:400px;background-color:blue; center;text-align: center;" > 
<img  id="image" src="<%=imageUrl%>=1" style="max-height: 96%;max-width: 100%;width: 100%;height: 100%">

<div id="btnCentre" style="text-align: center;">
<input type="hidden" id="ieCheck" value="false">
<input type="button" value="Full Screen"  onclick="requestFullScreen('image');" id="showFullScreen" style="max-height: 4%">
<input type="button" value="Cancel Screen"  onclick="cancelFullscreen();" id="cancelFullScreen" style="display: none;" style="max-height: 4%"> 
</div>
</div>

Fullscreen on load

1 Answers1