Bonjour,

Je suis en train de personnaliser un forum (un FSB), et j'aurais bien besoin d'une fonction javascript pour obtenir ce que je veux. Le problème c'est que je ne connais rien du tout au javascript, j'espère que vous pourrez m'aider :

J'ai classé mes smileys en 5 catégories. Voilà ce que je veux : dans la page pour poster, en arrivant, les smileys de la catégorie par défaut s'affichent. A côté, je met une liste déroulante qui permet d'afficher les smileys des autres categories à la place des actuels. Il faudrait un fonction pour js pour obtenir ce resultat

Quelqu'un peut-il me faire une telle fonction ?

Merci d'avance !

Je dois pouvoir t'aider mias il va falloir que tu poste le code xhtml de la partie dans laquelle sont les images et également la liste déroulante.

Bonjour,
Je peux aussi t'aider mais sans ton code, on va pas arriver à grand chose.

Post-le


Bisous, Nyu

Merci beaucoup, alors voilà ce que vous me demandez. Il s'agit d'un template, mais le code xhtml est identique à celui d'une page classique : (si vous ne savez pas ce que sont les templates)




Voilà, si vous avez besoin d'autre chose n'hesitez pas.

Le truc c'est qu'il faudrait que tu charge tous tes smilies sur la page et que tu cache ce dont la catégorie n'est pas la bonne.
Genre :

Il faut par contre, rajouter un div spécifique à chaque groupe de smilies, comme j'ai fais.
Quand tu as fais ça, tu rajoute cette fonction javascript dans le header :


Voilà, ça devrais marcher



Bisous, Nyu

