Discussion :

[artenis]

Bonjour, je voudrais associer le code de Fullscreen Api à celui d'un toggle switch comme iOS. Voici les codes sur lesquels je me base.
http://jsfiddle.net/lesson8/VbfPC/

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
function launchFullscreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}
 
function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

https://www.jqueryscript.net/form/jQ...LC-Switch.html

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
// triggered each time a field changes status
$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
  var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
  console.log('field changed status: '+ status );
});
 
// triggered each time a field is checked
$('body').delegate('.lcs_check', 'lcs-on', function() {
  console.log('field is checked');
});
 
// triggered each time a is unchecked
$('body').delegate('.lcs_check', 'lcs-off', function() {
  console.log('field is unchecked');
});

Je n'arrive pas à décomposer le code pour réussir à les associer, à chaque fois google chrome m'indique une erreur sur le element ou document du Fullscreen Api.
J'ai également trouvé des version jQuery de Fullscreen Api, mais là je je suis totalement dépassé.
De plus j'ai cru lire que Fullscreen Api n'est pas permis au chargement de la page : activation uniquement au click.
Mais est ce que du switch peut être considéré comme un "click" ?

Mon but est de prendre le moins de place pour activer/desactiver le mode plein écran et qu'il soit simple à comprendre : Toggle switch est pour moi la solution.

Si vous pouvez m'aider à trouver une solution. merci
L'experience plein écran pour l'internaute devrait être obigatoire en 2018 pour les sites créatifs/originaux.

[Toufik83]

il est indiqué dans la documentation qu'il faut charger jQuery d'abord ET le fichier lc_switch.js <script src="lc_switch.js"></script> y compris le css <link rel="stylesheet" href="lc_switch.css">.

tu les as chargé?

[artenis]

Bonjour Toufik83.
Merci de me répondre. Mais mon problème n'est pas de faire fonctionner séparément chaque script Fullscreen API et Toggle switch (il marche très bien séparément), mais de les associer pour avoir au résultat:

"Je clique sur le bouton interrupteur ON/OFF et j'active le mode fullscreen, dès que je reclique sur ON/OFF le mode fullscreen se désactive."

Sachant que j'ai cru lire que l'API Fullscreen n'est autorisé à fonctionné qu'à l'action "click" est-il tout de même possible d'associer/de faire fonctionner ces deux scripts ?

J'aimerais aussi savoir si les navigateurs permettent de passer en mode fullscreen dès le chargement de la page. ?

[Toufik83]

Sachant que j'ai cru lire que l'API Fullscreen n'est autorisé à fonctionné qu'à l'action "click" est-il tout de même possible d'associer/de faire fonctionner ces deux scripts ?

c'est bien possible que le script fonctionne aussi en appuyant sur une touche de clavier (entrer,espace...).

associer les deux scripts est bien faisable oui, il faut juste cibler le bon élément et le mettre en tant que paramètre dans la fonction qui lance le mode plein écran :

Code html :

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

<input type="checkbox" class="lcs_check" />

Code jQuery :

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
29
30
31
32
33
34
35
36
37
38
39
40
 
function launchFullscreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}
 
function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}
 
 
$(document).ready(function(){
	$('input.lcs_check').lc_switch();
	$('body')
	.delegate('.lcs_check', 'lcs-statuschange', function() {
		var status = ($(this).is(':checked')) ? 'checked' : 'unchecked';
		console.log('field changed status: '+ status );
	})
	.delegate('.lcs_check', 'lcs-on', function() {//active le mode
		launchFullscreen($(document).get(0).documentElement);//l’élément cible
		console.log('field is checked');
	})
	.delegate('.lcs_check', 'lcs-off', function() {//annule le mode
	  cancelFullscreen(); 
	  console.log('field is unchecked');
	});
 
 
});

J'aimerais aussi savoir si les navigateurs permettent de passer en mode fullscreen dès le chargement de la page. ?

pour des raisons de sécurité, malheureusement ce n'est pas possible .

[Invité]

Bonjour,

ce n'est pas bien compliqué :

Code html :

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

1
2
3
4
5
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Sliding-Toggle-Switches-LC-Switch/lc_switch.js"></script>
	<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Sliding-Toggle-Switches-LC-Switch/lc_switch.css">
...
           <p><input type="checkbox" name="check-1" value="4" class="lcs_check" autocomplete="off" /></p>

Code JavaScript :

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
29
30
$(document).ready(function(e) {
	$('input').lc_switch();
 
	$('body').delegate('.lcs_check', 'lcs-statuschange', function() {
		if($(this).is(':checked')){
			launchFullscreen(document.documentElement); // the whole page
		} else {
			cancelFullscreen();
		}
	});
});
function launchFullscreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}
 
function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

Concernant l'ouverture en plein écran au chargement de la page :

"La requête d’accès au plein écran a été refusée, car Element.requestFullScreen() n’a pas été appelée à l’intérieur d’un gestionnaire d’évènement généré par l’utilisateur."

Il faut laisser la décision à l'utilisateur.

D'autre part, beaucoup de personnes NE savent PAS quitter le mode "plein écran" !

[artenis]

Merci Toufik83 et jreaux62.

Jreaux, ta solution fonctionne à 80% mais cela n'est pas dû au code. Merci

En mode plein écran de l'ordinateur (navigateur Chrome uniquement) la desactivation (cancelFullscreen) de Fullscreen Api ne se fait pas : il faut faire "echap" ensuite cliquer deux fois sur (shift+command+F) Mac.
L'alerte du navigateur Chrome s'affiche bien ("Appuyez sur echap pour quitter le mode plain écran") à chaque fois que je clique sur le mode "ON" mais en mode "OFF" il ne se passe rien, le switch fonctionne dans le vide.

Je n'ai pas de mesage d'erreur dans la console !

Est-ce un bug connu, est-ce un bug de mon navigateur ?
Sur (Safari, Opera, Firefox) ça marche correctement quelques soit le mode de la fenêtre ! je testerais ce soir sur IE 11.

Je n'ai pas réussi à mettre mon exemple sur jsfiddle (impossible d'avoir un lien valide de Github)

[Toufik83]

je viens de tester les deux solutions sous chrome, le résultat est bon, peut être que tu as un problème dans ton navigateur chrome, essaie de le réinstaller si c'est le cas...

l'exemple est ICI.

[artenis]

Bonjour.
Après réinstallation de chrome (dernière version) et vidage du cache le problème persiste uniquement sur mon site web.
Impossible de sortir du mode Fullscreen Api lorsque le navigateur Chrome est en mode étiré ( le fullscreen du navigateur, les onglets sont visibles ).
Aucune erreur n'est annoncée dans la console !
Etant sur Wordpress, j'ai tenté la désactivation de tout les plugins mais cela n'a rien changé.
Mon script jquery pour Fullscreen Api est pourtant le même que celui de Toufik83 sur Jsfiddle !

Le problème intial est résolu. merci à Toufik83 et Jreaux62.

[Toufik83]

cette page peut t'être utile.