title: Html5 Fullscreen Browser Toggle Button
body: <p>I was reading about the  HTML5 Fullscreen API. Now I came across a code which lets your browser go full screen.</p>
  
  <p>Now I want to add the functionality to do a toggle on full screen and normal screen.
  I am not able to understand the code fully.</p>
  
  <p>The button allows us to go full screen for browser. How come I can revert it to normal on click again?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;style&gt;
      body {
          margin: 0px;
          background-color: brown;
      }
  
      #contento:-webkit-full-screen {
          width: 100%;
          height: 100%;
      }
  
      #contento:-moz-full-screen {
          width: 100%;
          height: 100%;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function goFullscreen(id) {
          // Get the element that we want to take into fullscreen mode
          var element = document.getElementById(id);
  
          // These function will not exist in the browsers that don't support fullscreen mode yet,
          // so we'll have to check to see if they're available before calling them.
  
          if (element.mozRequestFullScreen) {
              // This is how to go into fullscren mode in Firefox
              // Note the "moz" prefix, which is short for Mozilla.
              element.mozRequestFullScreen();
          } else if (element.webkitRequestFullScreen) {
              // This is how to go into fullscreen mode in Chrome and Safari
              // Both of those browsers are based on the Webkit project, hence the same prefix.
              element.webkitRequestFullScreen();
          }
          // Hooray, now we're in fullscreen mode!
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body id="contento"&gt;
      Hello
      &lt;button onclick="goFullscreen('contento'); return false"&gt;
          Click Me To Go Fullscreen! (For real)
      &lt;/button&gt;
  </code></pre>
  
  <p></p>