Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript Comment appliquer un "masque de visibilité/invisibilité" d'un arbre de sur une page équivalente

Comment appliquer un "masque de visibilité/invisibilité" d'un arbre de sur une page équivalente

19 réponses
Avatar
Num GG
Bonjour,

Consid=E9rons cette page:
-----------------------------------------------------------
<div id=3D1>bla bla bla</div>
<div id=3D2 style=3D"display: none;"> bla bla bla</div>
<div id=3D3> encore du bla bla bla </div>
<div id=3D4 style=3D"display: none;">bla bla:
<div id=3D4.1>un bla bla </div>
<div id=3D4.2>un autre bla bla </div>
</div>
<div id=3D5 style=3D"display: none"> bla </div>
-----------------------------------------------------------
+ Sur cette page, les divs 1 et 3 sont visibles.
+ Les divs 2, 4 et 5 sont cach=E9s (de m=EAme que 4.1, 4.2 puiqu'ils sont
enfants du div 4).
+ On consid=E8re que cette page est la "r=E9f=E9rence" en terme de
visibilit=E9/invisibilit=E9 des divs. Une sorte de masque en quelque
sorte.

Maintenant, consid=E9rons cette nouvelle page:
-----------------------------------------------------------
<div id=3D1>bla bla bla</div>
<div id=3D2> bla bla bla</div>
<div id=3D3> encore du bla bla bla </div>
<div id=3D4>bla bla:
<div id=3D4.1>un bla bla </div>
<div id=3D4.2>un autre bla bla </div>
<div id=3D4.3>tiens, encore un autre nouveau bla bla </div>
</div>
<div id=3D5> bla </div>
<div id=3D6> et la encore un nouveau div </div>
-----------------------------------------------------------
+ A peu de choses pr=E8s, cette page est la m=EAme que celle de r=E9f=E9ren=
ce,
sauf que:
- Tous les divs sont visibles
- Le div 4.3 est apparu
- Le div 6 est nouveau aussi.

D'o=F9 ma question:
Pour cette seconde page, au vu de ma page de r=E9f=E9rence, comment faire
pour:
- laisser divs 1 et 3 visible
- cacher divs 2, 4, 5 (ainsi que, bien s=FBr tous les divs enfants de
4)
- cacher div 6 aussi.

J'ai essay=E9 en JS en utilisant par un tableau de divs contenant tous
les divs de la page de r=E9f=E9rence.
J'it=E8re sur un second tableau de div contenant ceux de la second page.
Je recopie le style de la div de r=E9f=E9rence correspondante.
Ca marche bien mais _uniquement si le nombre de div est identique et
si l'arborescence est identique_. Ce qui est normal puisque le tableau
de div "applatit" l'arborescence des divs. Du coup, cet algo perd les
p=E9dales lorsqu'il y a un nouveau sous div qui apparait (cas du #4.3 et
du #6).

Comment pourrait-on faire en JS?
Doit-on passer par exemple par un treewalker? Ou ne peut-on g=E9rer cela
que c=F4t=E9 serveur?

Quelques id=E9es? suggestions?

Merci

Num,
Signaler un problème avec ce contenu

9 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
1 connu
Il te faudrait faire un serveur proxy avec un vrai langage (Java par ex).
Apres lecture de la page originale demandée, tu pourrais la filtrer à ta convenance.
Bien sur, les utilisateurs devront passer par ton site et non par les sites originaux.



"Num GG" a écrit dans le message de news:
Il me semble que c'est tr?s simple :

<html>
<style type="text/css">

div { display: none; border:1px solid; margin:20px }
div div { display: block; }
#d1, #d3 { display: block; }

Ben pourquoi en JS ?
Les CSS sont en rideau ?




Merci Sam pour cette réponse mais, par souci de concision, j'ai omis
de préciser certaines contraintes importantes dans mon code:
-Contrainte 1: La solution doit s'adapter à n'importe quel site. Elle
doit donc être totalement "dynamique". C'est à dire qu'on pourrait
imaginer de disposer d'une "banque de masques" en fonction des sites
référencés.
Ex:
www.monsite.com => tel masque de visibilité des divs
www.autresite.net => tel autre masque de visibilité des divs.
etc...

Cela veut dire que je veux pouvoir consulter tel site
(www.monsite.com ) non pas avec la présentation des styles de base
fournie par le site lui même, mais avec "mon masque de visibilité à
moi". Je travaille UNIQUEMENT sur les divs. C'est à dire:
Pour ce site (www.monsite.com) j'ai:
-tel div: visible,
-tel autre div: hidden, etc...

Pour cet autre site (www.autresite.net) j'ai:
-tel div: hidden,
-tel autre div: visible
-tel div: visible. etc...

