CODEWITHSUNDEEP
javascriptjquerygoogle-chromefullscreenhtml5-fullscreen
Arun Xavier
Arun Xavier

Reputation: 771

Why chrome exits from fullscreen on popup?

I am using https://github.com/private-face/jquery.fullscreen for fullscreen in my web page.

In my page I have a button that opens a popup on click, on opening popup the fullscreen gets exit in chrome but not in other browsers.

What might be the reason behind this? Is there any workarounds for this issue?

This example is taken from github page , it works on my local system, but snipet here does not works,I'm sorry

$( document ).ready(function() {
  // check native support
  $('#support').text($.fullscreen.isNativelySupported() ? 'supports' : 'doesn\'t support');

  // open in fullscreen
  $('#fullscreen .requestfullscreen').click(function() {
    $('#fullscreen').fullscreen();
    return false;
  });

  // exit fullscreen
  $('#fullscreen .exitfullscreen').click(function() {
    $.fullscreen.exit();
    return false;
  });

  // document's event
  $(document).bind('fscreenchange', function(e, state, elem) {
    // if we currently in fullscreen mode
    if ($.fullscreen.isFullScreen()) {
      $('#fullscreen .requestfullscreen').hide();
      $('#fullscreen .exitfullscreen').show();
      $('#fullscreen .btn').show();
    } else {
      $('#fullscreen .requestfullscreen').show();
      $('#fullscreen .exitfullscreen').hide();
    }

    $('#state').text($.fullscreen.isFullScreen() ? '' : 'not');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/private-face/jquery.fullscreen/master/release/jquery.fullscreen.min.js"></script>

<div id="main">

  <div id="fullscreen" style="background-color: #fff; color: #000;">
    <h2>Example</h2>
    <p>Your browser <span id="support">doesn't support</span> FullScreen API.</p>
    <p>This block is <span id="state">not</span> in fullscreen mode. <a href="#" class="requestfullscreen">Click to open it in fullscreen</a><a href="#" class="exitfullscreen" style="display: none">Click to exit fullscreen</a>.</p>
    <button type="button" class="btn" onclick="window.open('http://stackoverflow.com/','Page','menubar=no, status=no, scrollbars=no, menubar=no, width=200, height=100');">hello</button>

  </div>
</div>

Upvotes: 0

Views: 2020

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Try a modal, instead of a popup, if you want to show something during your fullscreen display.

Here is a cute cut'n pasted description about the behavior of a popup:
«They say "Hey, I'm here now. You don't have to deal with me right now, keep doing what you're doing, but I'm not going away until you say you don't want me around anymore."» Ref.

I' don't know about cross-browser compatibility of the fullscreen script you use.
But since you're like it... Keep it!
And try another method than window.open() for the message you want to display over it.

You could use a modal placed in <div id="main"> which could display "over" your <div id="fullscreen">... It is what I would do in order to not «disturb» the fullscreen display.

On this modal opening trigger, you can use jQuery's $.load() to access another file on the server...
If needed.

Upvotes: 1

Related Questions