John Delmark Aguilar

Delmark - Profiling
 
HomeCalendarFAQSearchMemberlistUsergroupsRegisterLog in

Share | 
 

 [JS] Web Browser FullScreen API + SCROLL via DIV&CSS

View previous topic View next topic Go down 
AuthorMessage
dElmARk
Admin
Admin
avatar

Posts : 92
Join date : 09/04/2012

PostSubject: [JS] Web Browser FullScreen API + SCROLL via DIV&CSS   Fri Feb 28, 2014 2:26 pm

Code:

<!DOCTYPE html>
<html>
<head>
   <title>FullScreen API</title>
   
   <style>
   body {
      background: #F3F5FA;
   }
   #container {
      width: 600px;
      padding: 30px;
      background: #F8F8F8;
      border: solid 1px #ccc;
      color: #111;
      margin: 20px auto;
      border-radius: 3px;
   }
   
   #specialstuff {
      background: #33e;
      padding: 20px;
      margin: 20px;
      color: #fff;
   }
   #specialstuff a {
      color: #eee;
   }
   
   #fsstatus {
      background: #e33;
      color: #111;
   }
   
   #fsstatus.fullScreenSupported {
      background: #3e3;
   }
   #a{
    border: 2px solid gray;
    padding: 5px;
    background: white;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}
   </style>
</head>
<body>
<center>
   <div id="a">
      <h1>FullScreen API Testing</h1>
      
      <div id="specialstuff">
         <p>Inside here is special stuff which will go fullscreen</p>
         <p>As of 10/20/2011, you'll need Safari 5.1, <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>, or <a href="http://nightly.mozilla.org/">Firefox Nightly</a>
         <p>Status: <span id="fsstatus"></span>
      </div>
          badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>    badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
    mushroom<br><br>mushroom<br><br>
    a badger<br><br>badger<br><br>badger<br><br>badger<br><br>badger<br><br>
      <input type="button" value="Go Fullscreen" id="fsbutton" />
      
      <p>
         <a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/">Back to article</a>
      </p>
   </div>


<script>

/* 
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/

(function() {
   var 
      fullScreenApi = { 
         supportsFullScreen: false,
         isFullScreen: function() { return false; }, 
         requestFullScreen: function() {}, 
         cancelFullScreen: function() {},
         fullScreenEventName: '',
         prefix: ''
      },
      browserPrefixes = 'webkit moz o ms khtml'.split(' ');
   
   // check for native support
   if (typeof document.cancelFullScreen != 'undefined') {
      fullScreenApi.supportsFullScreen = true;
   } else {    
      // check for fullscreen support by vendor prefix
      for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
         fullScreenApi.prefix = browserPrefixes[i];
         
         if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
            fullScreenApi.supportsFullScreen = true;
            
            break;
         }
      }
   }
   
   // update methods to do something useful
   if (fullScreenApi.supportsFullScreen) {
      fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
      
      fullScreenApi.isFullScreen = function() {
         switch (this.prefix) {   
            case '':
               return document.fullScreen;
            case 'webkit':
               return document.webkitIsFullScreen;
            default:
               return document[this.prefix + 'FullScreen'];
         }
      }
      fullScreenApi.requestFullScreen = function(el) {
         return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
      }
      fullScreenApi.cancelFullScreen = function(el) {
         return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
      }      
   }

   // jQuery plugin
   if (typeof jQuery != 'undefined') {
      jQuery.fn.requestFullScreen = function() {
   
         return this.each(function() {
            var el = jQuery(this);
            if (fullScreenApi.supportsFullScreen) {
               fullScreenApi.requestFullScreen(el);
            }
         });
      };
   }

   // export api
   window.fullScreenApi = fullScreenApi;   
})();

</script>
<script>

// do something interesting with fullscreen support

var fsElement = document.getElementById('a');
window.fullScreenApi.requestFullScreen(fsElement);
// handle button click
    fsElement.addEventListener('click', function() {
      window.fullScreenApi.requestFullScreen(fsElement);
   }, true);

if (window.fullScreenApi.supportsFullScreen) {
   fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
   fsStatus.className = 'fullScreenSupported';
   
   
   
   fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
      if (fullScreenApi.isFullScreen()) {
         fsStatus.innerHTML = 'Whoa, you went fullscreen';
      } else {
         fsStatus.innerHTML = 'Back to normal';
      }
   }, true);
   
} else {
   fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}

</script>



</center>
</body>
</html>

Back to top Go down
View user profile http://delmark.meabout.com
 
[JS] Web Browser FullScreen API + SCROLL via DIV&CSS
View previous topic View next topic Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
John Delmark Aguilar :: dElmARk Productions :: Web Coding-
Jump to: