Friday, July 20, 2012

HTML 5 Full screen API example



Now in HTML5, there is new "Full Screen API".
 Example: http://jiansenlu.blogspot.ca/2012/07/full-screen-demo-html5.html
click the image to see full image mode. Press Esc key to return to normal mode.
Source code:
 <style>
section
{
    display: block;
    float: right;
    width: 40%;
    padding: 10px;
    margin: 0;
    border: 2px solid #ddd;
    cursor: pointer;
}

section img
{
    width: 100%;
}

section p
{
    font-weight: bold;
    text-align: center;
    margin: 0;
}

section:-webkit-full-screen
{
    float: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
    background-color: #f00;
}

section:-moz-full-screen
{
    float: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
}

section:-ms-full-screen
{
    float: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
}

section:-o-full-screen
{
    float: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
}

section:full-screen
{
    float: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0 none;
}
</style>
<section id="fullscreen">
<img src="http://www.orble.com/images/my-fish.jpg" alt="fish" />
<p>Click image or here to see FULL screen;</p>
</section>


<script>
var e = document.getElementById("fullscreen");

e.onclick = function() {

    if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
        RunPrefixMethod(document, "CancelFullScreen");
    }
    else {
        RunPrefixMethod(e, "RequestFullScreen");
    }

}
var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
  
    var p = 0, m, t;
    while (p < pfx.length && !obj[m]) {
        m = method;
        if (pfx[p] == "") {
            m = m.substr(0,1).toLowerCase() + m.substr(1);
        }
        m = pfx[p] + m;
        t = typeof obj[m];
        if (t != "undefined") {
            pfx = [pfx[p]];
            return (t == "function" ? obj[m]() : obj[m]);
        }
        p++;
    }

}

</script>

Reference:
 http://blogs.sitepointstatic.com/examples/tech/full-screen/index.html

No comments:

Post a Comment