Mettre en plein écran lors d'un clic sur un bouton

**ColChope** · 20/07/2016, 14h52

Bonjour à tous,

Il y a quelque chose que je n'arrive pas à faire avec mon site.
En voici un exemplaire pour illustrer et vous permettre de le visiter vous-même : http://epichardjump.com/Imaginary/index.html

Comme vous le voyez, en haut à droite de l'image principale, il y a une croix permettant de ranger la barre de droite. C'est sur cette croix que je souhaite qu'en appuyant, en plus de ranger le menu de droite, le navigateur passe en plein écran.
J'ai déjà essayé différents codes comme ceux-ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
document.querySelector( ".toggle" ).addEventListener( "click", function(oEvent) {
oEvent.preventDefault();
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
} );
</script>

ou encore :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.querySelector( ".toggle" ).addEventListener( "click", function(toggleFullScreen()) {
toggleFullScreen.preventDefault();
{
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
} );

Mais ça ne fonctionne pas. A mon avis, le problème est que je ne parviens pas à identifier précisément le bouton (la croix) dans le code, et donc logiquement que je n'arrive pas à lui attribuer une commande.

Bien sûr je vous invite à voir par vous même le code avec la console développeurs de votre navigateur, et je reste à votre disposition pour vos questions.

Merci par avance !

**Ecared** · 20/07/2016, 16h10

As tu trouvé ta solution? Chez moi ça fonctionne très bien

**ColChope** · 20/07/2016, 18h42

Heu comment ça ça fonctionne très bien ? Tu as essayé sur l'URL que j'ai donnée ?
Parce que moi ça ne marche pas du tout :/

**danielhagnoul** · 20/07/2016, 22h50

J'utilise, depuis quelques années, le code ci-dessous.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="fullScreen">Plein écran</button>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
const enterFullScreen = function( element ){
  if( element.requestFullScreen ){
    element.requestFullScreen();
  } else if ( element.webkitRequestFullScreen ){
    element.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );
  } else if ( element.mozRequestFullScreen ){
    element.mozRequestFullScreen();
  }
};
 
document.querySelector( '#fullScreen' ).addEventListener( 'click', function( ev ){
  enterFullScreen( document.body );
}, false );

**ColChope** · 20/07/2016, 22h52

Non mais le problème n'est pas le code, le problème c'est que je n'arrive pas à l'appliquer au bouton du site !

**SylvainPV** · 20/07/2016, 22h57

Déplace ton script main.js derrière </body> ou utilise ready de jQuery

**ColChope** · 20/07/2016, 23h40

Où ça ? Sur quel fichier ?

**SylvainPV** · 21/07/2016, 10h34

la balise <script> de main.js dans index.html, derrière la fermeture du tag body.

http://javascript.developpez.com/faq...positionScript

**ColChope** · 21/07/2016, 14h49

C'est fait, et ensuite ?

**SylvainPV** · 21/07/2016, 15h16

Ça aurait dû suffire... des erreurs en console ?

**ColChope** · 21/07/2016, 15h29

Mais comment sais-tu si la croix est bien ciblée par le code ?

Je ne sais pas si vous avez bien compris ce que je cherche à faire, alors dans le doute j'essaye de réexpliquer:
J'ai un site permettant de présenter des images en haute définition, mais je souhaite pour améliorer le confort faire en sorte que lorsque l'on passe en mode viewers sur le site, c'est à dire qu'on appuie sur la petite croix qui fait disparaître le menu à droite, le navigateur passe en plein écran, pour que l'image prenne tout l'écran.
Vous ne pouvez probablement pas comprendre sans voir le site en fait.

Voila, pour les codes d'erreurs dès que je suis sur mon ordi je vérifie et je vous dis les éventuelles erreurs présentes.

**SylvainPV** · 21/07/2016, 20h00

Tu as lu l'entrée de la FAQ que j'ai posté en lien ?

Tu as donné l'URL de ton site, donc on peut voir l'erreur : index.html:135 Uncaught TypeError: Cannot read property 'addEventListener' of null

