Fullscreen da pulsante – Funzioni HTML&JS

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.

tasto schermo intero/fullscreen

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.

Codice completo

Copia il codice completo qui in basso ed incollalo nella pagina del tuo sito:

<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>

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:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA