Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

API Fullscreen +BONUS

achrafmaziz

Par achrafmaziz
dans Tutoriels

 Partager

Messages recommandés

achrafmaziz

achrafmaziz 29

Posté(e)
Posté(e)

Salut,

 

Je vous partage un petit tutoriel pour afficher votre page en mode plein écran (Fullscreen) en HTML5.

 

Il existe en HTML5, moyennant l’autorisation de l’usager, l’API Fullscreen qui permet d’afficher la page en plein écran. C’est à dire en utilisant l’ensemble de l’écran de l’utilisateur sans aucune barre d’information, tant les boutons, le menu que la barre du titre. L’API permet d’ouvrir la page Web en entier, mais aussi tout élément de la page pour qu’il occupe entièrement l’écran, sans l’interface utilisateur du navigateur.

 

Compatibilité:

Malheureusement, cette fonctionnalité n’est pas encore supportée par l’ensemble des navigateurs. C'est pour ça qu'on va spécifier le préfixe du navigateur (moz, webkit, ms ...) 

// HTML5
element.requestFullscreen();
// Mozilla
element.mozRequestFullScreen();
// Chrome
element.webkitRequestFullscreen();
// Internet Explorer/Edge
element.msRequestFullscreen();

 

Rendu:

Pour avoir accès à ce lien, merci de vous connecter.

 

Code:

Ajoutez le font, fontawesome dans vos balises <head></head> 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">

Ajoutez ce code dans votre fichier .css, 

      a.monBouton {
        border-top-color: transparent!important;
        border-top-style: none!important;
        border-top-width: 0!important;

        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;

        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;

        text-decoration: none;
        position: absolute;
      }
      a.monBouton.fullScreen {
        background: #ecf0f1;
        border: 1px solid #0000004d;
        color: #2d3436;

        padding: 8px 12px;
        top: 0;
        left: 10px;
      }
      a.monBouton.fullScreen:hover,
      a.monBouton.fullScreen:focus {
        background: #dde1e2;
      }
      a.monBouton > i.mg-r {
        margin-right: 5px;
      }

Ajoutez le bouton dans juste au dessous de votre tag <body>

(Comme ceci:

Pour avoir accès à ce lien, merci de vous connecter.

) 

<a href="#" onClick="twPleinEcran();" class="monBouton fullScreen"><i class="fas fa-expand-arrows-alt mg-r"></i> Plein écran</a>

Et finalement, tout en bas de votre page, ajoutez le script JS,

(Comme ça:

Pour avoir accès à ce lien, merci de vous connecter.

) 

<script>
      function twPleinEcran(_element) {
        let monElement = _element||document.documentElement;
        if (document.mozFullScreenEnabled) {
          if (!document.mozFullScreenElement) {
                  monElement.mozRequestFullScreen();
          }
          else {
                  document.mozCancelFullScreen();
          }
        }
        if (document.fullscreenElement) {
        	if (!document.fullscreenElement) {
                  monElement.requestFullscreen();
          }
          else {
                  document.exitFullscreen();
          }
        }
        if (document.FullscreenEnabled) {
          if (!document.FullscreenElement) {
                  monElement.RequestFullscreen();
          }
          else {
                  document.ExitFullscreen();
          }
        }
        if (document.webkitFullscreenEnabled) {
          if (!document.webkitFullscreenElement) {
                  monElement.webkitRequestFullscreen();
          }
          else {
                  document.webkitExitFullscreen();
          }
        }
        if (document.msFullscreenEnabled) {
        	if (!document.msFullscreenElement) {
                  monElement.msRequestFullscreen();
          }
          else {
                  document.msExitFullscreen();
          }
        }
      }
    </script>

 

 

_________________________________________________________________


 

BONUS (Bouton freeze)
Rendu:

Pour avoir accès à ce lien, merci de vous connecter.


Code:

CSS: 

      a.monBouton.reloadPage {
        background: #1abc9c;
        border: 1px solid #0000004d;
        color: white;

        padding: 8px 12px;
        top: 0;
        left: 145px;
      }
      a.monBouton.reloadPage:hover,
      a.monBouton.reloadPage:focus {
        background: #17a488;
      }
      a.monBouton > i {
        font-weight: bold;
        font-size: 90%;
      }
      a.monBouton > i.mg-l {
        margin-left: 5px;

        -webkit-animation: syncRotate 2s infinite linear;
        -o-animation: syncRotate 2s infinite linear;
        animation: syncRotate 2s infinite linear;
      }
      @keyframes syncRotate {
        0% {
          transform:rotate(0deg)
        }
        to {
          transform:rotate(1turn)
        }
      }

HTML: 

<a href="javascript:window.location.reload()" class="monBouton reloadPage">Freeze? <i class="fas fa-sync-alt mg-l"></i></a>

 

 

 

 

 

 

 

Topic similaire: 

https://inshare.fr/topic/5879-ajouter-un-bouton-plein-%C3%A9cran-sur-son-client-100-fonctionnel/

à voir aussi: 

https://inshare.fr/topic/5874-page-de-redirection-htmlcss/
https://inshare.fr/topic/5493-partage-template-habbo/
https://inshare.fr/topic/5517-partage-template-indexregister/

 

https://facebook.com/achraf.maziz.3 

Lien à poster
Partager sur d’autres sites
  • 4 ans plus tard...
  • 3 mois plus tard...

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...