Onglet flottant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Onglet flottant

Message par ChiNoAmePower le Dim 3 Avr 2016 - 23:25

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 !


Dernière édition par ChiNoAmePower le Dim 10 Avr 2016 - 13:52, édité 1 fois

ChiNoAmePower
*

Messages : 38
Inscrit(e) le : 29/03/2014

http://madness-wonderland.forumactif.org/
ChiNoAmePower a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet flottant

Message par ChiNoAmePower le Mar 5 Avr 2016 - 13:03

up

ChiNoAmePower
*

Messages : 38
Inscrit(e) le : 29/03/2014

http://madness-wonderland.forumactif.org/
ChiNoAmePower a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet flottant

Message par ChiNoAmePower le Jeu 7 Avr 2016 - 23:38

up

ChiNoAmePower
*

Messages : 38
Inscrit(e) le : 29/03/2014

http://madness-wonderland.forumactif.org/
ChiNoAmePower a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet flottant

Message par Evaliah le Ven 8 Avr 2016 - 20:32

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 ?

Evaliah
****

Féminin
Messages : 317
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet flottant

Message par ChiNoAmePower le Sam 9 Avr 2016 - 19:58

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



Et le résultat que je souhaiterais obtenir :
Spoiler:


ChiNoAmePower
*

Messages : 38
Inscrit(e) le : 29/03/2014

http://madness-wonderland.forumactif.org/
ChiNoAmePower a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet flottant

Message par Evaliah le Dim 10 Avr 2016 - 1:10

Ah ok je vois ce que tu veux faire Smile

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 Smile

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 Smile

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 Smile

Evaliah
****

Féminin
Messages : 317
Inscrit(e) le : 14/01/2013

http://lestroisiles.forumactif.org/
Evaliah a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet flottant

Message par ChiNoAmePower le Dim 10 Avr 2016 - 13:51

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

ChiNoAmePower
*

Messages : 38
Inscrit(e) le : 29/03/2014

http://madness-wonderland.forumactif.org/
ChiNoAmePower a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum