Type d'infobulle + Onglets des catégories Bouton_activeType d'infobulle + Onglets des catégories Bouton_hoverType d'infobulle + Onglets des catégories Fb-hoverType d'infobulle + Onglets des catégories Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Type d'infobulle + Onglets des catégories EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Type d'infobulle + Onglets des catégories EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Type d'infobulle + Onglets des catégories EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Type d'infobulle + Onglets des catégories EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Type d'infobulle + Onglets des catégories EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Type d'infobulle + Onglets des catégories EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Type d'infobulle + Onglets des catégories EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Type d'infobulle + Onglets des catégories EmptyVen 03 Fév 2023, 17:22 par Krager

-24%
Le deal à ne pas rater :
PC Portable Gaming 15.6″ Medion Erazer Deputy P40 (FHD 144Hz, RTX ...
759.99 € 999.99 €
Voir le deal

Partagez
 

Type d'infobulle + Onglets des catégories

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Salut salut Nihil ! *Meurt*

J'espère que tu vas bien ! Type d'infobulle + Onglets des catégories 306373

J'espère que tu vas pouvoir venir à ma rescousse cette fois encore, car j'ai deux questions !

N°1
Je suis tombée là dessus par hasard, et j'aimerai beaucoup donner le même effet. En gros, tu passes ton curseur sur une des images et les infos dans la fenêtres juste en dessous se mettent à jour en fonction du contenu de l'image déterminé. Ce doit être un type d'infobulle, mais je ne sais pas trop comment "figer" cette bulle, justement.

Capture : https://i.servimg.com/u/f39/12/03/49/16/captur17.png

N°2
Je voulais faire des catégories en onglets pour mon forum, et je suis tombée là dessus : http://shared-development.clanteam.com/onglet.html
Sauf que je n'ai pas accès au tuto car je ne suis pas inscrite sur Never Utopia, et honnêtement, m'inscrire pour un tuto... bof quoi. Alors oui on a bien le générateur de la table, mais on a pas le JS ni le CSS qui va avec.
D'autant plus que il ne dit pas quelle template il faut modifier, et si il faut modifier l'index box (ce qui est fort probable par déduction), j'ai déjà ton code à toi pour l'histoire du "0 messages dans 0 sujets", en une ligne qui me permettait de supprimer les colonnes, et je voudrais le conserver lui aussi.

Merci d'avance Super Nihil ! Type d'infobulle + Onglets des catégories 73120010
MessageSujet: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMer 17 Sep 2014, 04:05
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Alors pour le problème n°1 tu peux le faire de différentes manière possibles. Si tu as déjà ton code tout fait avec un système d'infobulles, puis juste à "figer" l'infobulle, tu peux le mettre ici ? Comme ça je te montrerai comment faire pour figer l'infobulle ^___^.


MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMer 17 Sep 2014, 09:04
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Bah écoute j'ai ça comme code pour l'infobulle :

Code:
<div class="infobulle"><img src="lien image" /><br /><span>Contenu</span></div>

Code:
 
.infobulle{
position: relative;
z-index: 0;}
 
.infobulle:hover{
background-color: transparent;
z-index: 50;}
 
.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
 
.infobulle span img{
border: 2px;
padding: 5px;}
 
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}

J'en profite car j'ai un autre petit "soucis". J'ai fait un panneau coulissant sur le forum concerné, qui accueillera donc ces infobulles.
Mais :
- Impossible de le mettre en "scroll" car sinon il ne prends plus en compte les valeurs top et left que je lui ai donné, et il se retrouve tout en bas à gauche dans un coin.
- Il faudrait que je le fixe comme il apparaît ici :
https://i.servimg.com/u/f39/12/03/49/16/captur18.png

Mais je me suis rendu compte que lorsqu'on étire la page pour l'agrandir, ben on obtient ça :
https://i.servimg.com/u/f39/12/03/49/16/captur19.png

Il n'est plus contre la bordure.

