Connectix Boards

Bienvenue, vous n'êtes pas connecté. ( Se connecter - S'enregistrer )

Dernière version sortie: 0.8.4!
Venez tester la version 1.0 beta :)

Connectix Boards > Informations générales > Coin pauses et détente > Petit soucis javascript

RSS >  Petit soucis javascript, m'aidez ! m'aidez moi !
finalbob #1 16/07/2009 - 14h31

Groupe : Modérateur
Messages : 718
Enregistré le : 08/03/2007

Hors ligne Site Web

Bonjour à tous !

J'ai un petit soucis en JS que je n'arrive pas à régler, surtout à cause du fait que je suis une grosse tanche qui ne l'a jamais appris...

En fait j'ai ce code html (que je vous ai un peu nettoyé) :


<div class="case">
    <img  onclick="javascript:Showinfobulle('info_case_4_18')">
    <div class="infobulle_container" id="info_case_4_18" style="display: none;">Contenu infobulle</div>
</div>

<div class="case">
    <img onclick="javascript:Showinfobulle('info_case_5_18')">
    <div class="infobulle_container" id="info_case_5_18" style="display: none;">Contenu infobulle</div>
</div>

<div class="case">
    <img onclick="javascript:Showinfobulle('info_case_6_18')">
    <div class="infobulle_container" id="info_case_6_18" style="display: none;">Contenu infobulle</div>
</div>

J'utilisais la fonction JS hideandshow(); qui me permettait au clic sur une case d'afficher l'infobulle correspondante.

Mais si je clic sur une case, puis une autre, je me retrouve avec deux infobulles simultanée. Je souhaiterais donc que quand je clique sur une case, ça me force toutes les infobulles à se cacher, puis ça m'affiche celle demandée.

Voici la fonction JS que j'ai faite pour tenter de résoudre mon soucis :
function Showinfobulle(field) {
    document.getElementById("info_case").style.display = 'none';
    document.getElementById(field).style.display = ' ';
}

le "info_case" est un second id que je rajoutais à toute mes infobulles (un ID pas unique donc...), mais il semblerait que :
<div class="infobulle_container" id="info_case"  id="info_case_5_18">
où j'attribue deux ID différents au même élément ne soit pas très bien toléré par firefox...


Si vous avez des idées pour résoudre mon soucis, je suis preneur... :D
youplaboum !
Posted Image
tout mes MODs pour cb
dixy #2 16/07/2009 - 14h43

Groupe : Modérateur
Messages : 1060
Enregistré le : 06/02/2005

Hors ligne Site Web

Tu peux créer une variable qui contient le nom de l'info bulle affichée, comme ceci :

var infoBulleAffichee = '';

function Showinfobulle(field) {
    if (infoBulleAffichee != '' && field != infoBulleAffichee) {
        document.getElementById(infoBulleAffichee).style.display = 'none';
    }
           
    var bulle = document.getElementById(field);
    bulle.style.display = (bulle.style.display == 'none') ? 'block' : 'none';
    infoBulleAffichee = field;
}
Posted Image BrightMarks : gérer vos notes scolaires
Martin #3 16/07/2009 - 14h46

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

Crées une variable globale vide si rien n'est ouvert, et contenant l'id de l'infobulle ouverte, s'il y en a une.
Un truc du style devrait fonctionner:
var infobulleopen = '';
function Showinfobulle(field) {
   if (infobulleopen != '') {
       document.getElementById(infobulleopen).style.display = 'none'
   }
   if (infobulleopen == field) {
       infobulleopen = '';
   } else {
       document.getElementById(field).style.display = 'block';
       infobulleopen = field;
   }
}En gros, le même bouton sert à ouvrir et fermer tes infobulles, et le code évite que tu en aies plusieurs ouvertes en même temps.

Dis moi si ca marche :)

Edit: boarf, dixy est plus rapide! Grilled!
Ce message a été édité par Martin le 16/07/2009 à 14h48.
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
finalbob #4 16/07/2009 - 14h56