Cela implique la deuxième contrainte:
-Contrainte 2: Par définition, je ne maitrise pas le code des sites
tiers (ceux qui sont référencés) et donc je ne peux préjuger de
l'arborescence des divs de leurs pages ni des identifiants des <div>.
Je dois même traiter en majorité avec des divs anonymes. (!!!)

Cela explique pourquoi:
1°/ J'ai effectivement mis les "CSS en rideau" ;).

Les CSS sont, sauf erreur de ma part, adaptées dans le cas (certes, le
plus répandu) où on maitrise le code que l'on traite.
Ton extrait de code fonctionne donc bien dans le cas où tu n'as qu'un
type de page à traiter et où tu as la main sur le code (tu peux
notamment -comme tu l'as fait ici- donner des identifiants aux divs).

Or, là, je souhaite "triturer" un peu de manière dynamique le code de
sites tiers. ;))

2°/ Je pense que la solution pourrait se trouver dans une
confrontation de deux sous-arbres DOM (ne contenant que les DIV).
Ainsi, j'aurais:
+ d'un côté l'arbre DOM de DIVS de référence,
+ de l'autre l'arbre de DIV de la page que j'ai à traiter.

En naviguant dans ce dernier arbre, je pourrais itérer sur chaque
noeud DIV, rechercher le noeud DIV correspondant dans l'arbre de
référence. Si je le trouve, alors je n'ai plus qu'à appliquer sur le
noeud DIV à traiter le style du noeud DIV de référence. Le problème
c'est que je ne suis pas sur que les arbres soient totalement
identiques en terme de structure. Par exemple, entre l'arbre de
référence et l'arbre à traiter je peux avoir de nouveaux noeuds.

Bon, je sais, ça parait un peu fumeux tout ça, mais est-ce que tu vois
au moins l'idée générale?

D'autres idées?

Num
Avatar
Laurent vilday
1 connu a écrit :
Il te faudrait faire un serveur proxy avec un vrai langage (Java par ex).



Mwarff, j'ai bien du mal à compter le nombre de troll délicatement
placés dans cette phrase.

Apres lecture de la page originale demandée, tu pourrais la filtrer à ta convenance.
Bien sur, les utilisateurs devront passer par ton site et non par les sites originaux.



Bien sûr l'aspect légal de la chose sera à clairement définir avant mise
à disposition de ce dispositif.

--
laurent
Avatar
1 connu
"Laurent vilday" a écrit dans le message de news: 492417f0$0$13232$
1 connu a écrit :
Il te faudrait faire un serveur proxy avec un vrai langage (Java par ex).



Mwarff, j'ai bien du mal à compter le nombre de troll délicatement placés dans cette phrase.



Je voulais dire un vrai langage serveur.
Loin de moi, l'idée de que JS n'est pas un vrai langage.
Avatar
Num GG
On 18 nov, 23:07, Olivier Miakinen <om+ wrote:
Bonjour,

Ayant parcouru l'ensemble des réponses qui t'ont été faites, je pen se
que tu ne devrais pas exclure à priori les CSS des possibilités qui t e
sont offertes.

Attention, tu utilisais une syntaxe illégale pour les id, qui ne doiven t
pas commencer par un chiffre ni contenir un point. Je les corrige en
conséquence, et je les mets entre guillemets simples pour ne pas avoir
à vérifier si on peut omettre les guillemets quand ils contiennent un
Sans utiliser les id :
body > div:first-child
          { }
body > div:first-child + div
          { display: none !important; }
body > div:first-child + div + div
          { }
body > div:first-child + div + div + div
          { display: none !important; }
body > div:first-child + div + div + div > div:first-child
          { }
body > div:first-child + div + div + div > div:first-child + div
          { }
body > div:first-child + div + div + div > div:first-child + div + div
          { display: none !important; }
body > div:first-child + div + div + div + div
          { display: none !important; }
body > div:first-child + div + div + div + div + div
          { display: none !important; }

Bien entendu, la méthode ci-dessus nécessite un navigateur relativeme nt
conforme aux normes, donc pas MSIE6 (mais ça devrait marcher avec IE7,
comme avec toutes les versions actuelles de Mozilla, Firefox, Opera,
Safari, et ainsi de suite).

Cordialement,
--
Olivier Miakinen



Bonjour Olivier

Merci pour ton intervention.
Je ne savais pas que l'on pouvait ainsi "adresser en relatif" les divs
d'une page.
Ce n'est sans doute dans le cas général pas à utiliser (peu lisible)
mais cela peut être intéressant pour mon cas tordu.

