Guille Guille - 7 months ago 11
PHP Question

Make Header dissapear when full screen mode is detected in browser (F11)

For this type of question i think there is no need to show you my code, but in case there is a need to do so i will show my code.

Here is my question

Is there any way to make it so a part of my page disappears or hide it when the browser (IT, Firefox, Chrome, Opera, etc) is set to Full Screen ( Pressing F11)

I have set up an internal website where i show dashboards and they are displayed on big screens.

All i want is the page to detect if the browser is in full screen, if so i want to header (includes logo + Navigation Menu) to hide and reappear when the browser is exited from full screen mode.

EDIT: here is some sample code of the picture displayed below



/*---------------- Default styles---------------- */

* {

margin: auto;

outline: 0;

padding: 0;

border: 0;

text-decoration: none;

vertical-align: baseline;

}

html {

font-size: 75%;

}

body {

font-family: Verdana, Geneva, sans-serif;

font-size: 1rem;

background-color: #f7f7f7;

width: 100%;

overflow-y: scroll;

}

/*----------------Header Styles----------------*/

header {

width: 80%;

text-align: center;

}

header img {

padding-top: 3%;

padding-bottom: 3%;

}

/*------------------SUB MENU STYLE-----------------*/

#wrapper {

width: 100%;

margin: 20% auto;

text-align: left;

}

#nav ul {

background-color: #ffd800;

list-style-type: none;

padding: 0;

margin: 0;

}

#nav ul li {

display: inline-block;

}

#nav ul li:hover {

background-color: #6FC4D5;

/*Borders*/

border-radius: 5%;

-moz-border-radius: 5%;

-webkit-border-radius: 5%;

border: 0px solid #000;

}

#nav ul li a,

visited {

display: block;

padding: 15px;

color: #000;

font-weight: bold;

text-decoration: none;

}

#nav ul li:hover > ul {

display: block;

}

#nav ul ul {

display: none;

position: absolute;

background-color: #e8e4e4;

min-width: fill-available;

}

#nav ul ul li {

display: block;

}

#nav ul ul li:hover {

background-color: #6FC4D5;

}

#nav ul li:hover ul li a,

visited {

color: Black;

font-weight: 500;

}

#nav ul ul li:hover > ul {

display: block;

}

#nav ul ul ul {

margin-top: -21%;

width: 100%;

margin-left: 100%;

background-color: #e8e4e4;

}

/* Dropdown Menu Arrow */

#nav ul li > a:after {

color: #000;

font-style: normal;

content: '▾';

}

#nav ul li > a:hover:after {

color: #444;

content: '▸';

}

#nav ul li > a:only-child:after {

content: ' ';

}

#nav ul li ul li > a:after {

color: #000;

font-style: normal;

content: '▸';

}

#nav ul li ul li > a:hover:after {

color: #444;

content: '▾';

}

#nav ul li ul li > a:only-child:after {

content: ' ';

}

/*----------------Article Style----------------*/

article {

width: 80%;

margin-top: 0%;

margin-bottom: 5%;

text-align: center;

}

#hr h1 {

padding-top: 0%;

padding-bottom: 0;

}

article h1 {

margin-top: 5%;

font-size: 2em;

text-align: center;

}

article p {

width: auto;

text-align: left;

font-size: 100%;

margin: 3% 0%;

padding: 0% 10% 0% 10%;

}

article p img {

margin: 1% 5%;

padding-left: 19.5%;

padding-right: 19.5%;

width: 50%;

}

/*----------------PDF File view----------------*/

object {

padding-top: 5%;

width: 60%;

height: 1070px;

}

#pdfsideview embed {

padding-top: 5%;

width: 65%;

height: 730px;

}

iframe {

width: 100%;

height: 1070px;

}

caption {

padding: 5% 0% 5% 0%;

font-size: 2rem;

font-weight: bold;

}

table {

width: 70%;

border-collapse: collapse;

border-spacing: 0;

}

#dialing table {

width: 100%;

}

table,

th,

td {

border-collapse: collapse;

border-spacing: 0;

}

th {

height: auto;

text-align: left;

}

th,

th:hover {

background-color: #f7f7f7;

}

td {

text-align: left;

height: auto;

}

