Problème d'apparition et de positionement des bulles de description d'un forum

[Eil'liathan Tyan'Lirulin]

Bonjour ou Bonsoir,
Voilà nouveau petit problème tout bête, mais comme j'ai du ma à comprendre le fonctionnement du JS, j'ai besoin d'un chit coup de main.

https://forum.forumactif.com/t321327-description-d-un-forum-dans-une-bulle

Voilà, j'ai suivis ces explication en prenant les codes destiné à une version BB2 puisque c'est celle de mon forum.

Mon JS

Code:

$(function(){
  $("a.forumlink").hover(
      function () {
 $(this).parents("td").find(".desc_forum").css("visibility","visible");
      },
      function () {
 $(this).parents("td").find(".desc_forum").css("visibility","hidden");
      }
  );
 });

Mon CCS

Code:

td .desc_forum{
 position:absolute;
 visibility:hidden;
 background-color:#000000;
 border:3px solid #333094;
 padding:5px;
 color:#333094;
 font-size:1.3em;
 font-style:italic;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 }

J'ai juste deux petit soucis :

1. Le positionnement des bulles de description.



Je voudrais que les bulles de description apparaissent sous le titre du forum.
Je sais qu'il faut changer mon CCS à ce niveau là :

Code:

position:absolute;

Mais je ne trouve pas quel code mettre pour obtenir ce que je veux.

2. L'apparition des bulles de description.

Toute les bulles apparaissent quand je positionne ma souris sur les titre des forum :

curseur sur "Règles" --> bulles de description de "Règles" et du "Grand Livre de Quisaraedis" apparaissent en même temps.

Et ceux que je me position sur n'importe quelle titre de forum.
Je voudrais qu'un seule bulle de description apparaissent à la fois :

curseur sur "Règles" --> seule la bulle de description des "Règles" apparait
curseur sur "Grand Livre de Quisaraedis" --> seule la bulle de description "Grand Livre de Quisaraedis" apparait et ainsi de suite.

La encore, je pense savoir qu'il faut changer quelque chose au niveau du JS, mais je n'arrive pas à trouver quoi et comment, si vous pouviez éclairer ma lanterne !!!

Merci d'avance !

[Eil'liathan Tyan'Lirulin]

Personne pour un coup de main, s'il vous plait ...J'aimerais bien pouvoir en finir avec le desing de mon forum....

[Censure]

Bonsoir,
Essayer avec un:

Code:

padding-top: 15px;

ou avec:

Code:

margin-top:15px;

[Eil'liathan Tyan'Lirulin]

Ca ne change rien ><
Ou alors, je ne place pas les code ou il faut. Je dois le mettre dans le CCS je suppose ?

Mon soucis de survol ne se règle pas plutôt dans le JS ?

[Censure]

Oui dans le Css:
La dedans.

Code:

        td .desc_forum{
        position:absolute;
        visibility:hidden;
        background-color:#000000;
        border:3px solid #333094;
        padding:5px;
        color:#333094;
        font-size:1.3em;
        font-style:italic;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        }

Si ça se trouve dans le JS, je ne pourrais pas t'aider.

[Eil'liathan Tyan'Lirulin]

Il faut que je les mette sur une ligne spéciale ? Parce que je viens de tenter et ça ne fonctionne pas.

[Threax]

Bonjour,

Peut-on avoir l'URL du forum où ce script est en place ?

[Eil'liathan Tyan'Lirulin]

L'adresse du fow ?

http://quisaraedis.forumgratuit.org/

