Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Please do not post a message for the purpose of insulting, incitement to hatred, sexual remarks and any other which does not respect our terms of use !
Sign in to follow this  
Solife

Système de fullscreen client

Recommended Posts

Admin
Admin

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: 

 

 


1483075148.png
 

 

 

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 :bye:

Share this post


Link to post
Share on other sites
Vétéran

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

Share this post


Link to post
Share on other sites
Vétéran

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

Share this post


Link to post
Share on other sites
Vétéran

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.

Share this post


Link to post
Share on other sites
Donateur
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: 

Please login or register to see this link.

Révéler le contenu masqué

 


1483075148.png
 

 

 

Enfin, passons au code à ajouter dans votre client:

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

Please login or register to see this link.

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 :bye:

Merci du partage :)

Share this post


Link to post
Share on other sites
Premium

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

Share this post


Link to post
Share on other sites
MEMBRE VIP

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 !

 

Capture.PNG

Share this post


Link to post
Share on other sites
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 !

 

Capture.PNG

Salut,

Ce sujet n'est pas un support.

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

 

Ceci est un message automatique.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...