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

By Solife,
in Tutorials

 Share

Recommended Posts

  • Administrateur
Solife Membre mythique

Solife 1,340

Posted
  • Administrateur
Posted

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
Nico Membre semi-pro

Nico 41

Posted
Posted

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
Aquazus Membre avancé

Aquazus 12

Posted
Posted

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
Monde Membre Pro

Monde 68

Posted
Posted
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...
Wako Membre semi-pro

Wako 8

Posted
Posted

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...
Nebhemarn Membre avancé

Nebhemarn 3

Posted
Posted

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
Nagasaki Membre légendaire

Nagasaki 117

Posted
Posted
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
Go to topic listing
×
×
  • Create New...