Onko tämä järkevä tapa HTML5:n full screen -toimintoon:
http://jsfiddle.net/qXtkH/
Koodihan näyttää aika järkyttävän pahalta, joten en suosittele. Lisäksi tuossa purkataan ihan turhaan sen sijaan, että käytettäisiin siististi standardia apia.
Tässä oma viritelmäni:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FullScreen Test</title>
<meta charset="UTF-8"/>
<style type="text/css">
body {
background-color: #def;
}
#mdi-window {
width: 600px;
height: 600px;
background-color: #687;
}
#shape {
width: 360px;
height: 360px;
background-color: rgba(100, 200, 150, .5);
margin: 80px auto;
border-radius: 180px;
box-shadow:
0 0 1px black,
10px 10px 20px #222,
inset 0 -300px 150px rgba(255, 255, 255, .8),
inset 0 -50px 30px rgba(200, 0, 0, .6);
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
var foobar = (function() {
var body = document.body;
var a = 'requestFullScreen';
var b = 'cancelFullScreen';
var c = 'fullScreen';
var methods = {};
if (body.requestFullScreen) {
methods[a] = a;
methods[b] = b;
methods[c] = c;
} else if (body.mozRequestFullScreen) {
methods[a] = 'mozRequestFullScreen';
methods[b] = 'mozCancelFullScreen';
methods[c] = 'mozFullScreen';
} else if (body.webkitRequestFullScreen) {
methods[a] = 'webkitRequestFullScreen';
methods[b] = 'webkitCancelFullScreen';
methods[c] = 'webkitIsFullScreen';
} else {
alert('Fullscreen not supported!');
}
return methods;
})();
$('#toggle-fullscreen').click(function() {
if (document[foobar['fullScreen']]) {
document[foobar['cancelFullScreen']]();
} else {
$('#mdi-window')[0][foobar['requestFullScreen']]();
}
});
});
</script>
</head>
<body>
<div id="mdi-window">
<button type="button" id="toggle-fullscreen">Toggle</button>
<div id="shape"></div>
</div>
</body>
</html>Valmiita jQuery-plugareitakin varmasti löytyy jo tässä vaiheessa internetin evoluutiota... Sellaiseksi joka tapauksessa muokkaisin tuotantoversion koodista.
Tuohon tapaan kyllä saa fullscreen-toiminnon niihin selaimiin, jotka tällaisia asioita tukevat. Mutta eihän se jsfiddlessä toimi. Jos rakennat erillisen dokumentin ja kirjoitat sinne tuollaisen koodin, niin sitten pelaa (eräissä selaimissa).
Tässä muuten on jokseenkin turha käyttää jQueryä, kun voi suoraan kirjoittaa button-elementtiin onclick="fullscreenToggle()".
Oikeassa käytössä pitäisi tietysti *ensin* tutkia piirteiden tunnistuksella (tunteeko selain jonkin käytetyistä metodeista) ja vasta sitten generoida sivulle painike. Ei ole kivaa esimerkiksi IE:n käyttäjälle, että sivulla on painike, jonka klikkaaminen ei tee mitään.
Kovasti tuo on kyllä keskeneräistä tekniikkaa, kuten mm. MDN:n sivuilla varoitellaan. Kuitenkin esim. CSS-asetusten rajaaminen fullscreen-tilassa toimivaksi kyllä onnistuu pseudoluokilla, kunhan duplikoi määrittelyt käyttäen luokkia :-moz-full-screen ja :-webkit-full-screen ja :fullscreen.
Aihe on jo aika vanha, joten et voi enää vastata siihen.