Geckozone

Je rajouterais que tu devrais modifier le script de ChBok comme je l'ai dit car à l'heure actuelle une fois le display:none appliquée il reste en l'état même si tu changes de choix donc tu finis part ne plus voir de liens du tout.
D'autre part en tant qu'utilisateur je trouve qu'une option "toutes les catégories" pour voir toutes les catégories

serait pas mal.

Pourquoi avoir abandonné mon idée de ne chercher que parmi les éléments de la liste (liste.getElementsByTagName()) et parcourir tout le document ?

SB a écrit :Je rajouterais que tu devrais modifier le script de ChBok comme je l'ai dit car à l'heure actuelle une fois le display:none appliquée il reste en l'état même si tu changes de choix donc tu finis part ne plus voir de liens du tout.

Ah oui tu as raison

Je l'avais oté à cause du display:block mais j'aurais du mettre display:list-item

SB a écrit :D'autre part en tant qu'utilisateur je trouve qu'une option "toutes les catégories" pour voir toutes les catégories serait pas mal.

Ah oui tu as raison

Benoit a écrit :Pourquoi avoir abandonné mon idée de ne chercher que parmi les éléments de la liste (liste.getElementsByTagName()) et parcourir tout le document ?

Excellente question

On aurait donc

Code : Tout sélectionner

function CacheSauf(classe) {
	var liste = document.getElementById("liste"); //on ne recherche que dans <foo id="liste">
	var elts = liste.getElementsByTagName('li');  //on ne recherche que dans les éléments <li>
	for(var i=0; i<elts.length; i++) {
		var mycls = elts[i].getAttribute('class');
		if (mycls!=null && mycls.indexOf(classe)<0)
			{elts[i].setAttribute('style', 'display:none');}
		else {elts[i].setAttribute('style', 'display:block');}
	}
}

Par contre pour remettre le tout à 0...

Je vais déjà voir si ça marche

Par rapport à ta question de tout à l'heure

calimo a écrit :Par contre j'ai un avertissement : reference to undefined property e.className
Et il ne se passe rien

J'avais trouvé ça ici : http://www.mozilla.org/docs/dom/domref/ ... ml#1027595 ça avait l'air d'être ce que tu voulais, bizarre que ça ne fonctionne pas.

J'ai un truc qui fonctionne

Code : Tout sélectionner

function CacheSauf(classe) {
	var liste = document.getElementById("liste"); //on ne recherche que dans <foo id="liste">
	var elts = liste.getElementsByTagName('li');  //on ne recherche que dans les éléments <li>
	if (classe=="toutes") {
		for(var i=0; i<elts.length; i++) {
			var mycls = elts[i].setAttribute('style', 'display:list-item');
		}
	}
	else {
		for(var i=0; i<elts.length; i++) {
			var mycls = elts[i].getAttribute('class');
			if (mycls!=null && mycls.indexOf(classe)<0)
				{elts[i].setAttribute('style', 'display:none');}
			else {elts[i].setAttribute('style', 'display:list-item');}
		}
	}
}

Bon c'est surement pas optimisé, je vais voir ce className ce que je peux en faire (c'est surement mieux que setAttribute(style ...))

Edit : ah non je suis encore à-côté de la plaque

Tu es sur de la syntaxe for (e in elements) ?

Re-edit : ça ne marche ni sous IE ni sous Opera

ça vient de la façon de renseigner l'attribut style. Le faire avec setAttribute() ne fonctionne pas dans certains navigateurs (idem pour les attributs HTML d'évènements).

Moi, ce que je comprend mal, c'est la présence de ce formulaire alors qu'il n'y a aucun envoie de données vers un script coté serveur.

Il faudrait dans l'idéal générer la partie label + select + bouton en javascript plutôt que les mettre en dur dans le document.
Je t'ai fait un petit quelque chose comme exemple:
http://dev.webnaute.net/BAS/extensions

Bobe a écrit :ça vient de la façon de renseigner l'attribut style. Le faire avec setAttribute() ne fonctionne pas dans certains navigateurs (idem pour les attributs HTML d'évènements).

elts.style.display = 'none';
Effectivement ça semble un peu plus "propre" Et ça marche (même dans IE).

Bobe a écrit :Moi, ce que je comprend mal, c'est la présence de ce formulaire alors qu'il n'y a aucun envoie de données vers un script coté serveur.

Il faudrait dans l'idéal générer la partie label + select + bouton en javascript plutôt que les mettre en dur dans le document.
Je t'ai fait un petit quelque chose comme exemple:
http://dev.webnaute.net/BAS/extensions

Oui enfin bon chaque chose en son temps
Je pensais faire ça tranquillement aujourd'hui en me basant sur ton changeur de style pour manipuler le DOM, mais vu que tu as été plus rapide que moi ça ne sera plus nécessaire 8) Merci

calimo a écrit :Re-edit : ça ne marche ni sous IE ni sous Opera

Il est marqué que ça existe depuis JavaScript 1.0 mais c'est peut-être une erreur, ou alors ça ne s'applique pas aux tableaux ?
http://web.archive.org/web/200312091255 ... ml#1004815
J'ai pensé que c'était comme le foreach() en PHP mais me suis peut-être planté alors.

Edit: Dans le script de Bobe je trouve que l'évènement devrait être mis sur le "onchange" de la liste et pas sur le "onclick" du bouton.

Benoit a écrit :
calimo a écrit :Re-edit : ça ne marche ni sous IE ni sous Opera
Il est marqué que ça existe depuis JavaScript 1.0 mais c'est peut-être une erreur, ou alors ça ne s'applique pas aux tableaux ?
http://web.archive.org/web/200312091255 ... ml#1004815
J'ai pensé que c'était comme le foreach() en PHP mais me suis peut-être planté alors.