Je vais regarder cela de près.
Avatar
Num GG
Salut Sam
> Cela veut dire que je veux pouvoir consulter tel site
> (www.monsite.com) non pas avec la présentation des  styles de base
> fournie par le site lui même, mais avec "mon masque de visibilité à
> moi". Je travaille UNIQUEMENT sur les divs.

Déjà là je rigole ...
combien de sites ont leurs pages bâties sur le système des DIVs ?
Moi je ne vois que des tables encore un peu partout.
(un au hasard : <http://www.mediadico.com/dictionnaire/>
  et qui doit être vu par un max de monde,
  ne serait-ce que par ceux utilisant Fx )



Ton mediadico.com/dictionnaire contient 103 divs. On les élague
facilement pour obtenir la div principale qui contient la définition
et, certes, je te l'accorde, encore un peu de "bruit" restant dans un
ou plusieurs tableaux encapsulés dans cette dernière div.



Heu ... la plupart du temps, les pages bâties sur le systeme de DIVs
(DOM ?) ont ces divs IDentifiés, au moins les principaux.
(sinon comment y appliquent-ils des CSS ?)


Via la "class" je suppose. J'ai vu beaucoup de cas de div sans id avec
juste l'attribut classe renseigné.

Non, je ne comprends rien à cette histoire de guide référent qui va
permettre de triturer oui/non tel ou tel DIV de telle page (ou pire
toutes les pages d'un site).



C'est assez résumé mais en gros c'est ça. :))

Tu appliques un style qui cache tout

* { display: none; }

puis tu appliques le style block à tout ce que tu as pu trouver de
valable dans le site et ce en une fois

.navBar, #content, div div ul, #main ... etc etc { display: block }



Ah oui... ça c'est hyper intéressant aussi. Cela veut dire que si une
div est venue s'intercaler entre-temps on ne la verrait pas?
(Puisqu'on a appliqué le "style qui cache tout")?

Hmmm. Je crois que je vais tester ça. Parce que si ça marche c'est
nickel.


Hormis la FdS ... non.



Je regarde cela de près.

Merci!

Num
Avatar
Olivier Miakinen
Le 19/11/2008 23:00, Num GG a écrit :
On 18 nov, 23:07, Olivier Miakinen <om+ wrote:
Bonjour,

Ayant parcouru l'ensemble des réponses qui t'ont été faites, je pense
que tu ne devrais pas exclure à priori les CSS des possibilités qui te
sont offertes.

Attention, tu utilisais une syntaxe illégale pour les id, qui ne doivent
pas commencer par un chiffre ni contenir un point. Je les corrige en
conséquence, et je les mets entre guillemets simples pour ne pas avoir
à vérifier si on peut omettre les guillemets quand ils contiennent un
Sans utiliser les id :
body > div:first-child
{ }
body > div:first-child + div
{ display: none !important; }
body > div:first-child + div + div
{ }
body > div:first-child + div + div + div
{ display: none !important; }
body > div:first-child + div + div + div > div:first-child
{ }
body > div:first-child + div + div + div > div:first-child + div
{ }
body > div:first-child + div + div + div > div:first-child + div + div
{ display: none !important; }
body > div:first-child + div + div + div + div
{ display: none !important; }
body > div:first-child + div + div + div + div + div
{ display: none !important; }

Bien entendu, la méthode ci-dessus nécessite un navigateur relativement
conforme aux normes, donc pas MSIE6 (mais ça devrait marcher avec IE7,
comme avec toutes les versions actuelles de Mozilla, Firefox, Opera,
Safari, et ainsi de suite).

Cordialement,
--
Olivier Miakinen



Bonjour Olivier

Je ne savais pas que l'on pouvait ainsi "adresser en relatif" les divs
d'une page.



http://www.w3.org/TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Ce n'est sans doute dans le cas général pas à utiliser (peu lisible)
mais cela peut être intéressant pour mon cas tordu.



Oui. Note qu'en combinant ainsi les sélecteurs « > » et « + » tu n'as
en principe pas besoin de préciser le type d'élément pour que chacun
d'entre eux soit uniquement déterminé :

body > *:first-child
{ }
body > *:first-child + *
{ display: none !important; }
body > *:first-child + * + *
{ }
body > *:first-child + * + * + *
{ display: none !important; }
body > *:first-child + * + * + * > *:first-child
{ }
body > *:first-child + * + * + * > *:first-child + *
{ }
body > *:first-child + * + * + * > *:first-child + * + *
{ display: none !important; }
body > *:first-child + * + * + * + *
{ display: none !important; }
body > *:first-child + * + * + * + * + *
{ display: none !important; }

Cela dit, en précisant au contraire le plus d'infos possible (à
commencer par les id), tu diminues le risque que ta feuille de
style soit surpassée par celle de l'auteur.
Avatar
Olivier Miakinen
[ REPOST : désolé, j'avais oublié de faire le ménage ]

Le 19/11/2008 23:00, Num GG a écrit :

Je ne savais pas que l'on pouvait ainsi "adresser en relatif" les divs
d'une page.



http://www.w3.org/TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

Ce n'est sans doute dans le cas général pas à utiliser (peu lisible)
mais cela peut être intéressant pour mon cas tordu.



Oui. Note qu'en combinant ainsi les sélecteurs « > » et « + » tu n'as
en principe pas besoin de préciser le type d'élément pour que chacun
d'entre eux soit uniquement déterminé :

body > *:first-child
{ }
body > *:first-child + *
{ display: none !important; }
body > *:first-child + * + *
{ }
body > *:first-child + * + * + *
{ display: none !important; }
body > *:first-child + * + * + * > *:first-child
{ }
body > *:first-child + * + * + * > *:first-child + *
{ }
body > *:first-child + * + * + * > *:first-child + * + *
{ display: none !important; }
body > *:first-child + * + * + * + *
{ display: none !important; }
body > *:first-child + * + * + * + * + *
{ display: none !important; }

Cela dit, en précisant au contraire le plus d'infos possible (à
commencer par les id), tu diminues le risque que ta feuille de
style soit surpassée par celle de l'auteur.
Avatar
SAM
Le 11/19/08 11:25 PM, Num GG a écrit :
Salut Sam
Cela veut dire que je veux pouvoir consulter tel site
(www.monsite.com) non pas avec la présentation des styles de base
fournie par le site lui même, mais avec "mon masque de visibilité à
moi". Je travaille UNIQUEMENT sur les divs.