tr:hover {

background-color: #6FC4D5;

/*Borders*/

border-radius: 3%;

-moz-border-radius: 3%;

-webkit-border-radius: 3%;

border: 0% solid #000;

width: auto;

}

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" http-equiv="Content-type" content="text/html" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="../scripts/modernizr-1.5.js"></script>

</head>

<body>


<header style="width:100%; background-image: url(../../images/Header-Pic.png); background-position: right;background-repeat: no-repeat; background-size: 100% 100%">


<a href="../index.html">
<img src="../../images/wiki.png" alt="">
</a>

</header>
<div id="navWrapper">
<div id="nav">
<ul>
<!--HOME DROPDOWN MENU-->
<li><a href="../index.html">Home</a>
</li>
<li>

<!--DIRECTORY MENU-->
<a href="#">Directory</a>
<ul>
<li><a href="../subpages/EmailHierarchy.php"> Email Hierarchy</a>
</li>
<li><a href="../subpages/DialingCodes.html">Dialing Codes</a>
</li>
<li><a href="../subpages/PhoneDirectory.php">Phone Directory</a>
</li>

</ul>
</li>
<li>

<!--TIPS and HINTS MENU-->
<a href="#">Tips and Hints</a>
<ul>
<!-- Arrage this sub menu in alphabetical order!!-->
<li><a href="../subpages/TipsAndHints.html">Tips and Hints</a>
</li>
<li><a href="../subpages/WindowsShortCuts.php">Windows Keyboard Shortcuts</a>
</li>
</ul>
</li>
<li>
<!--HR DROPDOWN MENU-->
<a href="#">HR</a>
<ul>
<!-- Arrage this sub menu in alphabetical order!!-->
<!--<li><a href="../subpages/HR.html">HR</a></li>-->
<li><a href="../subpages/DressCodePolicy.html">Dress Code Policy</a>
</li>
<li><a href="../subpages/GymMembershipReimbursementProgram.html">Gym Reimbursement Program</a>
</li>
<li><a href="../subpages/HolidaySchedule.html">Holiday Schedule</a>
</li>
<li><a href="../subpages/PTOPolicy.html">Time Off Policy</a>
</li>
</ul>
</li>
<li>
<!--TUTORIALS DROP DOWN MENU-->
<a href="#">TURORIALS</a>
<ul>
<!-- Arrage this sub menu in alphabetical order!!-->
<li><a href="../subpages/HowTo.html" style="font-weight: 400">About this PAGE</a>
</li>
<li><a href="../subpages/CleanCookies.php">Clean Cookies and Cache</a>
</li>
<li><a href="../subpages/GoogleDrive.php">Google Drive</a>
</li>
<li><a href="../subpages/LogMeIn.html">Find Computer Name</a>
</li>
<li><a href="../subpages/SetUpNetworkPrinter.php">Set up Network Printer</a>
</li>
<li><a href="../subpages/VPN.php">VPN</a>
</li>
</ul>
</li>
<li>

<!--DIRECTORY MENU-->
<a href="#">Dashboards</a>
<ul>
<li><a href="../Dashboards/Call Calls Week Compare.php" target="_blank">Call Center Calls Week Compare</a>
</li>
<li><a href="../Dashboards/Call Center Dashboard.php" target="_blank">Call Center Dashboard</a>
</li>
<li><a href="../Dashboards/Pet Plus Dashboard.php" target="_blank">Dashboard</a>
</li>
<li><a href="../Dashboards/Sales Dashboard.php" target="_blank">Sales Dashboard</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