Groupe : Modérateur
Messages : 718
Enregistré le : 08/03/2007

Hors ligne Site Web

la solution de dixy marche nickel !

Par contre la tienne martin ne m'affiche rien quand je clique sur une case... :-/

Je vais donc garder la solution de dixy... :)

merci beaucoup à vous deux !


PS : Par contre j'ai vraiment du mal à relire vos codes, pourtant ça ne semble pas compliqué... je dois faire un blocage psychologique sur le JS...


EDIT : J'AI RIEN DIT !!!! ta solution marche aussi martin... j'avais juste oublié de la rajouter dans mon fichier après avoir commenté celle de dixy... :-/
Ce message a été édité par finalbob le 16/07/2009 à 15h00.
youplaboum !
Posted Image
tout mes MODs pour cb
finalbob #5 16/07/2009 - 15h06

Groupe : Modérateur
Messages : 718
Enregistré le : 08/03/2007

Hors ligne Site Web

ayé, après plusieurs relectures intensives, j'ai enfin compris vos codes...
pfiouuu...
youplaboum !
Posted Image
tout mes MODs pour cb
dixy #6 16/07/2009 - 15h52

Groupe : Modérateur
Messages : 1060
Enregistré le : 06/02/2005

Hors ligne Site Web

:D

Ils ne sont pas très compliqués... pourtant je suis pas un expert en javascript  :)
Posted Image BrightMarks : gérer vos notes scolaires
Martin #7 16/07/2009 - 17h03

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

Ravi que tu aies ta solution :)

Je ne suis pas non plus un expert en javascript, mais à la longue, on finit par s'y faire ;)

Alors, tu as gardé celle de dixy ou la mienne? :dev:
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
finalbob #8 16/07/2009 - 17h48

Groupe : Modérateur
Messages : 718
Enregistré le : 08/03/2007

Hors ligne Site Web

Celle de dixy m'a permis de comprendre, la tienne j'ai eu plus de mal (pourtant c'est la même chose !).
Mais je trouve la tienne plus concise, donc je l'ai gardée.
youplaboum !
Posted Image
tout mes MODs pour cb
Martin #9 16/07/2009 - 21h59

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

En plus, je viens de voir qu'il y a un bukk chez dixy qui ne remet pas infoBulleAffichee à '' (string vide) quand on ferme une infobulle sans en afficher une autre  :pirate:


On dirait que je me la joue compète ici...  :glasses:
Ce message a été édité par Martin le 16/07/2009 à 22h00.
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges
dixy #10 16/07/2009 - 22h28

Groupe : Modérateur
Messages : 1060
Enregistré le : 06/02/2005

Hors ligne Site Web

Ahah oui, en effet, petit oubli...
En corrigeant on arrive à ton code.

J'ai perdu cette fois  :D
À quand le prochain défi ?  :rolleyes:
Posted Image BrightMarks : gérer vos notes scolaires
finalbob #11 16/07/2009 - 22h39

Groupe : Modérateur
Messages : 718
Enregistré le : 08/03/2007

Hors ligne Site Web

un defi ?

Il me faut un système complet de creation d'objets manufacturés, en fonction de l'énergie disponible et des ressources en stock...

vous avez jusqu'à minuit, après je débarque chez vous et je viole vos cochons d'inde...
youplaboum !
Posted Image
tout mes MODs pour cb
Martin #12 17/07/2009 - 00h13

Groupe : Administrateur
Messages : 3657
Enregistré le : 01/02/2005

Hors ligne Site Web

Meuh, mes cochons d'inde  :dry:
Posted Image
« Entre une mauvaise cuisinière et une empoisonneuse il n'y a qu'une différence d'intention. » - P. Desproges

 >  Réponse rapide

Composez votre message

Connectix Boards > Informations générales > Coin pauses et détente > Petit soucis javascript

 >  Informations du forum

1 personne(s) présente(s) durant une période de 15 minutes (0 membre(s) et 1 invité(s)).