Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP dl dt dd imbriquées comment collapser ?

dl dt dd imbriquées comment collapser ?

12 réponses
Avatar
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)
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
SAM
Le 6/16/10 10:40 AM, Une Bévue a écrit :
à 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>




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

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




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
Avatar
unbewusst.sein
SAM wrote:



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)
Avatar
unbewusst.sein
bruno666 <bruno+ wrote:

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

<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)
Avatar
SAM
Le 6/16/10 4:59 PM, Une Bévue a écrit :
SAM 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
Avatar
unbewusst.sein
SAM wrote:

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>
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
Avatar
SAM
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
Avatar
SAM
Le 6/16/10 5:22 PM, Une Bévue a écrit :
SAM wrote:

window.onload = init;
</script>



bon, finalement il marche très bien ton p'tit js !
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
Avatar
unbewusst.sein
SAM 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 !

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)
1 2