Discussion :

[ColChope]

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]

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

[ColChope]

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]

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]

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]

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

[ColChope]

Où ça ? Sur quel fichier ?

[SylvainPV]

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

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