<article>
<div id="dialing">
<table class="sortable">
<caption style="padding-top: 50px;">Dialing Codes</caption>
<tr>
<th>Feature</td>
<th>Code</td>
</tr>
<tr>
<td>All: Call Flow Toggle
</td>
<td>*28</td>
</tr>
<tr>
<td>All: Time Condition Override
</td>
<td>*27</td>
</tr>
<tr>
<td>Asterisk General Call Pickup
</td>
<td>*8</td>
</tr>
<tr>
<td>Call Forward All Activate
</td>
<td>*72</td>
</tr>
<tr>
<td>Call Forward All Deactivate
</td>
<td>*73</td>
</tr>
<tr>
<td>Call Forward All Prompting Activate
</td>
<td>*720</td>
</tr>
<tr>
<td>Call Forward All Prompting Deactivate
</td>
<td>*74</td>
</tr>
<tr>
<td>Call Forward Busy Activate
</td>
<td>*90</td>
</tr>
<tr>
<td>Call Forward Busy Deactivate
</td>
<td>*91</td>
</tr>
<tr>
<td>Call Forward Busy Prompting Activate
</td>
<td>*900</td>
</tr>
<tr>
<td>Call Forward Busy Prompting Deactivate
</td>
<td>*92</td>
</tr>
<tr>
<td>Call Forward No Answer/Unavailable Activate
</td>
<td>*52</td>
</tr>
<tr>
<td>Call Forward No Answer/Unavailable Deactivate
</td>
<td>*53</td>
</tr>
<tr>
<td>Call Forward No Answer/Unavailable Prompting Activate
</td>
<td>*520</td>
</tr>
<tr>
<td>Call Forward Toggle</td>
<td>*740</td>
</tr>
<tr>
<td>Call Waiting - Activate
</td>
<td>*70</td>
</tr>
<tr>
<td>Call Waiting - Deactivate
</td>
<td>*71</td>
</tr>
<tr>
<td>Camp-On Cancel</td>
<td>*83</td>
</tr>
<tr>
<td>Camp-On Request</td>
<td>*82</td>
</tr>
<tr>
<td>Camp-On Toggle</td>
<td>*84</td>
</tr>
<tr>
<td>ChanSpy</td>
<td>555</td>
</tr>
<tr>
<td>Check Recording</td>
<td>*99</td>
</tr>
<tr>
<td>Dial Voicemail</td>
<td>*98</td>
</tr>
<tr>
<td>Direct Dial Prefix</td>
<td>*</td>
</tr>
<tr>
<td>DND Activate</td>
<td>*78</td>
</tr>
<tr>
<td>DND Deactivate</td>
<td>*79</td>
</tr>
<tr>
<td>DND Toggle</td>
<td>*76</td>
</tr>
<tr>
<td>Email completed dictation
</td>
<td>*35</td>
</tr>
<tr>
<td>Findme Follow Toggle</td>
<td>*21</td>
</tr>
<tr>
<td>In-Call Asterisk Attended Transfer
</td>
<td>*2</td>
</tr>
<tr>
<td>In-Call Asterisk Toggle Call Recording
</td>
<td>##</td>
</tr>
<tr>
<td>Intercom prefix</td>
<td>*80</td>
</tr>
<tr>
<td>My Voicemail</td>
<td>*97</td>
</tr>
<tr>
<td>Park Prefix</td>
<td>*86</td>
</tr>
<tr>
<td>Perform dictation</td>
<td>*34</td>
</tr>
<tr>
<td>Phonebook dial-by-name directory
</td>
<td>411</td>
</tr>
<tr>
<td>Pickup ParkedCall Prefix
</td>
<td>*85</td>
</tr>
<tr>
<td>Queue Callers</td>
<td>*47</td>
</tr>
<tr>
<td>Save Recording</td>
<td>*77</td>
</tr>
<tr>
<td>Set user speed dial</td>
<td>*75</td>
</tr>
<tr>
<td>Speeddial prefix</td>
<td>*0</td>
</tr>
<tr>
<td>User Intercom Allow</td>
<td>*54</td>
</tr>
<tr>
<td>User Intercom Disallow</td>
<td>*55</td>
</tr>
<tr>
<td>ZapBarge</td>
<td>888</td>
</tr>
</table>
</div>
</article>

</body>

</html>





Below is an example of my webpage.
enter image description here

Answer

Using the Fullscreen API in web browsers

The user could, for instance, exit fullscreen, something that might be good for you to know. For that we have a fullscreenchange event, that you can apply both to the element that requested fullscreen, but also to the document. Then we just detect the fullscreen state and take act accordingly, like this:

document.addEventListener("fullscreenchange", function () {
    fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
    fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
    fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);

document.addEventListener("msfullscreenchange", function () {
    fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";
}, false);

SRC: http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/