dl dt dd imbriquées comment collapser ?
Une Bévue
version d'une maquette d'un client NNTP.
les articles sont imbriqués par dl, dt et dd
les dt contenant le sujet du post ;
les dd le corps du post
l'imbrication est aisnsi faite :
<dl>
<dt>Sujet message source</dt>
<dd>Corps message source</dd>
<dl>
<dt>Sujet réponse 1 niveau 1</dt>
<dd>Corps réponse 1 niveau 1</dd>
...
<dt>Sujet réponse n niveau 1</dt>
<dd>Corps réponse n niveau 1</dd>
</dl>
</dl>
comment faire pour qu'un <dd /> (corps du message) n'apparaisse que par
click ou survol du sujet <dt /> correspondant.
et que tous les sujets réponse au message apparaissent ?
ya besoin de js pour ça ou css suffit ?
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
SAM
> � la page <http://88.183.202.165/nntp/nntp.html> j'ai une toute premi�re
> version d'une maquette d'un client NNTP.
>
>
> les dt contenant le sujet du post ;
> les dd le corps du post
>
> l'imbrication est aisnsi faite :
>
> <dl>
> <dt>Sujet message source</dt>
> <dd>Corps message source</dd>
> <dl>
heu ... l� �a doit certainement �tre :
<dd>Corps message source
<dl>
<dt>Sujet r�ponse 1 niveau 1</dt>
<dd>Corps r�ponse 1 niveau 1</dd>
</dl>
</dd>
> <dd>Corps r�ponse 1 niveau 1</dd>
> ...
> <dt>Sujet r�ponse n niveau 1</dt>
> <dd>Corps r�ponse n niveau 1</dd>
> </dl>
> </dl>
>
> comment faire pour qu'un <dd /> (corps du message) n'apparaisse que par
> click ou survol du sujet <dt /> correspondant.
>
> et que tous les sujets r�ponse au message apparaissent ?
>
> ya besoin de js pour �a ou css suffit ?
Je dirais ... JS oblige
exemple (non IE) :
<script type="text/javascript">
function ouvreFerme(e) {
if(!!e) e.stopPropagation();
var ici = this.getElementsByTagName('DD')[0].style;
ici.display = ici.display==''? 'block' : '';
}
function init() {
var d = document.getElementsByTagName('DL'), n=d.length;
if(d) while(n--) d[n].onclick = ouvreFerme;
}
window.onload = init;
</script>
<style type="text/css">
dl dd { display: none; }
dt { background: #ffc; }
dt:hover { background: #ff0; }
</style>
</head>
<body>
<dl>
<dt>Sujet message source</dt>
<dd>Corps message source
<dl>
<dt>Sujet r�ponse 1 niveau 1</dt>
<dd>Corps r�ponse 1 niveau 1</dd>
</dl>
<dl>
<dt>Sujet r�ponse n niveau 1</dt>
<dd>Corps r�ponse n niveau 1</dd>
</dl>
</dd>
</dl>
Mais tu peux essayer, pour le mouseOver, la css :
dl dd,
dl:hover dd dl dd { display: none; }
dl:hover dd,
dl:hover dd dl:hover dd { display: block }
doit avoir moyen de faire mieux en css.3
--
sm
Une Bévue
>
>
> heu ... là ça doit certainement être :
>
> <dd>Corps message source
> <dl>
> <dt>Sujet réponse 1 niveau 1</dt>
> <dd>Corps réponse 1 niveau 1</dd>
> </dl>
> </dd>
Ah oui, bonne idée, merci.
> > <dd>Corps réponse 1 niveau 1</dd>
> > ...
> > <dt>Sujet réponse n niveau 1</dt>
> > <dd>Corps réponse n niveau 1</dd>
> > </dl>
> > </dl>
> >
> > comment faire pour qu'un <dd /> (corps du message) n'apparaisse que par
> > click ou survol du sujet <dt /> correspondant.
> >
> > et que tous les sujets réponse au message apparaissent ?
> >
> > ya besoin de js pour ça ou css suffit ?
>
> Je dirais ... JS oblige
sans doute.
> exemple (non IE) :
>
> <script type="text/javascript">
> function ouvreFerme(e) {
> if(!!e) e.stopPropagation();
> var ici = this.getElementsByTagName('DD')[0].style;
> ici.display = ici.display==''? 'block' : '';
> }
> function init() {
> var d = document.getElementsByTagName('DL'), n=d.length;
> if(d) while(n--) d[n].onclick = ouvreFerme;
> }
> window.onload = init;
> </script>
> <style type="text/css">
marche pas pour l'instant
> dl dd { display: none; }
> dt { background: #ffc; }
> dt:hover { background: #ff0; }
> </style>
> </head>
> <body>
> <dl>
> <dt>Sujet message source</dt>
> <dd>Corps message source
> <dl>
> <dt>Sujet réponse 1 niveau 1</dt>
> <dd>Corps réponse 1 niveau 1</dd>
> </dl>
> <dl>
> <dt>Sujet réponse n niveau 1</dt>
> <dd>Corps réponse n niveau 1</dd>
> </dl>
> </dd>
> </dl>
>
>
> Mais tu peux essayer, pour le mouseOver, la css :
>
> dl dd,
> dl:hover dd dl dd { display: none; }
> dl:hover dd,
> dl:hover dd dl:hover dd { display: block }
c'est pas terrible car ça peut échapper, enfin à creuser...
> doit avoir moyen de faire mieux en css.3
pourquoi les hover et descendant sont + performant en CSS3 ?
Une Bévue
> Méthodes CSS en cliquant (la méthode au survol avec :hover a déjà été
> indiquée) :
>
> <style type="text/css">
> dd { display:none; }
>
> dt + dd:target { display:block; }
> </style>
ouais, super, un petit essai :
<http://88.183.202.165/nntp/dd_target.html>
reste à verifier quand c'est imbriquer, mais a priori c'est ce qu'il me
faut !
merci beaucoup !
bon apparemment, en imbriqué, ça marche pas aussi bien...
<http://88.183.202.165/nntp/nntp.html#node00>
Une Bévue
> <script type="text/javascript">
> function ouvreFerme(e) {
> if(!!e) e.stopPropagation();
> var ici = this.getElementsByTagName('DD')[0].style;
> ici.display = ici.display==''? 'block' : '';
> }
> function init() {
> var d = document.getElementsByTagName('DL'), n=d.length;
> if(d) while(n--) d[n].onclick = ouvreFerme;
> }
> window.onload = init;
> </script>
bon, finalement il marche tr�s bien ton p'tit js !
emrci !!!
<http://88.183.202.165/nntp/nntp.html>
j'ai fait un p'tit essai de thread (INFILADES USENET) ici :
<http://88.183.202.165/nntp/following_id.html>
--
� La chambre des d�put�s, la moiti� sont bons � rien.
Les autres sont pr�ts � tout. �
(Coluche)
SAM
> SAM <stephanemor...@wanadoo.fr.invalid> wrote:
>
>> exemple (non IE) :
>>
>> <script type="text/javascript">
>> function ouvreFerme(e) {
>> if(!!e) e.stopPropagation();
>> var ici = this.getElementsByTagName('DD')[0].style;
>> ici.display = ici.display==''? 'block' : '';
>> }
>> function init() {
>> var d = document.getElementsByTagName('DL'), n=d.length;
>> if(d) while(n--) d[n].onclick = ouvreFerme;
>> }
>> window.onload = init;
>> </script>
>> <style type="text/css">
>
> marche pas pour l'instant
chez moi ça fonctionnait, testé Fx.3 et Safari.4
(+ ou - bien : il faut recliquer 1 à 1 pour refermer)
>> Mais tu peux essayer, pour le mouseOver, la css :
>>
>> dl dd,
>> dl:hover dd dl dd { display: none; }
>> dl:hover dd,
>> dl:hover dd dl:hover dd { display: block }
>
> c'est pas terrible car ça peut échapper, enfin à creuser...
>
>> doit avoir moyen de faire mieux en css.3
>
> pourquoi les hover et descendant sont + performant en CSS3 ?
non, mais par exemple: :target
je ne le vois pas ici :
<http://www.w3.org/TR/CSS21/indexlist.html>
et ... ils ont peut-être inventé des trucs arrière en css.3 ?
tenté :focus
mais ça doit demander comme :target d'être appliqué à un lien
alors faudrait que les sous-mails soit dans le lien
ainsi que les sous-sous-mails
et c'est "interdit" (pas de a dans un a)
--
sm
Une Bévue
> non, mais par exemple: :target
> je ne le vois pas ici :
> <http://www.w3.org/TR/CSS21/indexlist.html>
> et ... ils ont peut-être inventé des trucs arrière en css.3 ?
>
> tenté :focus
> mais ça doit demander comme :target d'être appliqué à un lien
>
> alors faudrait que les sous-mails soit dans le lien
> ainsi que les sous-sous-mails
> et c'est "interdit" (pas de a dans un a)
oui, j'ai fait une tentative, ça marche très bien quand les dl/dt-dd ne
sont pas imbriqués sinon en cliquant dans un niveau inférrieur ça ferme
le niveau supérieur.
je pense que ton p'tit script c'est nettement mieux, mes deux essais
avec target :
<http://88.183.202.165/nntp/dd_target.html> celui qui suit le conseil de
Bruno et est NON imbriqué.
<http://88.183.202.165/nntp/nntp.html> version imbriquée MAIS, c'est ton
script qui fait que ça marche...
première tentative de visualisation de thread :
<http://88.183.202.165/nntp/following_id.html>
SAM
> Une Bévue a écrit :
>
>> l'imbrication est aisnsi faite :
>>
>> <dl>
>> <dt>Sujet message source</dt>
>> <dd>Corps message source</dd>
>> <dl>
>> <dt>Sujet réponse 1 niveau 1</dt>
>> <dd>Corps réponse 1 niveau 1</dd>
>> ...
>> <dt>Sujet réponse n niveau 1</dt>
>> <dd>Corps réponse n niveau 1</dd>
>> </dl>
>> </dl>
>>
>> comment faire pour qu'un <dd /> (corps du message) n'apparaisse que par
>> click ou survol du sujet <dt /> correspondant.
>>
>> et que tous les sujets réponse au message apparaissent ?
>
> indiquée) :
>
> <style type="text/css">
> dd { display:none; }
>
> dt + dd:target { display:block; }
> </style>
> <body>
> <dl>
> <dt><a href="#a">Lorem ipsum</a></dt>
> <dd id="a">Paphius quin etiam et Cornelius senatores, </dd>
> </dl>
Ha! Oui! astucieux.
Mais ...
pas parvenu à faire fonctionner avec des dl imbriqués dans les dd
Ya pas de stopPropagation() en css ?
--
sm
SAM
> SAM <stephanemor...@wanadoo.fr.invalid> wrote:
>
>> window.onload = init;
>> </script>
>
> emrci !!!
> <http://88.183.202.165/nntp/nntp.html>
Y m'semblaitossi ;-)
J'ai l'impression que j'ai une amélioration ici :
<http://cjoint.com/data/gqs3Vp0hIH.htm>
> j'ai fait un p'tit essai de thread (INFILADES USENET) ici :
> <http://88.183.202.165/nntp/following_id.html>
Grandiose !
Un peu lent mais sublime !
Bon ... y a des moments où on ne comprend plus trop
comme si un post appartenait à plusieurs sous-thread
(comme on ne peut glisser l'machin sur la gauche, difficile de voir)
--
sm
Une Bévue
> J'ai l'impression que j'ai une amélioration ici :
> <http://cjoint.com/data/gqs3Vp0hIH.htm>
>
> > j'ai fait un p'tit essai de thread (INFILADES USENET) ici :
> > <http://88.183.202.165/nntp/following_id.html>
ah ouais, c'est + pratique !
> Grandiose !
> Un peu lent mais sublime !
>
> Bon ... y a des moments où on ne comprend plus trop
> comme si un post appartenait à plusieurs sous-thread
> (comme on ne peut glisser l'machin sur la gauche, difficile de voir)
ouais le cadrage n'est pas fameux pour l'instant.
le centrage au milieu est stupide...
petit à petit je changerai des truc.
déjà j'arrive à générer le json, et le html, depuis ruby.
m'enfin c'est pas du "direct live"...
SAM
> SAM <stephanemor...@wanadoo.fr.invalid> wrote:
>
>> J'ai l'impression que j'ai une amélioration ici :
>> <http://cjoint.com/data/gqs3Vp0hIH.htm>
>>
>>> j'ai fait un p'tit essai de thread (INFILADES USENET) ici :
>>> <http://88.183.202.165/nntp/following_id.html>
>
> ah ouais, c'est + pratique !
au truc vert, je te propose de rajouter ça :
dd dl.nntp {
margin-right: -0.4em;
width: auto;
}
> déjà j'arrive à générer le json, et le html, depuis ruby.
>
> m'enfin c'est pas du "direct live"...
Ha? je pensais que tu wgeté direct ;-)
Un peu comme tous ces site-forum qui pompent direct usenet.
--
sm
Une Bévue
>
> au truc vert, je te propose de rajouter ça :
>
> dd dl.nntp {
> margin-right: -0.4em;
> width: auto;
> }
ouais, c'est + zauli com' ça !