Et enfin, il me semblait me souvenir que si on remplaçait le "onClick" par "MouseOver", ce permettrait d'ouvrir le volet sans avoir à cliquer dessus, juste en passant le curseur de la souris. D'ailleurs il faudrait réellement qu'il coulisse, et pas qu'il s'ouvre "brutalement", comme il le fait actuellement.
Le code JS :
Code:
jQuery(document).ready(function () {
    jQuery('body').append('<table style="position: fixed; top: 450px; left: 1312px;background-color: #2c2f24;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 300px; height: 200px; display: none; padding: 5px;" marginwidth="0" marginheight="0" frameborder="0">
     
          Texte
     
      </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});

Merci pour le MP, je tente de mettre en place tout ça. Wink

Forum :
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMer 17 Sep 2014, 09:19
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Alors pour l'infobulle j'ai un peu remanié ton code pour arriver à quelque chose comme ça :


Pour le placement de l'élément, pourrais tu essayer ce code là s'il te plait (dans le JS)
Code:
$(function(){
    var message = 'Test de message';
    $('.bodylinewidth').append('<div class="fake-right"><div class="fixed-top">' + message + '</div></div>');
});

Et à mettre dans le CSS :
Code:
.bodylinewidth {
    position: relative;
}

.fake-right {
    position: absolute;
    right: -15px;
}

.fixed-top {
    position: fixed;
    top: 400px;
}

Ce code est un test juste pour voir si le placement fonctionne Wink

Pour la suite on verra après (^-^)
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMer 17 Sep 2014, 16:21
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Ok alors ça me semble bon, tout apparaît dans mon panneau coulissant, à l'exception d'un "Test de message" qui apparaît au dessus. x)
Mais pour le reste ça semble correct.
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyJeu 18 Sep 2014, 03:56
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Je me suis mal exprimée XD.
Citation :
Mais je me suis rendu compte que lorsqu'on étire la page pour l'agrandir, ben on obtient ça :

Si tu étires la page, le ""Test de message" reste-t-il bien placé Smile ?
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyJeu 18 Sep 2014, 07:23
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Ah j'avais pas compris ! xD
Oui oui il reste parfaitement bien placé. Smile
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyJeu 18 Sep 2014, 08:25
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Ok donc on va y aller petit à petit pour modifier le panneau coulissant Wink

Code:
$(function(){
    var message = '<div class="panneau is-open">TON CONTENU ICI</div>';
    $('.bodylinewidth').append('<div class="fake-right"><div class="fixed-top">' + message + '</div></div>');
});

Commence par remplacer TON CONTENU ICI par le contenu que tu veux mettre. Pense aussi à rajouter dans ton CSS le style pour donner un fond, des dimensions, etc à ton panneau Wink (on fait ici l'état ouvert, après on fera l'état fermé)
Code:
.panneau {
  /* ton CSS */
}

Une fois que cela fonctionne, pourra tu poster à la suite ton code JS + ton code CSS (par rapport au panneau) pour qu'on fasse la partie "fermée" + l'ajout de boutons Ouvrir / fermer Smile ?
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyVen 19 Sep 2014, 15:48
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Alors si j'ai bien compris... Ce dont je ne suis absolument pas sûre parce que honnêtement, le JS et moi on fait 2 pour l'instant. x)

Code:

$(function(){
    var message = '<div class="panneau is-open">
<div class="infobulles_container">
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 1</span>

    </div>
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 2</span>

    </div>
</div></div>';
    $('.bodylinewidth').append('<div class="fake-right"><div class="fixed-top">' + message + '</div></div>');
});

Code:

.panneau {
 width: 250px;
 height: 150px;
 background-color: #2c2f24;
 padding: 10px;
 align: center;
}

