+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 971
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 971
    Points : 67 168
    Points
    67 168

    Par défaut [Article] L'API JavaScript Full Screen



    Je vous propose une traduction de l'article anglophone Javascript FullScreen API de Paul Underwood.

    N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

    L'API JavaScript Full Screen

  2. #2
    Rédacteur/Modérateur
    Avatar de argyronet
    Homme Profil pro
    Panseur de bobos en solutions ETL
    Inscrit en
    mai 2004
    Messages
    4 755
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Panseur de bobos en solutions ETL
    Secteur : Finance

    Informations forums :
    Inscription : mai 2004
    Messages : 4 755
    Points : 11 109
    Points
    11 109
    Billets dans le blog
    5

    Par défaut

    Bonjour,

    Excellent...
    Tu peux ajouter Maxthon 3.45.2000 qui supporte aussi cette API.

    Argy
    Ce qui donne son sens à la communication, c´est la réponse que l´on obtient. Si vous n´obtenez pas la réponse voulue, communiquez différemment.

    Ils comptent sur vous...
    Web Site@Mail
    Tutoriels : Déployez vos applications Access 2013 et 2016 */* Réalisez un Assistant de présaisie...
    MDB Viewer : Visionneuse Access v4.0
    *** Je recherche des profils (2 ans min.) Java EE, Fullstack, Front, .Net, Mobile... pour CDI ***

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    février 2010
    Messages
    17
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : février 2010
    Messages : 17
    Points : 15
    Points
    15

    Par défaut

    Bonjour et merci pour ce tuto.

    Plutôt que Screenfull, je recommande d'utiliser le polyfill "Fullscreen-API-Polyfill" qu'on trouve également sur GitHub (https://github.com/neovov/Fullscreen-API-Polyfill). Comme tout polyfill qui se respecte, il permet d'utiliser l'API de manière complètement standard sans se soucier des préfixes.

    Par contre si tu as une solution pour gérer de la même manière la pseudo classe CSS3 ":fullscreen", ca m'intéresse.

    D'autre part, aurais tu des informations "officielles" sur l'interaction entre le passage en fullscreen et l'événement "onresize" ? Est-il déclenché automatiquement ?
    (la réponse est oui pour un test sous firefox, mais j'aimerais bien savoir ce qu'il en est dans les standard).

    Merci.

  4. #4
    Candidat au Club
    Profil pro
    Inscrit en
    mars 2003
    Messages
    3
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2003
    Messages : 3
    Points : 4
    Points
    4

    Par défaut <body bgcolor=red> dans la démo.

    Bonjour,
    Lorsque que je change dans la démo proposée
    <body> en <body bgcolor=red> le résultat est surprenant lorsqu'on passe en mode fullscreen.
    Le fond s'affiche en noir.
    Pourrai-je avoir une explication ou est-ce normal ou un bug.
    Merci d'avance.
    Le test est fait sur Kubuntu 16.04 avec Firefox 50 et Chromium.

  5. #5
    Responsable JavaScript & AJAX

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    5 971
    Détails du profil
    Informations personnelles :
    Âge : 32
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 5 971
    Points : 67 168
    Points
    67 168

    Par défaut

    Bonjour,

    Le fond d'écran par défaut du mode fullscreen est noir. Il est possible de le modifier mais le résultat ne sera peut-être pas celui attendu.

    Sache cependant qu'il faut rester logique entre l'utilisation du HTML et du HTML5. Donc à ne pas sortir de son contexte, dans notre exemple ici, qui date tout de même 2012, tu peux :

    • conserver ou déplacer ton test du bgcolor. En tout cas, il te faut effectivement une notion de couleur de fond quelque part. Cela peut se faire dans le fichier css fournit :
      Code css : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      4
      5
      6
      body{
      	font-family: 'Lato', serif;
      	color:#554;
      	font-size:1.6em;
      	background: #B59
      }
    • ajouter ceci en début de fichier css afin que le body prenne bien tout l'écran en mode fullscreen (ce qui n'est pas le cas par défaut) :
      Code css : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      html, body{
      	height:100%
      }
    • ajouter un id à ton body ;
    • utiliser cet id au lieu de l'id du container comme paramètre des méthodes screenfull.request, screenfull.toggle, etc. qui sont appelées dans la balise script du HTML. Par exemple :
      Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
      1
      2
      3
      $('#request').click(function() {
      	screenfull.request( $('#idBody')[0] );
      });


    Ce qu'il faut comprendre avec le fullscreen, c'est qu'on peut déterminer quel élément de la page va être en fullscreen. Dans la démonstration de l'article, l'élément choisit est le container. C'est pourquoi tu ne vois pas ce qui est en dehors du container, à savoir le fond du body.

    Je n'ai testé qu'avec Chrome. Je ne certifie pas que cette solution soit compatible avec tous les navigateurs mais c'est déjà une piste et une petite explication.

  6. #6
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 389
    Points : 769
    Points
    769

    Par défaut

    c'est tout de même le gros bazars cette api

Discussions similaires

  1. Problème avec Full-Screen Exclusive mode API
    Par SheikYerbouti dans le forum Composants
    Réponses: 2
    Dernier message: 08/02/2010, 07h49
  2. Passer mon site en "full-screen"
    Par krolineeee dans le forum JavaScript
    Réponses: 7
    Dernier message: 24/05/2006, 17h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo