Jump to content
  • Please do not post a message for the purpose of insulting, incitement to hatred, sexual remarks and any other which does not respect our terms of use !
Sign in to follow this  
achrafmaziz

 tutoriel API Fullscreen +BONUS

Recommended Posts

FireWork

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:

Please login or register to see this link.

 

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:

Please login or register to see this link.

)

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

Please login or register to see this link.

)

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

Please login or register to see this link.


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://habbo-dev.fr/topic/5879-ajouter-un-bouton-plein-%C3%A9cran-sur-son-client-100-fonctionnel/

à voir aussi:

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

 

Share this post


Link to post
Share on other sites
FireWork
il y a 16 minutes, Scorpio a dit :

Très utile aussi bien pour un rétro que pour tout autre type de site !

 

Merci du partage !

Bien sur,

Tu peux l'utiliser n'importe ou, faut juste modifier l'emplacement des boutons.

Share this post


Link to post
Share on other sites
VIP

Merci du partage, cela peut s'avérer très utile ;) 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...