Forum for IT, data og webutvikling

Firefox and Chrome har støtte for fullskjerm API-et.  Med dette API-et så kan du ta tak i hvilket som helst element og vise det i fullskjermmoduls. Firefox legger til attributtene widh:100%; height:100% og vil strekke elementet slik at det fyller hele skjermen. Bruksområder her er f.eks. visning av bilde, videovisning med canvas for å nevne noe. Det er bare fantasien som setter begrensninger her.
Men fordelen er at du slipper å bruke javascript plugins for å løse dette.

Hvordan bruke fullscreen API?
Definer elementet som du ønsker å vise i fullskjermmodus slik (document.getElementById('myDiv'))
og kall på funksjonen requestFullScreen

<button onclick="goFullscreen()">Vis fullskjerm</button>

 <div id="myDiv">
    <canvas width="500" height="400" id="c">Dette er mitt canvas-element</canvas>
  </div>

Eksempel på kode:

<script>

function goFullscreen() {
    var el = document.getElementById('myDiv');

    if(el.webkitRequestFullScreen) {
        el.webkitRequestFullScreen();
    }
    else {
        el.mozRequestFullScreen();
    }
}
</script>

Last edited by recursion (06-12-2011 15:41:09)