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 !

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

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.

Forum :

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

Pour la suite on verra après (^-^)

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.

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

Ah j'avais pas compris ! xD
Oui oui il reste parfaitement bien placé.

Ok donc on va y aller petit à petit pour modifier le panneau coulissant

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

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;
}

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

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.

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 ?

Ça marche on fera comme ça.

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");
}

En fait c'est plus simple à faire au survol, car on va tout faire en CSS du coup

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

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 ?

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 ?

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 , on voit ça juste après ^___^

Mon panneau reste ouvert et visible même quand il est censé être fermé. :S

J'ai effectivement oublié quelques petites choses

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 ?

C'est parfait. On peut passer au contenu de l'infobulle.

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

Coucou Nihil,

Aucun soucis, ne t'en fais pas.
Voilà le lien :

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

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

Hmmm et si on reprenait le code des onglets des catégories ? :3

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

Tu noteras ma bonne volonté car au début j'avais la flemme totale de coder ça

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');
});
});