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