Monday, February 10, 2014

Browser FULL-SCREEN mode

<html>
<head>
<script>
(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() {
                if (fullScreenApi.supportsFullScreen) {
                    fullScreenApi.requestFullScreen(this);
                }
            });
        };
    }

    // export api
    window.fullScreenApi = fullScreenApi;
})();
</script>

</head>
<body>
<button onclick="fullScreenApi.requestFullScreen(document.documentElement)">GO FULLSCREEN</button>
</body>
</html>


LEGEND:
blue - API used to full-screen browsers.
red   - use to toggle full-screen.


src: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

Thursday, August 22, 2013

Adobe Illustrator [AI]

A project in collaboration with my classmate Catherine F. Palarca. Our instructor ask us to make our own monster create using AI, so we'd end up as shown in the picture. The names were based to surname or to type of animals (e.g Palcamon - Palca from Palarca and mon from digimon) (e.g Spidocs - Spid from spider and ocs from octopus). Please do rate our works. Thanks !

AI 1.0: Palcamon

AI 2.0: Spidocs