(Je voulais centrer le contenu du panneau, d'où le align:center mais ça ne fonctionne pas... :O )



Pour la première version du panneau, si j'ai bien compris ce que tu me demande, ce sont ces codes là :

Code:
jQuery(document).ready(function () {
    jQuery('body').append('<table style="position: fixed; top: 450px; left: 1312px;background-color: #2c2f24;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 300px; height: 200px; display: none; padding: 5px;" marginwidth="0" marginheight="0" frameborder="0">
     
          <div class="infobulles_container">
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 1</span>

    </div>
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 2</span>

    </div>
</div>
     
      </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});

Code:
.bodylinewidth {
    position: relative;
}

.fake-right {
    position: absolute;
    right: -15px;
}

.fixed-top {
    position: fixed;
    top: 400px;
}
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyVen 19 Sep 2014, 16:15
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Ce code là tu peux le retirer pour l'instant, on va dire qu'on en a plus besoin vu qu'on va travailler sur le nouveau code JS maintenant ^^

Code:
jQuery(document).ready(function () {
    jQuery('body').append('<table style="position: fixed; top: 450px; left: 1312px;background-color: #2c2f24;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 300px; height: 200px; display: none; padding: 5px;" marginwidth="0" marginheight="0" frameborder="0">
   
          <div class="infobulles_container">
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 1</span>

    </div>
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 2</span>

    </div>
</div>
   
      </div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});

Juste pour te prévenir, normalement ceci ne devrait pas marcher dans un code JS :
Code:
var message = '<div class="panneau is-open">
<div class="infobulles_container">
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 1</span>

    </div>
    <div class="infobulle">
        <img src="http://placekitten.com/g/50/50" />
        <br /><span>Contenu 2</span>

    </div>
</div></div>';

Les retours à la ligne devraient retourner une erreur. Néanmoins tu as de la chance, sur FA les codes JS sont minifiés : tous les retours à la ligne + espaces en trop sont enlevés... Du coup ton code redevient valide \ o /

Citation :
(Je voulais centrer le contenu du panneau, d'où le align:center mais ça ne fonctionne pas... :O )
Pour centrer le contenu, c'est text-align: center; ^^

J'ai vu que dans le CSS de .panneau tu avais mis : margin-left: -15px. Tu peux l'enlever, il suffit de changer cette partie là :
Code:
.fake-right {
    position: absolute;
    right: -15px;
}
Tu remplaces -15px par 0 et ça sera bon ^^

Car sinon on décale à droite de 15px... Puis on décale à gauche de 15px XDDD

Maintenant on va ajouter un bouton "Fermer". Attention il ne marche pas encore c'est juste visuel :
Code:
.panneau.is-open {
    position: relative;
}

.panneau.is-open:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 30px;
    right: -30px;
    bottom: 1px;
    background: url("http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png");
}

Cela fonctionne-t-il ^^ ?
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyVen 19 Sep 2014, 17:03
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Ah d'accord ! C'est bon à savoir alors. D'ailleurs quand on aura réglé cette histoire de panneau, j'aimerai beaucoup que tu m'explique les parties que l'on doit impérativement retrouver dans un code JS, et à quoi elles servent. (On pourra se baser sur ton tout premier code avec "Test de message")

Désolée, j'ai jamais eu la logique du "text-align" quand il s'agit d'images. Ce qui en l'occurrence est le cas. x)

Ouais et ben c'était pour voir si il suivait bien le mouvement et si il était docile. \O/ C'est pour ça que je l'ai fait aller à droite et pis à gauche et... Bon ok j'arrête. xD

Oui ça fonctionne nickel. Smile
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptySam 20 Sep 2014, 04:11
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Citation :
Ah d'accord ! C'est bon à savoir alors. D'ailleurs quand on aura réglé cette histoire de panneau, j'aimerai beaucoup que tu m'explique les parties que l'on doit impérativement retrouver dans un code JS, et à quoi elles servent. (On pourra se baser sur ton tout premier code avec "Test de message")

Oui on le construit petit à petit ^^ et ensuite je détaillerai comme je peux x)

On va donc retravailler un petit peu le code :p

On va remplacer :
Code:
$('.bodylinewidth').append('<div class="fake-right"><div class="fixed-top">' + message + '</div></div>');

Par :
Code:
$(function(){
    var message = '<div class="infobulles_container">
        <div class="infobulle">
            <img src="http://placekitten.com/g/50/50" />
            <br /><span>Contenu 1</span>

        </div>
        <div class="infobulle">
            <img src="http://placekitten.com/g/50/50" />
            <br /><span>Contenu 2</span>

        </div>
    </div>';
    $('.bodylinewidth').append('<div class="fake-right"><div class="fixed-top"><div class="panneau is-open"><div class="panneau-content">' + message + '</div></div></div></div>');
});

Ensuite on va faire quelques modifications au CSS (je t'explique tout à la fin, j'ai juste un peu la flemme là *meurt*) :

Il faut que dans .panneau tu retires la largeur (width) et le padding, on va les mettre à un autre endroit :
Code:
.panneau-content {
width: 250px;
padding: 10px;
}

Normalement le résultat devrait être identique.

Une fois cela fait, pourras tu me copier l'intégralité du CSS pour ce panneau coulissant s'il te plait ?
Tu veux que l'ouverture se fasse au survol c'est bien ça ?
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptySam 20 Sep 2014, 18:43
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Ça marche on fera comme ça. Wink

Alors tout est bon, et voici le code CSS complet. Je crois qu'il y a tout. Et oui c'est bien ça, j'aimerai qu'il s'ouvre au passage de la souris, et surtout qu'il coulisse.

Code:
.bodylinewidth {
    position: relative;
}

.fake-right {
    position: absolute;
    right: 0px;
}

.fixed-top {
    position: fixed;
    top: 400px;
}

.panneau {
 height: 150px;
 background-color: #2c2f24;
 text-align: center;
}

.panneau-content {
width: 250px;
padding: 10px;
}

.panneau.is-open {
    position: relative;
}

.panneau.is-open:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 30px;
    right: -30px;
    bottom: 1px;
    background: url("http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png");
}
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 21 Sep 2014, 05:29
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
En fait c'est plus simple à faire au survol, car on va tout faire en CSS du coup Wink

