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

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 11/18/08 11:02 AM, Num GG a écrit :

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



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; }

</style>

<script type="text/javascript">
function voir(n) {
n = document.getElementById('d'+n).style;
n.display = n.display==''? 'block' : '';
}
window.onload = function() {
var d = document.getElementsByTagName('DIV');
for(var i=0, n=d.length; i<n; i++)
if(d[i].onclick) d[i].style.cursor = 'pointer';
}
</script>

<div id="d1" onclick="voir(2)">DIV1 : bla bla bla</div>
<div id="d2">DIV 2 : bla bla bla</div>
<div id="d3" onclick="voir(4)">DIV 3 : encore du bla bla bla </div>
<div id="d4" onclick="voir(5)">DIV 4 :bla bla:
<div id="4_1">4.1 : un bla bla </div>
<div id="4_2">4.2 : un autre bla bla </div>
<div id="4_3">4.3 : tiens, encore un autre nouveau bla bla </div>
</div>
<div id="d5" onclick="voir(6)">DIV 5 : bla </div>
<div id="d6">DIV 6 : et la encore un nouveau div </div>
</html>

Comment pourrait-on faire en JS?



Ben pourquoi en JS ?
Les CSS sont en rideau ?


--
sm
Avatar
Num GG
> 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 pourrai t
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 co de 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'à applique r sur le
noeud DIV à traiter le style du noeud DIV de référence. Le p roblè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 noe uds.

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
Pascal PONCET
Num GG a écrit :
-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. (!!!)



Bonjour,

Ça veut dire quoi exactement :
"je ne maitrise pas le code des sites tiers " ?
Les sites apparaissent dans un "frame", ou "iframe" ?

Cordialement,
Pascal
Avatar
Num GG
> Ça veut dire quoi exactement :
"je ne maitrise pas le code des sites tiers " ?
Les sites apparaissent dans un "frame", ou "iframe" ?



Salut Pascal

Ca veut dire que, dans mon idée, le code devrait idéalement s'adapter
à n'importe quel site.

Je charge la page d'un site dans un iframe ou un div container. Je
passe une moulinette qui fait apparaitre toutes les divs et les rend
cliquables pour pouvoir les faire disparaitre. Au fur et à mesure
qu'on fait ça, on filtre la page intiale de tout son "bruit" (pubs,
adds à la con, liens vers d'autres sites, commentaires etc). Au final,
il ne reste que les divs principales contenant la quintessence de la
page. Tout le reste est rendu invisible.

Bon.

Une fois qu'on a fait ça, on est content. Mais le problème c'est:
1°/ comment mémoriser cette fameuse configuration de divs ("ce div-ci:
visible, ce div-là: hidden" etc...) pour ce site là?
2°/ une fois qu'on l'a mémorisée, comment réappliquer cette
configuration sur cette même page que je rechargerais demain (et qui
aura chopé pleins de commentaires) ou alors sur une autre page de ce
même site, qui grosso modo contiendra le même "bruit" et donc pourrait
être filtré de la même manière?

D'où cette notion de "masque" de div et cette necessité de pouvoir
appliquer ce masque (mémorisé pour un site donné) sur une nouvelle
page de ce même site.

D'où le fait que je ne maitrise pas le "code des sites tiers".

Tu vois l'idée?

Plus j'y réfléchis de mon côté, plus je pense qu'il faut se paluche r 2
arbres d'objets div et trouver un algo qui permet de procéder à une
operation logique (genre OU Exclusif) entre l'arbre de référence (le
masque) et l'arbre de la nouvelle page. Soit côté client, soit côté
serveur (mais j'aimerais éviter de triturer du code de sites tiers
côté serveur...)

Bon... OK... j'arrête de fumer.

;))

Num
Avatar
Pascal PONCET
Num GG a écrit :
Je charge la page d'un site dans un iframe ou un div container. Je
passe une moulinette qui fait apparaitre toutes les divs et les rend
cliquables pour pouvoir les faire disparaitre. Au fur et à mesure
qu'on fait ça, on filtre la page intiale de tout son "bruit" (pubs,
adds à la con, liens vers d'autres sites, commentaires etc). Au final,
il ne reste que les divs principales contenant la quintessence de la
page. Tout le reste est rendu invisible.



