--
« La bouse de la vache est plus utile que les dogmes :
on peut en faire de l'engrais. »
(Mao Tsé-Toung / 1896-1976)
Quand tu dis "visible", tu veux dire "affiché", je suppose.
Donc peu importe ce qui est visible dans le code source.
L'attribut "id", ça n'irait pas ?
--
Cordialement,
Pascal
> Quand tu dis "visible", tu veux dire "affiché", je suppose.
ouais.
> Donc peu importe ce qui est visible dans le code source.
> L'attribut "id", ça n'irait pas ?
peut-être, à condition de ruser afin d'éviter des doublons.
ou une classe bidon, plus élégant sans doute :
<li id="categories_1">...
...
<li id="categories_1">
ou la même chose avec des classes :
<li class="categories_1">...
...
<li class="categories_1">
--
« A quoi bon soulever des montagnes quand il est
si simple de passer par-dessus ? »
(Boris Vian)
> Je ne vois pas le pourquoi et le comment faire ça ; tout ce que tu
> envoies au navigateur, le navigateur le voie par définition après on
> n'est pas obligé de rendre tout visible par un humain non informaticien
> donc l'idée de l'id du li de Pascal est tout à fait appropriée...
oui e, fait c'est pour que le contenu affiché soit plus lisible sans
infos inutiles, ce n'est pas pour le cacher en soi, dans le code je veux
dire, ca je m'en fiche.
l'idée de Pascal est pas mal en effet; mais je cherche un truc comme les
champs hidden dans une forme.
amha ca doit pouvoir se faire en css; avec un bloc; une div, n'importe
quoi en hidden.
c'est t'absolument t'interdit !
pas d'ids de mêmes noms !
> ou la même chose avec des classes :
> <li class="categories_1">...
> ...
> <li class="categories_1">
<li>je suis normal</li>
<li><span>index 1</span>je suis spécial</li>
<li><span>index 2</span>moi z'ossi</li>
li span { display: none }
--
Stéphane Moriaux avec/with iMac-intel
> c'est t'absolument t'interdit !
>
> pas d'ids de m�mes noms !
oui; je sais, mon exemple est foireux !!!
>
> > ou la m�me chose avec des classes :
> > <li class="categories_1">...
> > ...
> > <li class="categories_1">
>
>
> <li>je suis normal</li>
> <li><span>index 1</span>je suis sp�cial</li>
> <li><span>index 2</span>moi z'ossi</li>
>
>
> li span { display: none }
Ah ben voila, c'est tout simple; je ,me disait auissi pourquoi ducros y
se d�carcasse...
--
� Les seuls probl�mes que l'argent peut r�soudre sont
des probl�mes d'argent. �
(Kin Hubbard)
Je te conseille quand même de coller une classe spécifique à ton "span"
invisible (ou plus précisément, non affiché), si tu retiens cette
solution, car cette balise pourrait te servir dans d'autres contextes.
Maintenant, on a peut-être pas assez d'éléments pour comprendre
exactement ton besoin et le recours à cette "astuce".
Par exemple, avec un contenu très hiérarchisé, voici ce qu'il m'est
arrivé de pondre, tout simplement :
<div id="cat_1">
<p id="subcat_1>...</p>
<p id="subcat_2>...</p>
...
</div>
<div id= cat_2>... etc.
ou encore :
<ul id="cat_1">
<li id="subcat_1>...</li>
<li id="subcat_2>...</li>
</ul>
<ul id="cat_2">... etc.
Par contre, dans une suite de résultats présentés en ligne (en
l'occurrence des petites annonces pro), si chaque résultat est affecté à
une catégorie et que plusieurs résultats peuvent faire partie de la même
catégorie (en l'occurrence la rubrique de l'annonce), on ne peut plus
utiliser les schémas précédents.
Ce que j'ai fait alors, c'est identifier chaque résultat par une
concaténation de son identifiant propre avec celui de sa catégorie.
Cela permet ensuite toute manipulation, côté client ou serveur, comme du
tri, masquage, etc.
Exemple, avec le schéma id="annonce_idRubrique_idAnnonce" :
<div id="listeAnnonces">
<p id="annonce_1_123>...</p>
<p id="annonce_3_789>...</p>
<p id="annonce_1_456>...</p>
... etc.
</div>
Très facile, ensuite de masquer, par javascript, les annonces de la
rubrique "1", par exemple.
Et aucune chance que deux identifiants soient identiques !
--
Cordialement,
Pascal
> Le 24/08/2011 08:21, Une Bévue a écrit :
> > SAM<stephanemor...@wanadoo.fr.invalid> wrote:
> >> <li>je suis normal</li>
> >> <li><span>index 1</span>je suis spécial</li>
> >> <li><span>index 2</span>moi z'ossi</li>
> >>
> >> li span { display: none }
> >
> > Ah ben voila, c'est tout simple; je ,me disait auissi pourquoi ducros y
> > se décarcasse...
>
> Je te conseille quand même de coller une classe spécifique à ton "span"
> invisible (ou plus précisément, non affiché), si tu retiens cette
> solution, car cette balise pourrait te servir dans d'autres contextes.
>
> Maintenant, on a peut-être pas assez d'éléments pour comprendre
> exactement ton besoin et le recours à cette "astuce".
c'est très simple, dans une bd j'ai une table 'categories' avec deux
champs :
idx INTEGER NOT NULL
name TEXT NOT NULL
ce que je présente c'est "name" mais je souhaite avoir aussi "idx"
(l'index) de manière à pouvoir présenter une autre table "items" dont
chaque item appartient à une catégorie et dans cette dernière table,
c'est le champs "cat" qui donne l'index de la catégorie.
ainsi dans la seconde colonne (visuellement, en partant de la gauche) je
peux préenter tous les items qui appartient à cette catégorie en faisant
une requête sql du genre :
'SELECT * FROM items WHERE cat=idx;"
l'idx étant fourni par le li où on a cliqué moyennant petite manip dom.
> Par exemple, avec un contenu très hiérarchisé, voici ce qu'il m'est
> arrivé de pondre, tout simplement :
>
> <div id="cat_1">
> <p id="subcat_1>...</p>
> <p id="subcat_2>...</p>
> ...
> </div>
> <div id= cat_2>... etc.
>
> ou encore :
>
> <ul id="cat_1">
> <li id="subcat_1>...</li>
> <li id="subcat_2>...</li>
> </ul>
> <ul id="cat_2">... etc.
>
> Par contre, dans une suite de résultats présentés en ligne (en
> l'occurrence des petites annonces pro), si chaque résultat est affecté à
> une catégorie et que plusieurs résultats peuvent faire partie de la même
> catégorie (en l'occurrence la rubrique de l'annonce), on ne peut plus
> utiliser les schémas précédents.
je n'ai pas ce problème car je répète le même principe au niveau des
items où j'aurai "une variable cachée" qui me donnera son index.
> Ce que j'ai fait alors, c'est identifier chaque résultat par une
> concaténation de son identifiant propre avec celui de sa catégorie.
> Cela permet ensuite toute manipulation, côté client ou serveur, comme du
> tri, masquage, etc.
>
> Exemple, avec le schéma id="annonce_idRubrique_idAnnonce" :
>
> <div id="listeAnnonces">
> <p id="annonce_1_123>...</p>
> <p id="annonce_3_789>...</p>
> <p id="annonce_1_456>...</p>
> ... etc.
> </div>
>
> Très facile, ensuite de masquer, par javascript, les annonces de la
> rubrique "1", par exemple.
> Et aucune chance que deux identifiants soient identiques !
je n'ai pas besoin de cela car ma recherche se fait par sql via php et
xhr.
la solution :
<li class="categorie">Formulaires<span class="cache">1</span></li>
avec
span.cache { hidden };
me va très bien.
vu qu"autour de "Formulaires<span class="cache">1</span>" je vais mettre
un a href, ou onclick sur le li qui va m'envoyer this dans lequel je
pourrai trouver le contenu du span cache et donc l'index.
--
« C'est aujourd'hui que commence le reste de ta vie. »
(Dale Carnegie)
> je n'ai pas besoin de cela car ma recherche se fait par sql via php et
> xhr.
> la solution :
> <li class="categorie">Formulaires<span class="cache">1</span></li>
ce que j'ai mis dans le code php :
echo ' <li class="categorie" onlick="selectCat(this);return
false">'.$row['name'].'<span
class="cache">'.$row['idx'].'</span></li>'.$lf;
ce qui donne en html :
<li class="categorie" onlick="selectCat(this);return
false">Formulaires<span class="cache">0</span></li>
la function selectCat( n'est pas appellée :
function selectCat(o) {alert("toto")
alert(o.getElementsByTagName('span')[0].text);
Tu veux peut-être dire :
span.cache { visibility: hidden; }
Mais dans ce cas, le contenu du <span> prendra sa place dans le flux !
Si tu veux qu'il ne soit pas affiché (différent de "invisible"), il faut
écrire :
span.cache { display: none; }
>
> me va très bien.
>
> vu qu"autour de "Formulaires<span class="cache">1</span>" je vais mettre
> un a href, ou onclick sur le li qui va m'envoyer this dans lequel je
> pourrai trouver le contenu du span cache et donc l'index.
Je crois avoir compris, mais alors il me semble plus simple de faire :
<ul class="categories">
<li id="cat_1">Formulaires</li>
...
</ul>
Au niveau CSS, déjà, tu remonte la classe au conteneur, ça évite les
répétitions inutiles, avec :
ul.categories li {...ton style d'item de liste...}
Ensuite, au niveau HTML et JS, tu ne devrais pas avoir de risque de
doublons sur les attributs "id", non ?
Enfin, avec JS, tu auras beaucoup plus de facilité (et de rapidité) à
récupérer l'id du <li> que le contenu du <span>, pour le balancer à XHR
ou autres.
Je pars du principe que tu auras géré un "onclick" sur chaque <li>.
Si tu préfère ajouter un lien explicite, alors il vaut mieux mettre l'id
sur le lien <a>, plutôt que sur le <li>.
--
Cordialement,
Pascal
function affiche(BdD) {
var n = BdD.length,
c,
z = 0,
cible = document.getElementById('categories');
cible.innerHTML = '';
while(z<n) {
c = document.createElement('LI');
c.idx = BdD[z].idx;
c.innerHTML = BdD[z].texte;
c.onclick = recup;
cible.appendChild(c);
z++
}
}
function recup() {
alert('index = '+ this.idx +
'\ncontenu = '+this.innerHTML);
}
<ul id="categories">
<li onclick="affiche(
[{idx:1,texte:'salut'},{idx:2,texte:'Yvon'}]
)">cliquez-moi</li>
</ul>
et, au clic, ça donne :
<ul id="categories">
<li>salut</li>
<li>Yvon</li>
</ul>
dont auquel le JS connaitra les index idx
> > avec
> > span.cache { hidden };
>
> Tu veux peut-être dire :
> span.cache { visibility: hidden; }
oui, oui, c'était du "symbolique", j'ai mis :
li.categorie span.cache { display: none }
> Mais dans ce cas, le contenu du <span> prendra sa place dans le flux !
> Si tu veux qu'il ne soit pas affiché (différent de "invisible"), il faut
> écrire :
> span.cache { display: none; }
>
> >
> > me va très bien.
> >
> > vu qu"autour de "Formulaires<span class="cache">1</span>" je vais mettre
> > un a href, ou onclick sur le li qui va m'envoyer this dans lequel je
> > pourrai trouver le contenu du span cache et donc l'index.
>
> Je crois avoir compris, mais alors il me semble plus simple de faire :
>
> <ul class="categories">
> <li id="cat_1">Formulaires</li>
> ...
> </ul>
>
oui, mais il y a encore plus simple, comme le code html est généré par
xhr/php/sql, j'ai mis ca :
<li class="categorie" onlick="selectCat(this);return
false">Formulaires<span class="cache">0</span></li>
qui peut se simplifier en :
<li class="categorie" onlick="selectCat(-1);return
false">Formulaires</li>
mais bon, pour l'instant, mon onclick n'active pas le selectCat...
> Au niveau CSS, déjà, tu remonte la classe au conteneur, ça évite les
> répétitions inutiles, avec :
> ul.categories li {...ton style d'item de liste...}
>
> Ensuite, au niveau HTML et JS, tu ne devrais pas avoir de risque de
> doublons sur les attributs "id", non ?
non les indexes sont uniques, SQL request...
> Enfin, avec JS, tu auras beaucoup plus de facilité (et de rapidité) à
> récupérer l'id du <li> que le contenu du <span>, pour le balancer à XHR
> ou autres.
avec ma -nouvelle- version; j'ai directement le bon index, sans
tripatouillage.
> Je pars du principe que tu auras géré un "onclick" sur chaque <li>.
oui mais il ne marche pô...
> Si tu préfère ajouter un lien explicite, alors il vaut mieux mettre l'id
> sur le lien <a>, plutôt que sur le <li>.
oui, c'est sur
--
« Les seuls problèmes que l'argent peut résoudre sont
des problèmes d'argent. »
(Kin Hubbard)
ben oui !
onlick
onclick
attention à l'orthografeux
> function selectCat(o) {alert("toto")
> alert(o.getElementsByTagName('span')[0].text);
> }
>
o.getElementsByTagName('span')
marchicotera si on n'est pas en Xhtml
à ce compte :
o.getElementsByTagName('span')[0]
on se demande si vraiment la classe 'cache' sert à qque chose ?!
#categories li span { display: none } /* ou visibility:hidden; */
Ou, si on ne veut que le 1er span en invisible :
#categories li span:first-child { display: none }
<ul id="categories">
<li>bla bla <span>un</span> <pan>deux</span></li>
</ul>
> dont auquel le JS connaitra les index idx
ouais te fatigues pas trop, j'ai trouvé un truc extrêmement simple :
<li class="categorie" onlick="selectCat(1);return false">Groupes de
discussion</li>
avec le js :
function selectCat(cat) {
alert("cat = "+cat);
}
mais bon, je ne pige pas pourquoi mais la fonction selectCat( n'est pas
activée...
> > la function selectCat( n'est pas appellée :
>
> ben oui !
> onlick
> onclick
> attention à l'orthografeux
Arff putingue, difficile à voir pour moi !!!
merci beaucoup, je n'aurai pas regardé de ce côté là...
> > function selectCat(o) {alert("toto")
> > alert(o.getElementsByTagName('span')[0].text);
> > }
> >
>
> o.getElementsByTagName('span')
>
> marchicotera si on n'est pas en Xhtml
>
>
>
> à ce compte :
> o.getElementsByTagName('span')[0]
> on se demande si vraiment la classe 'cache' sert à qque chose ?!
là elle ne sert plus à rien; je n'ai plus de span non plus...
> #categories li span { display: none } /* ou visibility:hidden; */
>
>
> Ou, si on ne veut que le 1er span en invisible :
>
> #categories li span:first-child { display: none }
>
> <ul id="categories">
> <li>bla bla <span>un</span> <pan>deux</span></li>
> </ul>
--
Ho! ça m'fatigue pas, ça vient tout seul ;-)
> j'ai trouvé un truc extrêmement simple :
> <li class="categorie" onlick="selectCat(1);return false">Groupes de
> discussion</li>
y a + simple :
<li class="categorie" onclick="return selectCat(1)">discussion</li>
et même (vu que ce n'est pas un A)
<li class="categorie" onclick="selectCat(1)">discussion</li>
> avec le js :
> function selectCat(cat) {
> alert("cat = "+cat);
> }
>
> mais bon, je ne pige pas pourquoi mais la fonction selectCat( n'est pas
> activée...
à cause de la typo sur le onlick !
Arrrgh ! PHP fait le sale boulot, alors on peut balancer trois tonnes de
HTML.
Bien sûr, cela peut fonctionner, mais avec beaucoup d'imperfections.
Essaye ce code en local, par exemple :
---------------------------
<html>
<head>
<title>Test JS</title>
<style>
ul#categories li {
text-decoration: underline;
cursor: pointer;
}
ul#categories li:hover {
color: red;
}
</style>
<script>
function lister(event) {
var item = event ? event.target : window.event.srcElement;
var categorie = item.id.split("_")[1];
var resultat = document.getElementById("resultat");
resultat.innerHTML = categorie;
}
</script>
</head>
<body>
<p>Liste de catégories</p>
<ul id="categories">
<li id="cat_1">Cat. 1</li>
<li id="cat_2">Cat. 2</li>
<li id="cat_3">Cat. 3</li>
</ul>
<p>Vous avez choisi la catégorie : <span id="resultat"></span></p>
<script>
document.getElementById("categories").onclick = lister;
</script>
</body>
</html>
---------------------------
Bon, à part le "hover" qui n'est toujours pas reconnu par MSIE, ça me
parait plus limpide, non ? Donc plus facile à déboguer !
--
Cordialement,
Pascal
Je commence touj par ça
(surtout si tte la fonction ne fonctionne pas)
trop de galères à cause d'une de ces bêtes typos :-(
(surtout à mes débuts)
et puis ... c'est souvent + facile avec un œuil neuf
> Bon, à part le "hover" qui n'est toujours pas reconnu par MSIE, ça me
> parait plus limpide, non ? Donc plus facile à déboguer !
of; ?SIE est le cadet de mes soucis vu que je suis sur mac et que ces
pâges sont d'usage perso...
--
« Le verbe aimer est difficile à conjuguer : son passé
n'est pas simple, son présent n'est qu'indicatif, et
son futur est toujours conditionnel. »
(Jean Cocteau)
> <li class="categorie" onclick="selectCat(1)">discussion</li>
il n'y a donc pas besoin du "; return false" ???
je ne sais jamais quand il est nécessaire.
Nécessaire quand on veut contrarier le comportement par défaut de
l'élément HTML, hors gestion d'événement personnalisée.
Par exemple, pour empêcher un lien de demander la page référencée, ou un
formulaire d'envoyer les données saisies, il faut retourner la valeur
"false" à la propriété (ou l'attribut HTML) qui gère ces comportements.
--
Cordialement,
Pascal
> > il n'y a donc pas besoin du "; return false" ???
> > je ne sais jamais quand il est nécessaire.
>
> Nécessaire quand on veut contrarier le comportement par défaut de
> l'élément HTML, hors gestion d'événement personnalisée.
>
> Par exemple, pour empêcher un lien de demander la page référencée, ou un
> formulaire d'envoyer les données saisies, il faut retourner la valeur
> "false" à la propriété (ou l'attribut HTML) qui gère ces comportements.
OK, merci bien pour cette clarification !!!
--
« L'univers n'est qu'un défaut dans la pureté du non-être. »
(Paul Valéry)