J'espère que c'est bien ça, j'ai un peu de mal avec le langage info ><
(je me soigne ou j'essaie)

[Eil'liathan Tyan'Lirulin]

Une réponse s'il vous plait, c'est la dernier chose de mon desing qui me pose problème, j'aimerais vraiment pouvoir en finir avec ce détails !

[Censure]

Peut-tu nous donner le script que tu utilise pour les info-bulles? ^-^

[Eil'liathan Tyan'Lirulin]

Je peux faire ça ^^

Je JS :

Code:

$(function(){
  $("a.forumlink").hover(
      function () {
 $(this).parents("td").find(".desc_forum").css("visibility","visible");
      },
      function () {
 $(this).parents("td").find(".desc_forum").css("visibility","hidden");
      }
  );
 });

Mon CSS

Code:

td .desc_forum{
 position:absolute;
 visibility:hidden;
 background-color:#000000;
 border:3px solid #333094;
 padding:5px;
 padding-top:15px;
 margin-top:15px;
 color:#333094;
 font-size:1.3em;
 font-style:italic;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 }

Le HTML

Code:

<div class="desc_forum"></div>

J'ai fait un autre test, je vais tenter de vous l'expliquer.
Je voulais mettre des images sur ma page d'accueil et utiliser ce code pour faire apparaitre la description (en l'occurrence le nom des personnage sur l'image).
Effectivement, le code fonctionne, mais toujours le même problème en pire, si je puis dire :

La description n'apparait pas quand je passe la souris sur l'image correspondant mais quand je passe sur le titre du forum "règles".

Je suis pratiquement sure que la modification pour le survol doit être faite au niveau du JS puisqu''Azylis (également inscrite) a réussit à utiliser ses codes sur son forum en modifiant legèrement le JS, seulement, elle ne peut m'aider, puisque son forum est en phpbb 3 et le mien en phpbb 2.

J'espère vraiment que vous pourrez m'aider, c'est vraiment la dernière ligne droite pour mon design et j'avoue que je commence à perdre patience car j'y travaille depuis plus d'un mois.

[Censure]

Êtes vous vraiment surs qu'un margin-top en negatif ne change rien?

Code:

 margin-top:-XXXpx;

Sur mon fofo cela déplace les bulles vers le haut en utilisant

Code:

margin-top:-200px;

Et en utilisant

Code:

margin-top:550px;

Cela y déplace vers le bas

Je ne voit que cela pour gérer l'emplacement de tes info-bulles.

Css:

Code:

  td .desc_forum{
        position:absolute;
        visibility:hidden;
        background-color:#000000;
        border:3px solid #333094;
        padding:5px;
        padding-top:15px;
        margin-top:15px;
        color:#333094;
        font-size:1.3em;
        font-style:italic;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        display: block;
        margin-top:-200px;
        }

[Eil'liathan Tyan'Lirulin]

Sur non j'ai pas essayé d'y toucher ^^
Mais j'y vais de ce pas !!!

[Eil'liathan Tyan'Lirulin]

Rah !!! Merci infiniment, ça fonctionne !! reste plus qu'à trouver le bon chiffre XD
Par contre, mon soucis d'apparition n'est pas résolu ><

Toutes les infobulle apparaissent quand je survole un seul lien ><

[Eil'liathan Tyan'Lirulin]

j'ai toujours un soucis...Personne pour m'éclairer?

[Censure]

Je cherche encore la solution :/

[Eil'liathan Tyan'Lirulin]

C'est gentil a toi !!!! J'ai cherché de mon coté, mais j'avoue qu'avec le JS, j'ai du mal.
J'ose croire que quelques personne ici s'y connaissent un peu, alors si elles passent par là, se serait cool d'éclairer ma lanterne !!!

[Eil'liathan Tyan'Lirulin]

Merci !! Ca fonctionne comme je l'espérais ! Enfin, merci beaucoup!!
Je profite que ce sujet soit "actif" pour te poser une autre question ( à moins que miraculeusement, quelqu'un d'autre me réponde Uu)

Tout bête, j'ai créer des infobulle

CSS :

Code:

.lock  {
  position: relative;
  cursor: pointer;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 3px;
  padding-right : 3px;
  padding-top  : 3px;
  padding-bottom : 3px;
    top: 300px;
    left: 0px;
  /* style du bloc qui apparait */
  border: 2px outset #333094;
  border-radius: 5px;
  background-color: #000000;
  -moz-border-radius: 5px;
  text-align: center ;
    visibility: visible;
}
.lock:hover .lock-hidden {
  display: block;
}

Je n'arrive juste pas à rajouter le code pour la couleur du texte qui apparait dans l'infobulle, j'ai tenté plusieurs chose sans grand sucés ><
En tout cas, merci de ta dispo Censure, me sens moins seule XD

Edit : oups, me suis trompé de message ><

[Censure]

Pour la couleur c'est:

Code:

color: #000;

[Eil'liathan Tyan'Lirulin]

Merci ! Ca a fonctionné^^

Par contre, mon problème de positionnement des bulles de description de mes forum est tjrs d'actualité, j'ai bien tenté de trafiquer les codes, mais rien à faire !!!

[Eil'liathan Tyan'Lirulin]

Up !

[Eil'liathan Tyan'Lirulin]

Up...

[Eil'liathan Tyan'Lirulin]

Up...

[Eil'liathan Tyan'Lirulin]

Bonjour ou Bonsoir,
Voilà nouveau petit problème tout bête, mais comme j'ai du ma à comprendre le fonctionnement du JS, j'ai besoin d'un chit coup de main.

https://forum.forumactif.com/t321327-description-d-un-forum-dans-une-bulle

Voilà, j'ai suivis ces explication en prenant les codes destiné à une version BB2 puisque c'est celle de mon forum.

Mon JS

Code:

$(function(){
  $("a.forumlink").hover(
      function () {
 $(this).parents("td").find(".desc_forum").css("visibility","visible");
      },
      function () {
 $(this).parents("td").find(".desc_forum").css("visibility","hidden");
      }
  );
 });

Mon CCS

Code:

td .desc_forum{
 position:absolute;
 visibility:hidden;
 background-color:#000000;
 border:3px solid #333094;
 padding:5px;
 color:#333094;
 font-size:1.3em;
 font-style:italic;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 }

J'ai juste un petit soucis :

2. L'apparition des bulles de description.[/b][/i][/u]

Toute les bulles apparaissent quand je positionne ma souris sur les titre des forum :

curseur sur "Règles" --> bulles de description de "Règles" et du "Grand Livre de Quisaraedis" apparaissent en même temps.

Et ceux que je me position sur n'importe quelle titre de forum.
Je voudrais qu'un seule bulle de description apparaissent à la fois :

curseur sur "Règles" --> seule la bulle de description des "Règles" apparait
curseur sur "Grand Livre de Quisaraedis" --> seule la bulle de description "Grand Livre de Quisaraedis" apparait et ainsi de suite.

La encore, je pense savoir qu'il faut changer quelque chose au niveau du JS, mais je n'arrive pas à trouver quoi et comment, si vous pouviez éclairer ma lanterne !!!

Merci d'avance !

Up...

[Eil'liathan Tyan'Lirulin]

Up

[Eil'liathan Tyan'Lirulin]

C'est vraiment mon tout dernier souci, alors si quelqu'un pouvait se pencher sur le problème siouplait !

[Eil'liathan Tyan'Lirulin]

Tjrs personne?

[Censure]

Ils faudrait trouver un javascript qui permettrais de donner un id pour chaque catégories, et ensuite avec ce JS:

Code:

        $(function(){
          $("a.forumlink").hover(
              function () {
        $(this).parents("td").find(".desc_forum").css("visibility","visible");
              },
              function () {
        $(this).parents("td").find(".desc_forum").css("visibility","hidden");
              }
          );
        });

Il serait sans doute possible de réaliser votre objectifs.
(J'ai essayer avec plusieurs sortent d'infobulles, mais sans sucés..)

[Eil'liathan Tyan'Lirulin]

Ou la, j'ai pas tout compris là ><

[Eil'liathan Tyan'Lirulin]

Bon problème résolu !
Merci Censure de m'avoir porté un peu d'attention ^^