Déjà là je rigole ...
combien de sites ont leurs pages bâties sur le système des DIVs ?
Moi je ne vois que des tables encore un peu partout.
(un au hasard : <http://www.mediadico.com/dictionnaire/>
et qui doit être vu par un max de monde,
ne serait-ce que par ceux utilisant Fx )



Ton mediadico.com/dictionnaire contient 103 divs. On les élague
facilement pour obtenir la div principale qui contient la définition



Perso, je n'y suis pas arrivé.
De plus, cette page est entachée de multiples tables et de multiples
javascripts qui non seulement appellent Google mais aussi semblent
s'adresser au XUL et au Chrome de Firefox.

et, certes, je te l'accorde, encore un peu de "bruit" restant dans un
ou plusieurs tableaux encapsulés dans cette dernière div.



Oui, quand on voit des trucs du genre :

<a iconurl="http://www.mediadico.com/favicon.ico"
onclick="return install(event);"
href="http://www.mediadico.com/tool/mediadicotoolbar.xpi"><img
width="250" height="72" border="0"
src="http://www.mediadico.com/images/extension-firefox.gif"
alt="Dictionnaire MEDIADICO"/></a>

qui réagissent à des css du genre :
*|*:-moz-any-link { }
:-moz-any-link { }
:root { )

et comme je pense que ce n'est pas codé avec les pieds par
méconnaissance, c'est bien pour bordéliser à fins de "protection".

Le "bruit" ne va pas être coton à diminuer.


Tu appliques un style qui cache tout

* { display: none; }

puis tu appliques le style block à tout ce que tu as pu trouver de
valable dans le site et ce en une fois

.navBar, #content, div div ul, #main ... etc etc { display: block }



Hmmm. Je crois que je vais tester ça. Parce que si ça marche c'est
nickel.



Heu ... c'est un résumé, ce n'est peut-être pas aussi simple ?
Le div 'bloc2' est dans un table qui n'a pas d'id,
et, à ma connaissance, il n'existe pas de règle css ascendante :
table < #bloc2 { display: table }
ce n'est pas prévu en css

Hormis la FdS ... non.



Je regarde cela de près.



j'ai aussi vaguement essayé en javascript, du genre:

<javascript:var b=document.getElementById('bloc2').cloneNode(true);var
d=document.body.getElementsByTagName('*');for(var
i=0;i<d.length;i++)document.body.removeChild(d[i]);document.body.appendChild(b);>

ou:

<javascript:d=document.getElementById('bloc2').cloneNode('true');b=document.body;while(b.lastChild)b.removeChild(b.lastChild);b.appendChild(d);>

... en vain

--
sm
Avatar
Olivier Miakinen
Le 20/11/2008 21:36, SAM a écrit :

[...] à ma connaissance, il n'existe pas de règle css ascendante :
table < #bloc2 { display: table }
ce n'est pas prévu en css



Je le confirme, du moins dans CSS 2.1 (je n'ai pas encore trop regardé
CSS 3).
1 2