Je pensais que tu avais mis ton code dans main.js mais tu l'as mis dans une balise script en inline dans index.html. C'est cette balise là qu'il faut déplacer alors. Mais le plus propre aurait été de mettre tous les scripts au même endroit, dans la fonction init de main.js par exemple?

**ColChope** · 21/07/2016, 20h35

Ce n'est pas moi qui ai fait la partie JS, j'aurai du le préciser, autant pour moi.

Sur la FAQ que tu m'as envoyé ils disent de mettre le script dans body, pas après, par contre.

Donc si j'ai bien compris, tu me demandes de mettre la balise inline avec le code juste après le </body> ?
Si oui, j'ai essayé de déplacer tout ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
			function toggleFullScreen() {
			  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
			   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
				if (document.documentElement.requestFullScreen) {  
				  document.documentElement.requestFullScreen();  
				} else if (document.documentElement.mozRequestFullScreen) {  
				  document.documentElement.mozRequestFullScreen();  
				} else if (document.documentElement.webkitRequestFullScreen) {  
				  document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
				}  
			  } else {  
				if (document.cancelFullScreen) {  
				  document.cancelFullScreen();  
				} else if (document.mozCancelFullScreen) {  
				  document.mozCancelFullScreen();  
				} else if (document.webkitCancelFullScreen) {  
				  document.webkitCancelFullScreen();  
				}  
			  }  
			}
 
 
			document.querySelector( ".toggle" ).addEventListener( "click", function( oEvent ) {
				oEvent.preventDefault(); // empêche le comportement par défaut du lien
				toggleFullScreen();
			} );
	</script>

pour le mettre juste après.

Je suis désolé je ne connais pas très bien le JS je ne pensais pas que ça poserai tant de problème :/

Sinon, ça me semble judicieux de déplacer ce code dans le main.js, mais donc on est bien d'accord que si je souhaite faire ça je n'ai qu'à couper-coller le code ci-dessus et à le placer dans main.js n'importe où (pas dans une autre fonction bien sûr), en prenant soin d'enlever les balises <script> ?

Merci pour votre aide !

**SylvainPV** · 21/07/2016, 23h04

Pour être clair, tu peux mettre ce script n'importe où du moment qu'il est après l'élément que tu essaies de sélectionner. Ton erreur vient du fait que le script essaie de récupérer un élément qui est plus bas dans le code HTML, et donc pas encore interprété par le navigateur. Juste avant ou juste après la fermeture du body, peu importe.

**ColChope** · 22/07/2016, 05h45

Et pourtant en le plaçant même après le </body>, ça ne fonctionne pas :/

**SylvainPV** · 22/07/2016, 10h10

Sans le nouveau code ni les messages d'erreurs en console, le "ça ne marche pas" ne va pas nous être utile pour t'aider davantage

**ColChope** · 22/07/2016, 15h31

Le nouveau code est maintenant en ligne, et en ce qui concerne le message d'erreur, il n'y en a aucun, pourtant ça ne marche toujours pas.

**NoSmoking** · 23/07/2016, 08h51

Bonjour,
le constat est que ton élément est ajouté dynamiquement, voir fichier main.js, c'est donc dans ce fichier que tu dois ajouter ton gestionnaire complémentaire.

**ColChope** · 23/07/2016, 13h33

Le code est ajouté dans Main.js, à la toute fin avant le "}; return _; })(jQuery); main.init();" (après ça ne fonctionne pas).
On se rapproche mais c'est pas encore ça, là l'écran reste gris foncé et rien d'autre ne s'affiche.

Je vous laisse le constater ici (changement de lien, l'autre site étant down).

**NoSmoking** · 23/07/2016, 15h24

Le code est ajouté dans Main.js, à la toute fin avant le "}; return _; })(jQuery); main.init();"

il ne faut pas faire n'importe quoi quand même !

Tu crées/déclares ta fonction, de façon standard, puis tu ajoutes l'événement proprement dans le script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// Toggle.
_.$toggle.on('click', function () {
    _.toggle();
    // appel de ta fonction
    toggleFullScreen();
});

Mettre en plein écran lors d'un clic sur un bouton

JavaScript

Discussions similaires

Partager

Partager