L'autre solution consisterais à n'afficher qu'un seul des template puis à jongler avec le DOM pour supprimer une liste de smileys de la page et la remplacer par une autre. C'est pas difficile mais un tout petit long (quoique quand c'est bien fait ca va assez vite ).

Citation : Dutiona

Le truc c'est qu'il faudrait que tu charge tous tes smilies sur la page et que tu cache ce dont la catégorie n'est pas la bonne.
Genre :

<form name="smilies"><select name="perso">
        <option value="defaut">Défaut</option>
        <option value="jack">Jack</option>
        <option value="sam">Sam</option>
        <option value="daniel">Daniel</option>
        <option value="tealc">Teal'c</option>
</select></form> &nbsp; &nbsp;

<div id="smilies_defaut">
<!-- BEGIN smiley_defaut -->
        <img src="{smiley_defaut.IMG_SMILEY}" title="{smiley_defaut.CODE}" border="0" onClick="javascript:Smileys(' {smiley_default.CODE} ');" onMouseover="this.style.cursor='pointer';" />&nbsp;
<!-- END smiley_defaut -->
</div>

<div id="smilies_jack">
<!-- BEGIN smiley_jack -->
        <img src="{smiley_jack.IMG_SMILEY}" title="{smiley_jack.CODE}" border="0" onClick="javascript:Smileys(' {smiley_jack.CODE} ');" onMouseover="this.style.cursor='pointer';" />&nbsp;
<!-- END smiley_jack -->
</div>

<div id="smilies_sam">
<!-- BEGIN smiley_sam -->
        <img src="{smiley_sam.IMG_SMILEY}" title="{smiley_sam.CODE}" border="0" onClick="javascript:Smileys(' {smiley_sam.CODE} ');" onMouseover="this.style.cursor='pointer';" />&nbsp;
<!-- END smiley_sam -->
</div>

<div id="smilies_daniel">
<!-- BEGIN smiley_daniel -->
        <img src="{smiley_daniel.IMG_SMILEY}" title="{smiley_daniel.CODE}" border="0" onClick="javascript:Smileys(' {smiley_daniel.CODE} ');" onMouseover="this.style.cursor='pointer';" />&nbsp;
<!-- END smiley_daniel -->
</div>

<div id="smilies_tealc">
<!-- BEGIN smiley_tealc -->
        <img src="{smiley_tealc.IMG_SMILEY}" title="{smiley_tealc.CODE}" border="0" onClick="javascript:Smileys(' {smiley_tealc.CODE} ');" onMouseover="this.style.cursor='pointer';" />&nbsp;
<!-- END smiley_tealc -->
</div>

Il faut par contre, rajouter un div spécifique à chaque groupe de smilies, comme j'ai fais.
Quand tu as fais ça, tu rajoute cette fonction javascript dans le header :

function show_hide(id){
  with(document.getElementById(id).style){
    if(display == 'none')
      display = 'block';
    else
      display = 'none';
  }
}
function initSmilies(){
  document.forms['smilies'].elements['perso'].onchange = function(){
    var liste = this.getElementsByTagName('option');
    for(var i = 0, taille = .length; i < taille; i++)
      show_hide(document.getElementById('smilies_'+liste[i].value));
  };
}
window.onload = initSmilies;

Voilà, ça devrais marcher



Bisous, Nyu

Merci beaucoup !

Je vais essayer de mettre ca dans mes fichiers ... je te tiens au courant si j'y arrive ou pas.

Je ne suis pas une pro du javascript, mais on est pas censé appeler ta fonction dans la liste deroulante ? là t'as rien mis ...

Merci à toi aussi, Fedaykin, mais je n'ai pas trop compris ta solution ... je vais essayer cette de Nyu d'abord !

Xiap > Non, regarde :
window.onload = initSmilies;
Ca veux dire que les evenements s'initialisent tout seul, tu n'as rien besoin de faire
C'est plus propre, pas de javascript dans le html
Fedaykin > La solution de jongler avec les élements du DOM est plus compliqué et plus lourde.
De plus, le html ne sera pas directement dans la page mais dans le javascript, ce qui perd en lisibilité du code source pour les bots du style goole.
Je ne l'ai donc pas retenu pour ce cas là



Bisous, Nyu

Bon alors voilà où j'en suis :

J'ai modifié le fichier php, et le tpl pour afficher tous les smileys triés par catégorie. Mais je n'ai pas fait intervenir le js, et tout va comme je veux.

Par contre, dès que je copie/colle ton code js, ca coince :
- Toutes les categories sont toujours visibles;
- Changer de categorie avec la liste deroulante ne change rien (t'es sur que pour la fonction show_hide, y'a rien à mettre ? Si tu me le dis, je te fais confiance, mais ca m'etonne quand même qu'il n'y ait pas un onchange);
- Ensuite, tout ce qui est js est mis dans un fichier js à part. Pour les fonctions ca change rien je pense, est-ce de même pour le window.onload = initSmilies; ?
- Enfin, quand on clique sur un smiley, son code ne s'affiche plus dans la zone de texte. Mais bon ça, à la limite, on le reverra quand ta fonction fonctionnera.

Voilà ...

Ah oui, j'ai oublié de mettre un display:none de départ sur tous les div des catégories "non-defaut".
Rajoute le en xhtml, ça devrais marcher



Bisous, Nyu

Okay, en effet, toutes les categories non-defauts ont bien disparu !

Par contre, quand je change la liste deroulante, rien ne change. Excuse-moi d'insister encore, mais tu ne m'as pas repondu : on ne doit pas mettre un onchange ?? J'ai mis ça pour tester, mais je ne sais pas ce qu'il faut mettre à la place de id :

Tu devrais faire juste:



onBlur a la place de onChange pour que ceux qui naviguent au clavier aient une chance de voir toutes les options sans que ca ne se recharge a chaque changement.

Citation : Fedaykin

Tu devrais faire juste:

select name="perso" onBlur="show_hide(this.value)">

onBlur a la place de onChange pour que ceux qui naviguent au clavier aient une chance de voir toutes les options sans que ca ne se recharge a chaque changement.

Ok j'ai testé ... mais ca ne marche pas. J'ai copié les fonctions telles quelles ...

Le JS c'est du chinois pour moi, alors j'ai beau relir le code, je vois pas d'où vient le problème. Ca viendra pas d'un mot mal ecrit comme smilies au lieu de smiley, ou un truc du genre ? (je dis peut-etre des betises, mais au cas où ca vous donnerai des pistes ...

Essaie de trouver les erreurs javscript (outils->consol javascript si t'es sous firefox) et mets les ici...pour bien les trouver efface d'abord ce qu'il y a dans la console pour refresh ta page.

Voilà ce que cela me dit :

Citation : console

Erreur : syntax error
Fichier source : http://****/javascript.js
Ligne : 209, Colonne : 28
Code source :
for(var i = 0, taille = .length; i < taille; i++)

Citation : console

Erreur : initSmilies is not defined
Fichier source : http://****/poster.php?mode=nouveau_sujet&forum=2
Ligne : 53

le .length n'a aucun sens...on veut connaitre la taille de quel tableau?y'a une variable a mettre juste devant en l'occurence liste :



Essaie déjà avec ça...l'autre erreur sera peut etre réglée comme ça.

Les smileys ne changent toujours pas.

Par contre, la 2eme erreur a disparu, mais un autre est arrivée

Citation : console

Erreur : document.forms.smilies has no properties

Est-ce que vous donner le code html (après que la page est été générée en php), et le fichier js pourrait vous aider ? N'hesitez pas à me demander ...

document.forms.smilies

c'est plutot sous cette forme document.forms['smilies']

Citation : Fedaykin

document.forms.smilies

c'est plutot sous cette forme document.forms['smilies']

Ben le plus fort, c'est que c'est bien écrit comme tu le dis, et pas comme le dis la console.

oui en effet avec le code après génération ca devrait aider un peu

Voilà la partie du code html concernée (je vous ai pas mis toutes les images des smileys pour alléger)



Et voilà les fonctions js. Dans le fichier, il y en a pleins d'autres, mais je ne les ai pas mis. Est-il possible qu'une fonction précédente puisse empêcher le fonctionnement de celles que vous m'avez donné ? Si oui, peut-être qu'il vaudrait mieux que je lesmette ...

Bon j'ai essayé dux trois trucs...je n'arrive toujours pas à le faire marcher mais tu as fait quelques erreurs quand même.



Je l'enlèverais du début du fichier pour mettre plutot vers la fin quelque chose comme ca:



Au moins la on est sur que le ficheir est chargé et qu'il trouvera les éléments appelé.

Ensuite, à moins que je ne connaisse pas suffisament le javascript, le with n'est pas une instruction reconnue.

Et enfin document.forms ne peut pas être utilisé parce qu'il n'y a pas de form sur ta page tout simplemnt... Et je me demande si c'est très logique ce que tu fais dans init. Tu dis que quand je vais changer le select(utilise plutot onBlur d'ailleurs toujours pour des raisons d'accessibilité) j'inverse le display de tout mes blocs smiley...donc celui qui était là disparait bien mais tous les autres apparaissent...

Citation : Fedaykin

Bon j'ai essayé dux trois trucs...je n'arrive toujours pas à le faire marcher mais tu as fait quelques erreurs quand même.

<script type="text/javascript">window.onload = initSmilies;</script>

Je l'enlèverais du début du fichier pour mettre plutot vers la fin quelque chose comme ca:

<script type="text/javascript"> initSmilies();</script>

Au moins la on est sur que le ficheir est chargé et qu'il trouvera les éléments appelé.

Ok, ca je l'ai fait.

Citation : Fedaykin

Ensuite, à moins que je ne connaisse pas suffisament le javascript, le with n'est pas une instruction reconnue.

Et enfin document.forms ne peut pas être utilisé parce qu'il n'y a pas de form sur ta page tout simplemnt... Et je me demande si c'est très logique ce que tu fais dans init. Tu dis que quand je vais changer le select(utilise plutot onBlur d'ailleurs toujours pour des raisons d'accessibilité) j'inverse le display de tout mes blocs smiley...donc celui qui était là disparait bien mais tous les autres apparaissent...

Les deux fonctions, ce n'est pas moi qui les ai faites (voir plus haut). C'est Dutiona. Il/elle sera mieux placée pour te repondre, surtout que je ne maitrise pas du tout le js ...

Ohla, erreur de sémantique de ma part :s
essaye plutot ça :

Je suis aller me compliquer la vie pour rien...
Fedaykin >> with est une structure de langauge reconnue de javascript à aprtir des versions 3-4 (je crois)
Bien vu pour le init en bas de page



Bisous, Nyu

Ca ne marche toujours pas ...

Fichier js actuellement :

Si tu n'as toujours pas mis de balise form avec pour nom smilies dans ton xhtml ta ligne



ne risque pas de marcher....

Autant pour moi ... mais, après correction, ca ne marche toujours pas ...

Tu pourrais remettre, et le code xhtml et le code javascript stp

Bien sûr



Et voilà les fonctions js. Dans le fichier, il y en a pleins d'autres, mais je ne les ai pas mis. Est-il possible qu'une fonction précédente puisse empêcher le fonctionnement de celles que vous m'avez donné ? Si oui, peut-être qu'il vaudrait mieux que je lesmette ...



Et voilà ce que me dit la console :

Citation : console

Erreur : document.forms.smilies has no properties
Fichier source : http://***/javascript.js
Ligne : 207

Citation : Xiap

Je suis en train de personnaliser un forum (un FSB),

Je peut savoir c'est quoi un FSB je crrois d'aprés moi que ce sont des abreviations F=> Forum et les autres .....