C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Système d'onglets simple et personnalisable
Lun 17 Sep 2018, 05:44 par heresy.

» Effet pour vos catégories
Sam 15 Sep 2018, 06:41 par Dynaste

» [RPG] Fiche personnage avec bannière latérale
Mar 11 Sep 2018, 15:29 par Rosalie Hale

» Signature codée avec onglets
Sam 01 Sep 2018, 16:11 par Plumeplume

» Mettre votre © Copyright dans le footer de votre forum
Mar 28 Aoû 2018, 12:13 par kaiton

» Sous-forums en retour à la ligne
Lun 27 Aoû 2018, 13:26 par sergiomarquina

» Effet pour vos sous-forums
Lun 27 Aoû 2018, 13:23 par sergiomarquina

» Trois colonnes avec effet Zoom
Lun 27 Aoû 2018, 08:40 par sergiomarquina


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
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



Salut salut Nihil ! *Meurt*

J'espère que tu vas bien !

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 !
MessageSujet: Type d'infobulle + Onglets des catégories   Mer 17 Sep 2014, 04:05
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 ^___^.




Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Mer 17 Sep 2014, 09:04
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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   Mer 17 Sep 2014, 09:19
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 (^-^)


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Mer 17 Sep 2014, 16:21
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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   Jeu 18 Sep 2014, 03:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Jeu 18 Sep 2014, 07:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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

Messages : 1216



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 ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Ven 19 Sep 2014, 15:48
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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   Ven 19 Sep 2014, 16:15
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 ^^ ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Ven 19 Sep 2014, 17:03
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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   Sam 20 Sep 2014, 04:11
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Sam 20 Sep 2014, 18:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



Ç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   Dim 21 Sep 2014, 05:29
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Dim 21 Sep 2014, 10:54
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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   Dim 21 Sep 2014, 12:45
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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 ^___^


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Dim 21 Sep 2014, 13:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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

Messages : 1216



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 ?


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Dim 21 Sep 2014, 14:27
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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

Messages : 1216



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 ^___^


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Mar 23 Sep 2014, 18:01
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



Coucou Nihil,

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

Messages : 1216



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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Mer 24 Sep 2014, 06:18
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



Hmmm et si on reprenait le code des onglets des catégories ? :3
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Mer 24 Sep 2014, 09:23
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



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


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Type d'infobulle + Onglets des catégories   Jeu 25 Sep 2014, 17:35
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://milky-dream.web-rpg.org/forum.htm
avatar
{ Membre }
{ Membre }

Féminin Messages : 207



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   Dim 28 Sep 2014, 07:36
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Type d'infobulle + Onglets des catégories   
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

-
» Type d'infobulle + Onglets des catégories
» ['Christa] Regrouper les catégories en Onglet
» Onglets catégories à gauche
» Probléme avec les catégories en onglets.
» Mettre ses catégories en onglets

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 | Contact | Signaler un abus | Forumactif.com