Je ne sais pas

Benoit a écrit :Edit: Dans le script de Bobe je trouve que l'évènement devrait être mis sur le "onchange" de la liste et pas sur le "onclick" du bouton.

Dans tous les cas il n'y a pas intérêt à naviguer au clavier

D'où mon idée originale d'un formulaire avec son "onsubmit" qui n'a pas été inventé pour rien

Autres choses :

Est-il possible de mettre ce script dans le <body> pour ne l'insérer que dans quelques pages (3)...
Je ne comprend pas vraiment comment il s'insère... c'est un div (var choixcat = document.createElement('div');) et il y a visiblement une ligne à la fin : document.body.insertBefore(choixcat, document.getElementsByTagName('div')[0]);

calimo a écrit :Autres choses :
Est-il possible de mettre ce script dans le <body> pour ne l'insérer que dans quelques pages (3)...

Je ne comprend pas vraiment comment il s'insère... c'est un div (var choixcat = document.createElement('div');) et il y a visiblement une ligne à la fin : document.body.insertBefore(choixcat, document.getElementsByTagName('div')[0]);

Oui à la première question. Mais il est préférable de lancer les scripts de remplissage de listes ou de création de balises <DIV> à partir d'un évènement onload sur la balise <BODY>. Ainsi, la page se charge d'abord et est ensuite modifiée dynamiquement ; le DOM ayant reçu tous les objets.

Ensuite, pour l'insertion de la balise <DIV>, ton script commence par créer un objet représentant l'élément <DIV> dans la variable choixcat, et ensuite va l'insérer dans la page juste avant la première balise <DIV> présente dans cette page.

Ok, c'est bien ce que je pensais, donc dans ce cas ça n'ira pas parce qu'il y aura d'autres div dans la page finale, le div devra être inclus dans un <div id="conteneur"> et un <div id="contenu">, donc j'ai modifié pour l'insérer sur un id particulier (et ça marche !)

Tu dirais donc qu'il faut mettre document.body.onload = function() {[...] ?

calimo a écrit :
Benoit a écrit :Edit: Dans le script de Bobe je trouve que l'évènement devrait être mis sur le "onchange" de la liste et pas sur le "onclick" du bouton.
Dans tous les cas il n'y a pas intérêt à naviguer au clavier
D'où mon idée originale d'un formulaire avec son "onsubmit" qui n'a pas été inventé pour rien

Oui, c'est pour l'accessibilité pour que j'ai préféré le bouton + 'click' plutôt que l'évènement 'change' sur la liste. Il faudrait ajouter un évènement 'keypress' et récupérer le code de la touche pressée avec keyCode.
L'évènement DOMActivate résoudrait le problème mais n'est pas cross-browser actuellement. En fait, je ne sais même pas si Mozilla le gère.

Autres choses : Est-il possible de mettre ce script dans le <body> pour ne l'insérer que dans quelques pages (3)...

Met-le dans un fichier externe non ?

Je ne comprend pas vraiment comment il s'insère... c'est un div (var choixcat = document.createElement('div');) et il y a visiblement une ligne à la fin : document.body.insertBefore(choixcat, document.getElementsByTagName('div')[0]);

Comme l'a dit chBok, le bloc créé est inséré avant le premier DIV de la page. C'était un choix arbitraire, à toi de faire l'insertion où tu veux.

Le bloc généré ressemble à ça (sans les espaces et sauts de ligne):

Code : Tout sélectionner

<div id="choix-categorie">
    <label for="cat">Catégorie à afficher&nbsp;:</label>&nbsp;
    <select id="cat">
        <option value="toutes">toutes</option>
        <option value="..">.. etc
    </select>&nbsp;
    <input type="button" value="valider"/>
</div>

Bobe a écrit :Oui, c'est pour l'accessibilité pour que j'ai préféré le bouton + 'click' plutôt que l'évènement 'change' sur la liste. Il faudrait ajouter un évènement 'keypress' et récupérer le code de la touche pressée avec keyCode.
L'évènement DOMActivate résoudrait le problème mais n'est pas cross-browser actuellement. En fait, je ne sais même pas si Mozilla le gère.

Et comment on peut gérer ça ? Un simple buttonElt.onkeydown = displayCat; ? ça a l'air de marcher...

Bobe a écrit :
Autres choses : Est-il possible de mettre ce script dans le <body> pour ne l'insérer que dans quelques pages (3)...
Met-le dans un fichier externe non ?

Oui bien sur mais l'insertion ce serait bien qu'elle soit dans le body

Avec le Wiki c'est soit on la mets dans toutes les pages, soit dans le body... ou alors c'est très compliqué !

En théorie c'est possible ? Dans la pratique ça semble marcher...

En tous cas merci beaucoup

calimo a écrit :
Bobe a écrit : Met-le dans un fichier externe non ?
Oui bien sur mais l'insertion ce serait bien qu'elle soit dans le body
Avec le Wiki c'est soit on la mets dans toutes les pages, soit dans le body... ou alors c'est très compliqué !

En théorie c'est possible ? Dans la pratique ça semble marcher...

Bah

Code : Tout sélectionner

<body>
.. etc...
<script type="text/javascript" src="tonfichier.js"></script>
.. etc...
</body>
</html>

Oui tout à fait, mais est-ce "légal" ? Est-ce que ça risque de poser des problèmes ?
On lit souvent qu'il vaut mieux mettre les script dans le head, est-ce juste une sorte de superstition ? Ou est-ce que c'est vraiment mieux ?

Geckozone

Classement d'extensions