dl dt dd imbriquées comment collapser ?

Le
unbewusst.sein
à 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 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)
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22263331
Le 6/16/10 10:40 AM, Une Bévue a écrit :
à la page 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>




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
bruno666
Le #22264511
Une Bévue a écrit :

à la page 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 ?




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>
</head>
<body>
<dl>
<dt><a href="#a">Lorem ipsum</a></dt>
<dd id="a">Paphius quin etiam et Cornelius senatores, ambo venenorum
artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt
interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim
et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos
vellent, adiecta religione firmarat, nullum igni vel ferro se puniri
iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem
aruspicem dedit, in negotio eius nullo sacramento constrictus</dd>
<dt><a href="#b">Lorem ipsum</a></dt>
<dd id="b">Paphius quin etiam et Cornelius senatores, ambo venenorum
artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt
interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim
et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos
vellent, adiecta religione firmarat, nullum igni vel ferro se puniri
iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem
aruspicem dedit, in negotio eius nullo sacramento constrictus</dd>
<dt><a href="#c">Lorem ipsum</a></dt>
<dd id="c">Paphius quin etiam et Cornelius senatores, ambo venenorum
artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt
interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim
et Asbolium supra dictos, quoniam cum hortaretur passim nominare, quos
vellent, adiecta religione firmarat, nullum igni vel ferro se puniri
iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem
aruspicem dedit, in negotio eius nullo sacramento constrictus</dd>
</dl>





--
Bruno
unbewusst.sein
Le #22264731
SAM


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 ?
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
unbewusst.sein
Le #22264801
bruno666
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 :

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...
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
unbewusst.sein
Le #22264881
SAM
<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 !!!

j'ai fait un p'tit essai de thread (INFILADES USENET) ici :
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
SAM
Le #22264951
Le 6/16/10 4:59 PM, Une Bévue a écrit :
SAM
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 :
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
unbewusst.sein
Le #22264941
SAM
non, mais par exemple: :target
je ne le vois pas ici :
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 :

Bruno et est NON imbriqué.
script qui fait que ça marche...

première tentative de visualisation de thread :
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
SAM
Le #22265391
Le 6/16/10 4:01 PM, bruno666 a écrit :
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 ?



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>
</head>
<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
Le #22265501
Le 6/16/10 5:22 PM, Une Bévue a écrit :
SAM
window.onload = init;
</script>



bon, finalement il marche très bien ton p'tit js !
emrci !!!



Y m'semblaitossi ;-)

J'ai l'impression que j'ai une amélioration ici :

j'ai fait un p'tit essai de thread (INFILADES USENET) ici :



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
unbewusst.sein
Le #22265671
SAM
J'ai l'impression que j'ai une amélioration ici :

> j'ai fait un p'tit essai de thread (INFILADES USENET) ici :
>


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"...
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
Publicité
Poster une réponse
Anonyme