Jump to content
  • 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 !

Système de fullscreen client


Solife
 Share

Recommended Posts

  • Administrateur

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: 

 

 


Hidden Content

    Reply to this topic to see the hidden content.
/hebergement/images/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:

J'essaie de m'adoucir, mais l'humain me rend noir.

Link to comment
Share on other sites

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

Besoin d'une ressource pour ton rétro ? Un CMS ? Un Addon ? 

 

1490721717-ch.png

 

Besoin d'une base de donnée pour ton rétro ? Un dédipass une base de donnée pendant 4 mois !

Alors rejoins moi vite sur http://comahost.com

https://www.facebook.com/comahost/

 

1490976330-capture-d-ecran-2017-03-31-a-

 

Les crocodiles en force !

 

crocnhammocks.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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: 

  Révéler le contenu masqué

 


Hidden Content

    Reply to this topic to see the hidden content.
/hebergement/images/1483075148.png">
 

 

 

Enfin, passons au code à ajouter dans votre client:

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

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

Link to comment
Share on other sites

  • 3 weeks later...

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

Link to comment
Share on other sites

  • 7 months later...
  • 6 months later...

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 !

 

Hidden Content

    Reply to this topic to see the hidden content.

header-light.png

|

Créer un rétro-habbo n'a jamais été aussi facile

|

https://habbo.cloud/

 

inshare: Ressources & Aide Habbo !

|

Je t'ai rendu utile ? Réagis à mon commentaire/sujet :ok:!

 

Link to comment
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 !

 

Hidden Content

    Reply to this topic to see the hidden content.

Salut,

Ce sujet n'est pas un support.

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

 

Ceci est un message automatique.

Ancien Responsable des modérateurs

Mon discord : Nagasaki#5318
 
16 août 2017   ->  16 février 2020
Je m'en vais ..

 

 

                                   

                                         

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...