Le javascript va seulement servir à ajouter l'élément sur le page ^___^

Pour le JS je viens de voir que j'suis débile, je t'ai dit de remplacer qu'un morceau alors qu'en fait je voulais tout changer XDDD. BAKA. XD
Voici donc à quoi il va ressembler au final :
Code:
$(function() {
    /* Le message à mettre */
    var message = '<div class="infobulles_container"><div class="infobulle"><img src="http://placekitten.com/g/50/50"/><br/><span>Contenu 1</span></div><div class="infobulle"><img src="http://placekitten.com/g/50/50"/><br/><span>Contenu 2</span></div></div>';
    
    /* On ajoute à .bodyline */
    $('.bodyline').append('<div class="fake-right"><div class="fixed-top"><div class="panneau"><div class="panneau-content">' + message + '</div></div></div></div>')
});

Et le CSS (cela remplace celui que tu m'avais donné) :
Code:
/* on met en relative pour pouvoir utiliser position: absolute ensuite*/
.bodyline {
    position: relative;
}

.fake-right {
    position: absolute;
    right: 0;
}

.fixed-top {
    position: fixed;
    top: 400px;
}

.panneau {
    height: 150px;
    background-color: #2c2f24;
    text-align: center;
    overflow: hidden;
    max-width: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.panneau-content {
    width: 250px;
    padding: 10px;
}

.panneau:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 30px;
    right: -30px;
    bottom: 1px;
    background: url("http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png");
}

.panneau:hover {
    max-width: 300px; /* valeur plus grande que la largeur de panneau-content */
}

.panneau:hover:after {
    background: url("http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png");
}

En théorie ça fonctionne Very Happy
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 21 Sep 2014, 10:54
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Ah okay c'est modifié alors. x)

Donc ça fonctionne super bien, à quelques détails près désormais (tant vis à vis du panneau que des infobulles dedans) :

- L'image "Fermer" (qui devrait être "Ouvrir" d'ailleurs, ça a été inversé mais c'est pas grave parce que je modifierai l'image à la fin, y'en aura qu'une et ça sera "Staff") faudrait la décaler vers la droite de hmm... 3 ou 4 px je dirais, car elle n'est plus alignée sur le bord du forum, elle est directement sur la bordure.
- Faudrait que je fixe tout ça histoire que ça ne défile pas avec la page quand je descend.
- Faudrait que le cadre de la première infobulle "Contenu 01" reste visible, et que son contenu change dès que je passe mon curseur sur ma deuxième petit image. Tu vois ce que je veux dire ?
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 21 Sep 2014, 12:45
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Huhuhuhu, j'aurai du te demander précisément que ce tu voulais faire, car du coup ça simplifie le code ^^'

