In questo articolo della serie “Funzioni HTML&JS” imparerai a gestire e configurare un pulsante/tasto HTML (button), che al click imposterà la finestra del browser in uso a schermo intero (fullscreen). Tutto questo con un semplice codice HTML ed una funzione JQuery di poche righe.
Funzione JS per visualizzare il sito a schermo interno cliccando un tasto
Anche questa guida, come le precedenti, è dedicata principalmente ai meno esperti del linguaggio Javascript e JQuery, che si stanno avvicinando allo sviluppo di applicazioni web e pagine dinamiche più complesse.
Nello specifico, la funzione che andremo a descrivere servirà ad impostare la finestra del browser/sito web visitato in fullscreen (schermo intero), cioè la stessa funzione che si può ottenere cliccando semplicemente sul taso F11 da tastiera.
I motivi per usare questo script all’interno di una pagina web del proprio sito possono essere differenti, come ad esempio nel nostro editor codewith.it, in cui questa funzione è fornita sotto forma di strumento aggiuntivo nel menu rapido del sito.
Ora andremo a vedere come poter incorporare questa funzione su di un tasto HTML così da visualizzare il sito a schermo intero/fullscreen .
Il codice
Simile ad altre funzioni, l’installazione del codice è divisa in due parti:
- La prima parte per JQuery, in cui scriveremo le istruzioni che il browser dovrà eseguire affinché il sito venga visualizzato in fullscreen cliccando sull’apposito tasto;
- La seconda parte è la configurazione del tasto visualizzato nella pagina, dichiarato tramite il tag HTML <button>.
- Facoltativo, che non vedremo qui in questa guida, è la personalizzazione del codice con il CSS. Per questo ti rimando alla nostra guida dedicata.
N.B. Per motivi tecnici non è possibile visualizzare un’anteprima dello script con relativo tasto in questa pagina. Preleva i seguenti codici e inseriscili in un documento html nuovo, salvalo ed eseguilo sul tuo browser. Altrimenti puoi visualizzare gli effetti dello script dal nostro editor Codewith.it, nel menu strumenti.
JQuery
Le istruzioni di questa funzione sono dichiarate nello script riportato qui di seguito. Per inserirle nel tuo documento ti basterà copiare il codice ed incollarlo nei tag <head>…</head>.
N.B. Lo script è testato e funzionante con tutti i principali browser internet. Per evitare malfunzionamenti, ti sconsiglio di inserirlo nel “foot” delle tue pagine.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
// Schermo intero
$(document).ready(function(){
$("#tasto-fs").on("click", function()
{
document.fullScreenElement && null !==
document.fullScreenElement ||
!document.mozFullScreen &&
!document.webkitIsFullScreen ?
document.documentElement.requestFullScreen ?
document.documentElement.requestFullScreen() :
document.documentElement.mozRequestFullScreen ?
document.documentElement.mozRequestFullScreen() :
document.documentElement.webkitRequestFullScreen &&
document.documentElement.webkitRequestFullScreen
(Element.ALLOW_KEYBOARD_INPUT) :
document.cancelFullScreen ? document.cancelFullScreen() :
document.mozCancelFullScreen ?
document.mozCancelFullScreen() :
document.webkitCancelFullScreen &&
document.webkitCancelFullScreen();
});
});
</script>Nel caso lo script sia da incorporare in un documento .js esterno, richiamalo tramite l’apposita sintassi (sempre nel head della pagina) e ricordati di eliminare i tag <script> e </script>:
<script src="documento.js"></script> N.B. Per funzionare JQuery richiede la libreria esterna, indicata nella prima riga del codice.
HTML
Dopo aver incollato il codice JQuery nell’head della pagina web, passeremo alla creazione del tasto HTML che andrà configurato per azionare lo script e visualizzare il sito fullscreen.
Per fare questo utilizzeremo il tag <button>, ma le stesse regole valgono Nel precedente codice si può notare come sia stato creato un button con un ID nominato “tasto-fs“, cioè lo stesso ID indicato all’inizio dello script JQuery. Controlla bene che sia indicato lo stesso nome in entrambe le parti del codice. Copia il codice completo qui in basso ed incollalo nella pagina del tuo sito: Hai avuto difficoltà con questa funzione? Faccelo sapere nei commenti e ti aiuteremo a risolvere il tuo problema? Leggi anche: Come ingrandire e ridurre il testo da pulsanti Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti! Articoli recenti:Codice completo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
// Schermo intero
$(document).ready(function(){
$("#tasto-fs").on("click", function()
{
document.fullScreenElement && null !==
document.fullScreenElement ||
!document.mozFullScreen &&
!document.webkitIsFullScreen ?
document.documentElement.requestFullScreen ?
document.documentElement.requestFullScreen() :
document.documentElement.mozRequestFullScreen ?
document.documentElement.mozRequestFullScreen() :
document.documentElement.webkitRequestFullScreen &&
document.documentElement.webkitRequestFullScreen
(Element.ALLOW_KEYBOARD_INPUT) :
document.cancelFullScreen ? document.cancelFullScreen() :
document.mozCancelFullScreen ?
document.mozCancelFullScreen() :
document.webkitCancelFullScreen &&
document.webkitCancelFullScreen();
});
});
</script>
<button id="tasto-fs">Schermo intero</button>
