Système de fullscreen client

[Solife 1 348]

Salut !

 

Je vous partage un système de plein écran que j'ai trouvé sur devbest, je l'ai tester, et c'est fonctionnel sans soucis ;)

Je l'ai également pris, comme il ne prends pas énormément de place, puis il y a une croix pour le fermer.

Voici à quoi ressemble une fois sur le client: 

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

 

 

Enfin, passons au code à ajouter dans votre client:

(perso, je l'ai ajouter juste en dessous de <title></title>)

 

 

<div id="client"></div>
<div style="margin-bottom: 0px; position: fixed; z-index: 10;" class="alert alert-dismissible alert-primary">
<button style="margin-top: 12.5px;" type="button" class="close" data-dismiss="alert">&times;</button>
<a target="_blank" max-height: 5px; width: 88px; margin-top: 4px;" class="navbar-brand" href="/me"></a>
<a onclick="toggleFullScreen()" style="margin-top: 7px; margin-left: 15px;" class="btn btn-success">Plein écran</a>
</div>
<script type="text/javascript" src="/app/tpl/skins/habbo/js/bootstrap.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/paper/bootstrap.css" rel="stylesheet" type="text/css">
<script>
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>
 

 

 

Bonne journée

[Nico 41]

Merci pour ce partage Jason, c'est sympa :)

[Invité]

Merci, je sais que beaucoup de personne on du mal à intégrer cette fonction à leur client.

[Karzing 3]

J'aime pas personnellement 

[Aquazus 12]

C'est lourd, ca réintègre boostrap pour rien sur la page client :/

Sérieusement.. Qui intègre le js et le css de bootstrap JUSTE POUR UN BOUTON? xD

Bref, je prend pas, je vais faire mon propre css plutôt que de charger une page de librairies inutiles.

[Monde 69]

Le 30/12/2016 à 06:21, Jason a dit :

Salut !

 

Je vous partage un système de plein écran que j'ai trouvé sur devbest, je l'ai tester, et c'est fonctionnel sans soucis ;)

Je l'ai également pris, comme il ne prends pas énormément de place, puis il y a une croix pour le fermer.

Voici à quoi ressemble une fois sur le client: 

Pour avoir accès à ce lien, merci de vous connecter.

Révéler le contenu masqué

 

Pour avoir accès à cette image, merci de vous connecter.

 

 

 

Enfin, passons au code à ajouter dans votre client:

(perso, je l'ai ajouter juste en dessous de <title></title>)

Pour avoir accès à ce lien, merci de vous connecter.

Révéler le contenu masqué

 

<div id="client"></div>
<div style="margin-bottom: 0px; position: fixed; z-index: 10;" class="alert alert-dismissible alert-primary">
<button style="margin-top: 12.5px;" type="button" class="close" data-dismiss="alert">&times;</button>
<a target="_blank" max-height: 5px; width: 88px; margin-top: 4px;" class="navbar-brand" href="/me"></a>
<a onclick="toggleFullScreen()" style="margin-top: 7px; margin-left: 15px;" class="btn btn-success">Plein écran</a>
</div>
<script type="text/javascript" src="/app/tpl/skins/habbo/js/bootstrap.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/paper/bootstrap.css" rel="stylesheet" type="text/css">
<script>
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>
 

 

 

Bonne journée

Merci du partage :)

[Wako 8]

Il y à un bouton pour revenir à l'accueil (me.php) qui n'est pas voyant.. Mais sinon sa reste utile et jolie design. Merci du partage

[gringo 0]

Merci :D

[Eskemo 0]

Merci du partage

 

A intégrée sur quel page ? Client.php ?

 

Merci !

[Nebhemarn 3]

Bonsoir @Solife,

 

Merci d'abord de ce partage qui ma rendu utile, mais qui ne rend pas le même résultat que vous, voici ce que j'obtient (screen ci-dessous).

 

Merci de votre aide, à bientôt !

 

Pour avoir accès à cette image, merci de vous connecter.

[Nagasaki 117]

il y a 14 minutes, Nethyr a dit :

Bonsoir @Solife,

 

Merci d'abord de ce partage qui ma rendu utile, mais qui ne rend pas le même résultat que vous, voici ce que j'obtient (screen ci-dessous) 

Merci de votre aide, à bientôt !

 

Pour avoir accès à cette image, merci de vous connecter.

Salut,

Ce sujet n'est pas un support.

Merci de créer un sujet pour vos problèmes.

 

Ceci est un message automatique.