Pour le panneau en lui même, tu peux remplacer le JS par ceci :
Code:
$(function() {
    /* Le message à mettre */
    var message = '<div class="infobulles_container"><div class="infobulle"><img src="http://placekitten.com/g/50/50"/><br/><span>Contenu 1</span></div><div class="infobulle"><img src="http://placekitten.com/g/50/50"/><br/><span>Contenu 2</span></div></div>';
    
    /* On ajoute à .bodyline */
    $('.bodyline').append('<div class="panneau"><div class="panneau-content">' + message + '</div>')
});

Et ensuite l'ensemble du CSS du panneau peut devenir ceci :
Code:
body {
    z-index: -2; /* permet au panneau coulissant de pouvoir etre survolé */
}

/* on met en relative pour pouvoir utiliser position: absolute ensuite*/
.bodyline {
    position: relative;
}

.panneau {
    position: absolute;
    top: 400px;
    right: 3px;
    height: 150px;
    width: 250px;
    padding: 10px;
    background-color: #2c2f24;
    text-align: center;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.panneau:hover {
    right: -273px;
}

.panneau:after {
    content: "";
    position: absolute;
    height: 100px;
    width: 30px;
    right: -30px;
    bottom: 1px;
    background: url("http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png");
}

Comme ça, ça marche toujours Smile ?

Citation :
- Faudrait que le cadre de la première infobulle "Contenu 01" reste visible, et que son contenu change dès que je passe mon curseur sur ma deuxième petit image. Tu vois ce que je veux dire ?
Oui, je me disais aussi que ça serait mieux comme ça Very Happy, on voit ça juste après ^___^
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 21 Sep 2014, 13:51
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Mon panneau reste ouvert et visible même quand il est censé être fermé. :S
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 21 Sep 2014, 14:02
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
J'ai effectivement oublié quelques petites choses What a Face

On va remplacer :
Code:
body {
    z-index: -2; /* permet au panneau coulissant de pouvoir etre survolé */
}

Par :
Code:
body {
    position: relative;
    z-index: -2; /* permet au panneau coulissant de pouvoir etre survolé */
}

Et
Code:
.panneau {
    position: absolute;
    top: 400px;
    right: 3px;
    height: 150px;
    width: 250px;
    padding: 10px;
    background-color: #2c2f24;
    text-align: center;
    -webkit-transition: all 1s;
    transition: all 1s;
}

Par
Code:
.panneau {
    position: absolute;
    top: 400px;
    right: -3px;
    z-index: -1;
    height: 150px;
    width: 250px;
    padding: 10px;
    background-color: #2c2f24;
    text-align: center;
    -webkit-transition: all 1s;
    transition: all 1s;
}

Comme ça c'est bon Very Happy ?
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 21 Sep 2014, 14:27
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
C'est parfait. What a Face On peut passer au contenu de l'infobulle.
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 21 Sep 2014, 14:33
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Hello,

Je passe rapidement pour te dire que non je ne t'oublie pas.

Pour les contenus de l'infobulle, pourrais tu me passer le lien de ton exemple s'il te plait ? (tu as mis une screen, si tu avais le lien ça serait top)

Je vois 3 manières différentes de faire mais je sais pas vraiment laquelle est la mieux... XD. Je vais donc voir comment ils ont fait, et si par hasard ils ont pas une solution plus simple ^___^
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMar 23 Sep 2014, 18:01
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Coucou Nihil,

Aucun soucis, ne t'en fais pas. Wink
Voilà le lien :
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMer 24 Sep 2014, 04:02
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
C'est bien ce que je pensais il s'agit d'un système d'onglet où ils ont remplacé le click par un survol Wink

Il faudrait que tu trouves un système d'onglet déjà existant et ensuite on adaptera ton code pour que cela se fasse au survol :p
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMer 24 Sep 2014, 06:18
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Hmmm et si on reprenait le code des onglets des catégories ? :3
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyMer 24 Sep 2014, 09:23
Revenir en haut Aller en bas
Nihil
Nihil
{ Modérateur }
{ Modérateur }

Messages : 1216



Type d'infobulle + Onglets des catégories Empty
Bon finalement j'ai refait un code car j'avais envie.



Le CSS est à rajouter dans le CSS du forum :p
Le HTML est à mettre à la place du code précédent pour les infobulles.
Le JS est à rajouter en dessous de
Code:
$('.bodyline').append('<div class="panneau"><div class="panneau-content">' + message + '</div>')

Dis moi si ça fonctionne Very Happy

Tu noteras ma bonne volonté car au début j'avais la flemme totale de coder ça What a Face
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyJeu 25 Sep 2014, 17:35
Revenir en haut Aller en bas
http://milky-dream.web-rpg.org/forum.htm
Akya
Akya
{ Membre }
{ Membre }

Féminin Messages : 207



Type d'infobulle + Onglets des catégories Empty
Coucou Nihil,

Désolée je n'ai pas pu répondre avant. Alors chez moi ça ne fonctionne pas. Le panneau a complètement disparu et j'ai un bug lorsqu'on navigue avec les onglets des catégories maintenant. J'ai mis le CSS comme tu m'as dis, et le reste est là :

Code:
$(function() {
    /* Le message à mettre */
    var message = '<div class="onglets_container" id="staff_onglets">
    <div class="onglets_survol">
        <div class="onglet active">
            <img src="http://i39.servimg.com/u/f39/18/99/93/58/0110.png" />
        </div>
        <div class="onglet">
            <img src="http://i39.servimg.com/u/f39/18/99/93/58/0210.png" />
        </div>
    </div>
    <div class="onglets_contenus">
        <div class="onglet_contenu active">Contenu 1</div>
        <div class="onglet_contenu">Contenu 2</div>
    </div>
</div>';
   
    /* On ajoute à .bodyline */
    $('.bodyline').append('<div class="panneau"><div class="panneau-content">' + message + '</div>')
$('#staff_onglets').on('mouseenter', '.onglet', function(){
    if ($(this).hasClass('active')) return;
   
    var $onglet = $(this),
        $onglets = $onglet.parent().children(),
        $contenus = $onglet.parent().next().children(),
        index = $onglets.index($onglet);
   
    $onglets.removeClass('active');
    $contenus.removeClass('active');
   
    $onglet.addClass('active');   
    $contenus.eq(index).addClass('active');
});
});
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories EmptyDim 28 Sep 2014, 07:36
Revenir en haut Aller en bas
Contenu sponsorisé




Type d'infobulle + Onglets des catégories Empty
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Type d'infobulle + Onglets des catégories Empty
Revenir en haut Aller en bas
 

Type d'infobulle + Onglets des catégories

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

 Sujets similaires

-
» Catégories en onglets
» Problème de catégories en onglets.
» Problème onglets de catégories
» Problèmes de catégories en onglets
» Apparence onglets et catégories

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forumactif.com