Mais les "div" en question (s'il y en a !) n'ont pas d'identifiant ?

Et maîtrise-t-on la mise à jour de ces sites, avec d'éventuels
changements dans leurs "div" respectifs ?

Parce que si les "div" à masquer ont tous un ID et que celui-ci est
stable, ça n'est pas très compliqué, non ?
Avatar
Num GG
> Mais les "div" en question (s'il y en a !) n'ont pas d'identifiant ?


Exact...
C'est vrai que pour simplifier mon bout de code du début, j'ai posé
des id à tous mes divs mais il est clair que la solution devra(it)
pouvoir traiter les "div" sans identifiant...

Et maîtrise-t-on la mise à jour de ces sites, avec d'éventuels
changements dans leurs "div" respectifs ?


Dans l'histoire on ne maitrise rien du tout... :)) Puisqu'il s'agit de
faire fonctionner le truc sur n'importe quel site.

Parce que si les "div" à masquer ont tous un ID et que celui-ci est
stable, ça n'est pas très compliqué, non ?


Effectivement, "si tous les divs du monde voulaient bien se donner un
id" mon truc il tournerait déjà.

Pourquoi? tu aurais une idée?

Sinon, sur c.l.j un gars me dit de passer par les div-z index. Ca te
parait viable ça?
Avatar
Olivier Miakinen
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
trait d'union.

Le 18/11/2008 11:02, Num GG a écrit :

-----------------------------------------------------------
<div id='id1'>bla bla bla</div>
<div id='id2' style="display: none;"> bla bla bla</div>
<div id='id3'> encore du bla bla bla </div>
<div id='id4' style="display: none;">bla bla:
<div id='id4-1'>un bla bla </div>
<div id='id4-2'>un autre bla bla </div>
</div>
<div id='id5' style="display: none"> bla </div>
-----------------------------------------------------------
[...]
-----------------------------------------------------------
<div id='id1'>bla bla bla</div>
<div id='id2'> bla bla bla</div>
<div id='id3'> encore du bla bla bla </div>
<div id='id4'>bla bla:
<div id='id4-1'>un bla bla </div>
<div id='id4-2'>un autre bla bla </div>
<div id='id4-3'>tiens, encore un autre nouveau bla bla </div>
</div>
<div id='id5'> bla </div>
<div id='id6'> et la encore un nouveau div </div>
-----------------------------------------------------------
[...]
Pour cette seconde page, au vu de ma page de référence, comment faire
pour:
- laisser divs 1 et 3 visible
- cacher divs 2, 4, 5 (ainsi que, bien sûr tous les divs enfants de
4)
- cacher div 6 aussi.



En utilisant les id :
div#id1 { }
div#id2 { display: none !important; }
div#id3 { }
div#id4 { display: none !important; }
div#id4-1 { }
div#id4-2 { }
div#id4-3 { display: none !important; }
div#id5 { display: none !important; }
div#id6 { display: none !important; }

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
Avatar
SAM
Le 11/18/08 3:56 PM, Num GG a écrit :
Il me semble que c'est tr�s simple :

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

div { display: none; border:1px solid; margin:20px }




(...)
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



en supposant que ce soit possible (et ça le devrait à l'aide d'une
feuille de style si le site n'a pas été pondu avec les pieds) ça ne
fonctionnera que tant que le squelette du site est repris exactement de
page en page et qu'il n'aura pas été modifié.

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 )

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.



Tu maitrises le code que tu traites puisque tu dis connaitre le site.


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).



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

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



C'est très vilain !

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



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).

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 }


D'autres idées?



Hormis la FdS ... non.

--
sm
Avatar
SAM
Le 11/18/08 6:08 PM, Num GG a écrit :

D'où cette notion de "masque" de div et cette necessité de pouvoir
appliquer ce masque (mémorisé pour un site donné) sur une nouvelle
page de ce même site.

D'où le fait que je ne maitrise pas le "code des sites tiers".

Tu vois l'idée?



Je vois que l'idée est une perte de temps.
Avec tous les JS ou autres "astuces" qui chargent des pub Gouplesques ou
autres, qui se connectent à des tas de multicliques, le tout à l'insu du
visiteur, plus tout ce que croient utile des webmestres ou leur
commanditaires et qui finalement ne font que compliquer, diluer,
l'information visée .... il y a un boulot énoooorme à réaliser.

Le plus vite fait est encore de surfer avec un navigateur textuel.
(pas d'image, de Flash, de JS)


Plus j'y réfléchis de mon côté, plus je pense qu'il faut se palucher 2
arbres d'objets div et trouver un algo qui permet de procéder à une
operation logique (genre OU Exclusif) entre l'arbre de référence (le
masque) et l'arbre de la nouvelle page. Soit côté client, soit côté
serveur (mais j'aimerais éviter de triturer du code de sites tiers
côté serveur...)



Je ne vois pas de différence entre les 2 :
tu altères une publication qui n'est pas tienne.

Sauf que, normalement, coté navigateur tu ne peux triturer une page tierce.

Bon... OK... j'arrête de fumer.



Ha! bon ! ça devait vraiment être de la bonne !

Perso, en plus de l'utilisation d'un Flash bloqueur, je limite la
fenêtre de mon navigateur, bp des trucs superficiels, superflus, et
décorés arbre de noël sont ainsi invisibles dans la partie droite de la
page qui est coupée par l'affichage réduit.

Bon, ceci étant, tu as l'extension Web Developer pour Firefox qui te
permet d'appliquer une feuille de styles à une page.
Tu crées la FdS kivabien pour "ta" lecture de la page et l'enregistre
qque part. Quand tu fais afficher la page il faut demander manuellement
à WebDeveloper d'appliquer ta FdS.

Ne reste qu'à réaliser une extension à cette extension pour automatiser
tes bidouillages.

--
sm
Avatar
Pascal PONCET
Num GG a écrit :
Pourquoi? tu aurais une idée?



Désolé mais non, là je n'ai plus d'idées du tout !
Je pense même que ce n'est pas possible, si j'ai bien compris parce que
tout n'est pas très clair dans le descriptif.

@+,
Pascal
1 2