Onglet flottant

[ChiNoAmePower]

Bonjour !

J'aurais voulu intégrer un onglet flottant, en bas à droite de l'index de mon forum. J'ai trouvée le code d'un onglet, mais il s'agit d'un onglet latéral et je ne sais pas comment le modifier, de sorte à se qu'il se retrouve à l'emplacement que je souhaite.

Template Overhall Header

Code:


<table cellspacing="0" cellpadding="0" id="ongleton">
  <tbody>
    <tr>
      <td>
 <div class="onglet_contenuon">
  Contenu de l'onglet
</div>
      </td>
      <td>
 <div  id="onglet_ouvrir" onclick="document.getElementById('ongleton').style.left='0px'; document.getElementById('onglet_ouvrir').style.display='none'; document.getElementById('onglet_fermer').style.display='block'">
  Ouvrir
</div>
<div  id="onglet_fermer" style="display: none;" onclick="document.getElementById('ongleton').style.left='-212px'; document.getElementById('onglet_fermer').style.display='none'; document.getElementById('onglet_ouvrir').style.display='block'">
  Fermer
</div>
      </td>
    </tr>
  </tbody>
</table>

CSS

Code:

/*Tableau de l'Onglet Flottant*/
#ongleton {
  position: fixed;
  height: 90%; /*Hauteur de l'onglet*/
  top: 5%;
  left: -212px;
  z-index: 999;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
/*Contenu de l'Onglet Flottant*/
.onglet_contenuon {
  width: 200px;
  height: 100%;
  padding: 5px;
  background-color: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: Time New Roman;
  border: 2px #6993BE solid;
  border-left: none;
  border-radius: 0 30px 30px 0;
  -moz-border-radius: 0 30px 30px 0;
  -o-border-radius: 0 30px 30px 0;
  -htm-border-radius: 0 30px 30px 0;
  -webkit-border-radius: 0 30px 30px 0;
}
/*Boutons Ouvrir-Fermer l'Onglet Flottant*/
#onglet_ouvrir, #onglet_fermer {
  position: relative;
  z-index: 999;
  width: 100px;
  height: 20px;
  background-color: #1B2836;
  border: 2px solid #6993BE;
  border-bottom: none;
  text-align: center;
  color: #9BB9D9;
  padding: 5px;
  padding-top: 10px;
  border-radius: 30px 30px 0 0;
  -moz-border-radius: 30px 30px 0 0;
  -o-border-radius: 30px 30px 0 0;
  -htm-border-radius: 30px 30px 0 0;
  -webkit-border-radius: 30px 30px 0 0;
  margin-left: -41px; /*Pour coller le bouton contre l'onglet*/
  transform:rotate(90deg); /*Pour tourner le texte sur le côté*/
  -ms-transform:rotate(90deg); /*Pour tourner le texte sur le côté (IE)*/
  -webkit-transform:rotate(90deg); /*Pour tourner le texte sur le côté (Chrome et Safari)*/
}

Merci d'avance pour votre aide !

[ChiNoAmePower]

up

[ChiNoAmePower]

up

[Evaliah]

Bonsoir Chi,

Ta demande est un peu vague sans illustration, peux-tu joindre une image du résultat actuel et une autre indiquant l'endroit où tu voudrais ton onglet ?

[ChiNoAmePower]

Bien sûr, voilà le résultat actuel :

Spoiler:

Et le résultat que je souhaiterais obtenir :

Spoiler:

[Evaliah]

Ah ok je vois ce que tu veux faire

Je vais te donner à la place de tout ton code un code plus simple, plus compréhensible et qui te permettra plus de souplesse par la suite.

Dans ton template tu vas remplacer ce que tu as mis par ceci :

Code:

<div class="onglet_fixe">
<div class="titre_onglet_fixe">Ouvrir</div>
<div class="contenu_onglet_fixe contenu_invisible">Contenu de l'onglet</div>
</div>

Dans ta partie css tu vas remplacer ce que tu as mis par ceci :

Code:

.onglet_fixe {
position: fixed;
z-index: 100;
right: 2px;
bottom: 0;
width: 250px;
max-width: calc(X - 2px);
}

.contenu_onglet_fixe {
  padding: 5px;
  background: #1B2836;
  color: #9BB9D9;
  font-size: 13px;
  font-family: 'Times New Roman';
  border: 2px #6993BE solid;
  border-bottom: none;
}

.contenu_invisible {
display: none;
}

.titre_onglet_fixe {
width: 80%;
margin: auto;
 background: #1B2836;
  border: 2px solid #6993BE;
  border-bottom: none;
  text-align: center;
  color: #9BB9D9;
  padding: 10px 5px 5px;
  border-radius: 30px 30px 0 0;
  cursor: pointer;
}

Attention :
Dans ce qui concerne .onglet_fixe tu as une largeur maximum (max-width) avec un X pour valeur.
Sur ton forum tu as défini une largeur pour ce qui est compris entre les deux traits violets, et cette largeur est probablement en pourcentage.
Le X est égal à : (100-[la valeur en pourcentage de la largeur entre tes traits])/2
Par exemple si ta largeur entre les traits violets est de 80% cela donne :
X = (100-80)/2 = 10
Tu vas, dans cet exemple, remplacer X par 10% (en mettant bien le %).
Le -2px correspond à la valeur inscrite pour le paramètre "right".
Ce max-width va permettre que ton onglet ne chevauche pas ce qui est compris entre tes traits violets si l'espace entre le bord droit et le trait violet de droite était inférieur à 252px.



Ensuite tu vas aller dans Modules puis tout en bas dans Gestion des codes Javascript.
Là tu vas créer un nouveau javascript.
En titre tu mets par exemple Onglet fixe si ce nom te parle et tu coches "sur toutes les pages".
Dedans tu mets ce code :

Code:

$(function(){

$(".titre_onglet_fixe").click(function(){
$(this).toggleClass("fermer");
$(this).parent().find(".contenu_onglet_fixe").toggleClass("contenu_invisible");

if($(this).hasClass("fermer")){
$(this).text("Fermer");
}

else {$(this).text("Ouvrir");}
});

});

Et tu valides

Avec tout ça tu n'as pas besoin de te soucier de la hauteur de ton contenu, puisque tout va s'adapter automatiquement à celle-ci

Concernant les paramètres "décoratifs" dans le css (couleurs, taille...) j'ai repris ce qu'il y avait dans ton ancien css, après tu adaptes en fonction de ce que tu veux, ce n'est pas difficile

[ChiNoAmePower]

Merci beaucoup pour ton aide !
Grace à toi mon onglet est installé et fonctionnel !