Positionnement Javascript

SAM

25/04/2009 à 01:28

Le 4/24/09 6:04 PM, Mihamina Rakotomandimby (R12y) a écrit :

Bonjour,
Soit ceci:
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk
En service ici:
http://lab.vectoris.fr/~mihamina/Alamino/

Il n'y a personne aux adresses indiquées :-(

Je n'ai pas pu entrer chez http://vectoris.fr/
c'est que des trucs Flash (bloqués) et du texte qui se fond dans une
image de même teinte.
(champions de la com! c'est tout vu!)
Je te dis pas le truc dégueu dans le coin droit pour "accrocher" !

Je souhaite que lorsqu'on clique sur "Go!"
Les "div numero XXX" se positionnent en cascade, mais au lieu de cela,
ils se supperposent les uns aux autres....

Voilà ce que c'est que de travailler avec du positionnement absolu.
À proscrire d'entrée de jeu !
... enfin si 'superposer' veut dire se 'recouvrir'

Auriez-vous une idée de ce qui cloche?

Je ne vois pas ce que ça à voir avec le JavaScript ?
(excepté peut-être le repérage des divs à modifier ? et encore ... ?)

Yaka revoir la feuille de style et la méthode grammaticale du texte.
(pourquoi des 'divs' ?)

Si on veut de la "cascade" yaka imbriquer les éléments et tous les
indenter pareil (margin-left: 30px) par exemple en changeant leur class
ou la modifiant dans la FdS.

CSS :
==== .cascade {
border-left: 1 px solid;
margin-left: 0;
text-indent: 9px
}

JS :
===
function changeLeft(selector, val) {
var s = document.styleSheets[0].cssRules ||
document.styleSheets[0].rules;
for(var i=0, n=s.length; i<n; i++)
if(s[i].selectorText == selector) {
s[i].style.marginLeft = val;
}
}

HTML :
=====
<button onclick="changeLeft('.cascade', '30px')">GO!</button>
<div class="cascade">
bla bla 1
<div class="cascade">
bla bla 2
<div class="cascade">
bla bla 3
<div class="cascade">
bla bla 4
<div class="cascade">
bla bla 5
</div>
</div>
</div>
</div>
</div>

------------------------------
Ou plus simple :

CSS :
==== .normal div {
border-left: 1 px solid;
margin: 0;
text-indent: 9px
}
.cascade div { margin-left: 30px }

JS :
=== function changeLeft(divId) {
document.getElementById(divId).className = 'normal cascade';
}

HTML :
=====
<button onclick="changeLeft('celuiLa')">GO!</button>
<div id="celuiLa" class="normal">
bla bla 1
<div>
bla bla 2
<div>
bla bla 3
<div>
bla bla 4
<div>
bla bla 5
</div>
</div>
</div>
</div>
</div>

-----------------------------------------
Et pour les divs "de N° xxx" :

CSS :
==== .normal div {
border-left: 1 px solid;
margin: 0;
text-indent: 9px
}
.cacade div.num { margin-left: 30px }

JS :
=== function changeLeft(divId) {
var d = document.getElementById(divId),
D = d.getElementsByTagName('DIV'),
n = D.length;
while(n--) {
if(D[n].childNodes[0].nodeValue.match(/[0-9]{3}/))
D[n].className = 'num';
}
}

HTML :
=====
<button onclick="changeLeft('celuiLa')">GO!</button>
<div id="celuiLa" class="normal">
<div>
bla bla 1
<div>
bla bla 222 (N° xxx)
<div>
bla bla 3
<div>
bla bla 444 (N° xxx)
<div>
bla bla 5
</div>
</div>
</div>
</div>
</div>
</div>

Ou bien :

<div id="celuiLa" class="normal">
<div>
bla bla 1
</div>
<div>
bla bla 222 (N° xxx)
<div>
bla bla 223 (sous N°)
</div>
</div>
<div>
bla bla 3
</div>
<div>
bla bla 444 (N° xxx)
</div>
<div>
bla bla 5
</div>
</div>

--
sm

Le 4/24/09 6:04 PM, Mihamina Rakotomandimby (R12y) a écrit :

Bonjour,
Soit ceci:
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk
En service ici:
http://lab.vectoris.fr/~mihamina/Alamino/

Il n'y a personne aux adresses indiquées :-(

Je n'ai pas pu entrer chez http://vectoris.fr/
c'est que des trucs Flash (bloqués) et du texte qui se fond dans une
image de même teinte.
(champions de la com! c'est tout vu!)
Je te dis pas le truc dégueu dans le coin droit pour "accrocher" !

Je souhaite que lorsqu'on clique sur "Go!"
Les "div numero XXX" se positionnent en cascade, mais au lieu de cela,
ils se supperposent les uns aux autres....

Voilà ce que c'est que de travailler avec du positionnement absolu.
À proscrire d'entrée de jeu !
... enfin si 'superposer' veut dire se 'recouvrir'

Auriez-vous une idée de ce qui cloche?

Je ne vois pas ce que ça à voir avec le JavaScript ?
(excepté peut-être le repérage des divs à modifier ? et encore ... ?)

Yaka revoir la feuille de style et la méthode grammaticale du texte.
(pourquoi des 'divs' ?)

Si on veut de la "cascade" yaka imbriquer les éléments et tous les
indenter pareil (margin-left: 30px) par exemple en changeant leur class
ou la modifiant dans la FdS.

CSS :
==== .cascade {
border-left: 1 px solid;
margin-left: 0;
text-indent: 9px
}

JS :
===
function changeLeft(selector, val) {
var s = document.styleSheets[0].cssRules ||
document.styleSheets[0].rules;
for(var i=0, n=s.length; i<n; i++)
if(s[i].selectorText == selector) {
s[i].style.marginLeft = val;
}
}

HTML :
=====
<button onclick="changeLeft('.cascade', '30px')">GO!</button>
<div class="cascade">
bla bla 1
<div class="cascade">
bla bla 2
<div class="cascade">
bla bla 3
<div class="cascade">
bla bla 4
<div class="cascade">
bla bla 5
</div>
</div>
</div>
</div>
</div>

------------------------------
Ou plus simple :

CSS :
==== .normal div {
border-left: 1 px solid;
margin: 0;
text-indent: 9px
}
.cascade div { margin-left: 30px }

JS :
=== function changeLeft(divId) {
document.getElementById(divId).className = 'normal cascade';
}

HTML :
=====
<button onclick="changeLeft('celuiLa')">GO!</button>
<div id="celuiLa" class="normal">
bla bla 1
<div>
bla bla 2
<div>
bla bla 3
<div>
bla bla 4
<div>
bla bla 5
</div>
</div>
</div>
</div>
</div>

-----------------------------------------
Et pour les divs "de N° xxx" :

CSS :
==== .normal div {
border-left: 1 px solid;
margin: 0;
text-indent: 9px
}
.cacade div.num { margin-left: 30px }

JS :
=== function changeLeft(divId) {
var d = document.getElementById(divId),
D = d.getElementsByTagName('DIV'),
n = D.length;
while(n--) {
if(D[n].childNodes[0].nodeValue.match(/[0-9]{3}/))
D[n].className = 'num';
}
}

HTML :
=====
<button onclick="changeLeft('celuiLa')">GO!</button>
<div id="celuiLa" class="normal">
<div>
bla bla 1
<div>
bla bla 222 (N° xxx)
<div>
bla bla 3
<div>
bla bla 444 (N° xxx)
<div>
bla bla 5
</div>
</div>
</div>
</div>
</div>
</div>

Ou bien :

<div id="celuiLa" class="normal">
<div>
bla bla 1
</div>
<div>
bla bla 222 (N° xxx)
<div>
bla bla 223 (sous N°)
</div>
</div>
<div>
bla bla 3
</div>
<div>
bla bla 444 (N° xxx)
</div>
<div>
bla bla 5
</div>
</div>

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

Le 4/24/09 6:04 PM, Mihamina Rakotomandimby (R12y) a écrit :

Bonjour,
Soit ceci:
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk
En service ici:
http://lab.vectoris.fr/~mihamina/Alamino/

Il n'y a personne aux adresses indiquées :-(

Je n'ai pas pu entrer chez http://vectoris.fr/
c'est que des trucs Flash (bloqués) et du texte qui se fond dans une
image de même teinte.
(champions de la com! c'est tout vu!)
Je te dis pas le truc dégueu dans le coin droit pour "accrocher" !

Je souhaite que lorsqu'on clique sur "Go!"
Les "div numero XXX" se positionnent en cascade, mais au lieu de cela,
ils se supperposent les uns aux autres....

Voilà ce que c'est que de travailler avec du positionnement absolu.
À proscrire d'entrée de jeu !
... enfin si 'superposer' veut dire se 'recouvrir'

Auriez-vous une idée de ce qui cloche?

Je ne vois pas ce que ça à voir avec le JavaScript ?
(excepté peut-être le repérage des divs à modifier ? et encore ... ?)

Yaka revoir la feuille de style et la méthode grammaticale du texte.
(pourquoi des 'divs' ?)

Si on veut de la "cascade" yaka imbriquer les éléments et tous les
indenter pareil (margin-left: 30px) par exemple en changeant leur class
ou la modifiant dans la FdS.

CSS :
==== .cascade {
border-left: 1 px solid;
margin-left: 0;
text-indent: 9px
}

JS :
===
function changeLeft(selector, val) {
var s = document.styleSheets[0].cssRules ||
document.styleSheets[0].rules;
for(var i=0, n=s.length; i<n; i++)
if(s[i].selectorText == selector) {
s[i].style.marginLeft = val;
}
}

HTML :
=====
<button onclick="changeLeft('.cascade', '30px')">GO!</button>
<div class="cascade">
bla bla 1
<div class="cascade">
bla bla 2
<div class="cascade">
bla bla 3
<div class="cascade">
bla bla 4
<div class="cascade">
bla bla 5
</div>
</div>
</div>
</div>
</div>

------------------------------
Ou plus simple :

CSS :
==== .normal div {
border-left: 1 px solid;
margin: 0;
text-indent: 9px
}
.cascade div { margin-left: 30px }

JS :
=== function changeLeft(divId) {
document.getElementById(divId).className = 'normal cascade';
}

HTML :
=====
<button onclick="changeLeft('celuiLa')">GO!</button>
<div id="celuiLa" class="normal">
bla bla 1
<div>
bla bla 2
<div>
bla bla 3
<div>
bla bla 4
<div>
bla bla 5
</div>
</div>
</div>
</div>
</div>

-----------------------------------------
Et pour les divs "de N° xxx" :

CSS :
==== .normal div {
border-left: 1 px solid;
margin: 0;
text-indent: 9px
}
.cacade div.num { margin-left: 30px }

JS :
=== function changeLeft(divId) {
var d = document.getElementById(divId),
D = d.getElementsByTagName('DIV'),
n = D.length;
while(n--) {
if(D[n].childNodes[0].nodeValue.match(/[0-9]{3}/))
D[n].className = 'num';
}
}

HTML :
=====
<button onclick="changeLeft('celuiLa')">GO!</button>
<div id="celuiLa" class="normal">
<div>
bla bla 1
<div>
bla bla 222 (N° xxx)
<div>
bla bla 3
<div>
bla bla 444 (N° xxx)
<div>
bla bla 5
</div>
</div>
</div>
</div>
</div>
</div>

Ou bien :

<div id="celuiLa" class="normal">
<div>
bla bla 1
</div>
<div>
bla bla 222 (N° xxx)
<div>
bla bla 223 (sous N°)
</div>
</div>
<div>
bla bla 3
</div>
<div>
bla bla 444 (N° xxx)
</div>
<div>
bla bla 5
</div>
</div>

--
sm

SAM

25/04/2009 à 03:11

Le 4/25/09 1:28 AM, SAM a écrit :

-----------------------------------------
Et pour les divs "de N° xxx" :

CSS :
==== > .normal div {
border-left: 1 px solid;
margin: 0;
text-indent: 9px
}
.cacade div.num { margin-left: 30px }

.normal div.num { margin-left: 30px }

JS :
=== > function changeLeft(divId) {
var d = document.getElementById(divId),
D = d.getElementsByTagName('DIV'),
n = D.length;
while(n--) {
if(D[n].childNodes[0].nodeValue.match(/[0-9]{3}/))
D[n].className = 'num';
}
}

HTML :
===== >
<button onclick="changeLeft('celuiLa')">GO!</button>
<div id="celuiLa" class="normal">
<div>
bla bla 1
<div>
bla bla 222 (N° xxx)
<div>
bla bla 3
<div>
bla bla 444 (N° xxx)
<div>
bla bla 5
</div>
</div>
</div>
</div>
</div>
</div>

Ou bien :

<div id="celuiLa" class="normal">
<div>
bla bla 1
</div>
<div>
bla bla 222 (N° xxx)
<div>
bla bla 223 (sous N°)
</div>
</div>
<div>
bla bla 3
</div>
<div>
bla bla 444 (N° xxx)
</div>
<div>
bla bla 5
</div>
</div>

Mihamina Rakotomandimby

25/04/2009 à 15:34

SAM wrote:

Le 4/24/09 6:04 PM, Mihamina Rakotomandimby (R12y) a écrit :
Bonjour,
Soit ceci:
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk
En service ici:
http://lab.vectoris.fr/~mihamina/Alamino/

Il n'y a personne aux adresses indiquées :-(

Oui, ça vient de revenir. Microcoupure + defaillance des installations
electriques,...

Je n'ai pas pu entrer chez http://vectoris.fr/
c'est que des trucs Flash (bloqués) et du texte qui se fond dans une
image de même teinte.
(champions de la com! c'est tout vu!)
Je te dis pas le truc dégueu dans le coin droit pour "accrocher" !

Oui bon...
C'est revenu, comme je disais.
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk

J'ai trouvé mon erreur, je ne mettais pas d'unités (em, px, mm,...)
Là, j'ai simplifié le problème final.

Je veux en venir au final à un affichage "tree" et "flat" de posts d'un
mini forum Web.

Par défaut, c'est affiché par date ("flat"), puis en cliquant sur
quelquechose, on peut l'afficher en "tree" pour voir qui repond à qui.

Mais pour passer de "flat" à "tree", la chose qui m'est venue à l'esprit
est du positionnement "absolute".

Merci pour toute suggestions.

SAM

25/04/2009 à 17:48

Le 4/25/09 3:34 PM, Mihamina Rakotomandimby a écrit :

SAM wrote:
Le 4/24/09 6:04 PM, Mihamina Rakotomandimby (R12y) a écrit :
Bonjour,
Soit ceci:
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk
En service ici:
http://lab.vectoris.fr/~mihamina/Alamino/

Il n'y a personne aux adresses indiquées :-(

Oui, ça vient de revenir. Microcoupure + defaillance des installations
electriques,...

Je n'ai pas pu entrer chez http://vectoris.fr/
c'est que des trucs Flash (bloqués) et du texte qui se fond dans une
image de même teinte.
(champions de la com! c'est tout vu!)
Je te dis pas le truc dégueu dans le coin droit pour "accrocher" !

Oui bon...
C'est revenu, comme je disais.
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk

J'ai trouvé mon erreur, je ne mettais pas d'unités (em, px, mm,...)
Là, j'ai simplifié le problème final.

Je veux en venir au final à un affichage "tree" et "flat" de posts d'un
mini forum Web.

Par défaut, c'est affiché par date ("flat"), puis en cliquant sur
quelquechose, on peut l'afficher en "tree" pour voir qui repond à qui.

Mais pour passer de "flat" à "tree", la chose qui m'est venue à l'esprit
est du positionnement "absolute".

Merci pour toute suggestions.

Yu veux faire comme sur Google-groups ?
- à gauche le tree des intervenants
- à droite les posts +/- chronologiques
comme, par exemple :
<http://groups.google.com/group/fr.comp.lang.javascript/browse_frm/thread/a895250f93551c2b/ea441745e2457163?#ea441745e2457163>

Bon ... ce n'est pas Google qui va nous donner des leçons de respect des
standards ... outre que ce "tree" est affiché dans une page ouverte dans
une frame, ils usent de la balise [nobr]
et pour l'indentation du tree ils codent en dur des insécables

Suivant le shemas suivant :

<nobr>
<img src="r.gif" alt=""> 
<span><tt></tt> 
<a href="message1.htm">bla 1</span> <span>21 avr</span>
</nobr>
<nobr>
<img src="r.gif" alt="">
<span><tt> </tt>
<a href="message2.htm">bla 1</span> <span>22 avr</span>
</nobr>
<nobr>
<img src="r.gif" alt="">
<span><tt> </tt>
<a href="message3.htm">bla 3</span> <span>22 avr</span>
</nobr>

qui alors affiche qque chose comme :

| *bla 1* 21 avr
| *bla 2* 22 avr
| *bla 3* 22 avr

Partant de ce constat, on peut bien imaginer que le JS va introduire
avant chaque lien une image transparente de largeur voulue pour
simuler/afficher l'indentation

<ul id="resumeTree">
<li><img src="v.gif" style="width: 10px">
<a href="m1.htm" onclick="return XHR(this)">toto</a> 21 avr
</li>
<li><img src="v.gif" style="width: 30px">
<a href="m2.htm" onclick="return XHR(this)">jojo</a> 22 avr
</li>
<li><img src="v.gif" style="width: 30px">
<a href="m3.htm" onclick="return XHR(this)">toto</a> 22 avr
</li>
</ul>

Ou qu'il va directement styler le bon li :

<ul id="resumeTree">
<li style="width: 10px">
<a href="m1.htm" onclick="return XHR(this)">toto</a> 21 avr
</li>
<li style="width: 30px">
<a href="m2.htm" onclick="return XHR(this)">jojo</a> 22 avr
</li>
<li style="width: 30px">
<a href="m3.htm" onclick="return XHR(this)">toto</a> 22 avr
</li>
</ul>

--
sm

Le 4/25/09 3:34 PM, Mihamina Rakotomandimby a écrit :

SAM wrote:

Le 4/24/09 6:04 PM, Mihamina Rakotomandimby (R12y) a écrit :

Bonjour,
Soit ceci:
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk
En service ici:
http://lab.vectoris.fr/~mihamina/Alamino/

Il n'y a personne aux adresses indiquées :-(

Oui, ça vient de revenir. Microcoupure + defaillance des installations
electriques,...

Je n'ai pas pu entrer chez http://vectoris.fr/
c'est que des trucs Flash (bloqués) et du texte qui se fond dans une
image de même teinte.
(champions de la com! c'est tout vu!)
Je te dis pas le truc dégueu dans le coin droit pour "accrocher" !

Oui bon...
C'est revenu, comme je disais.
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk

J'ai trouvé mon erreur, je ne mettais pas d'unités (em, px, mm,...)
Là, j'ai simplifié le problème final.

Je veux en venir au final à un affichage "tree" et "flat" de posts d'un
mini forum Web.

Par défaut, c'est affiché par date ("flat"), puis en cliquant sur
quelquechose, on peut l'afficher en "tree" pour voir qui repond à qui.

Mais pour passer de "flat" à "tree", la chose qui m'est venue à l'esprit
est du positionnement "absolute".

Merci pour toute suggestions.

Yu veux faire comme sur Google-groups ?
- à gauche le tree des intervenants
- à droite les posts +/- chronologiques
comme, par exemple :
<http://groups.google.com/group/fr.comp.lang.javascript/browse_frm/thread/a895250f93551c2b/ea441745e2457163?#ea441745e2457163>

Bon ... ce n'est pas Google qui va nous donner des leçons de respect des
standards ... outre que ce "tree" est affiché dans une page ouverte dans
une frame, ils usent de la balise [nobr]
et pour l'indentation du tree ils codent en dur des insécables

Suivant le shemas suivant :

<nobr>
<img src="r.gif" alt=""> 
<span><tt></tt> 
<a href="message1.htm">bla 1</span> <span>21 avr</span>
</nobr>
<nobr>
<img src="r.gif" alt="">
<span><tt> </tt>
<a href="message2.htm">bla 1</span> <span>22 avr</span>
</nobr>
<nobr>
<img src="r.gif" alt="">
<span><tt> </tt>
<a href="message3.htm">bla 3</span> <span>22 avr</span>
</nobr>

qui alors affiche qque chose comme :

| *bla 1* 21 avr
| *bla 2* 22 avr
| *bla 3* 22 avr

Partant de ce constat, on peut bien imaginer que le JS va introduire
avant chaque lien une image transparente de largeur voulue pour
simuler/afficher l'indentation

<ul id="resumeTree">
<li><img src="v.gif" style="width: 10px">
<a href="m1.htm" onclick="return XHR(this)">toto</a> 21 avr
</li>
<li><img src="v.gif" style="width: 30px">
<a href="m2.htm" onclick="return XHR(this)">jojo</a> 22 avr
</li>
<li><img src="v.gif" style="width: 30px">
<a href="m3.htm" onclick="return XHR(this)">toto</a> 22 avr
</li>
</ul>

Ou qu'il va directement styler le bon li :

<ul id="resumeTree">
<li style="width: 10px">
<a href="m1.htm" onclick="return XHR(this)">toto</a> 21 avr
</li>
<li style="width: 30px">
<a href="m2.htm" onclick="return XHR(this)">jojo</a> 22 avr
</li>
<li style="width: 30px">
<a href="m3.htm" onclick="return XHR(this)">toto</a> 22 avr
</li>
</ul>

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

Le 4/25/09 3:34 PM, Mihamina Rakotomandimby a écrit :

SAM wrote:
Le 4/24/09 6:04 PM, Mihamina Rakotomandimby (R12y) a écrit :
Bonjour,
Soit ceci:
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk
En service ici:
http://lab.vectoris.fr/~mihamina/Alamino/

Il n'y a personne aux adresses indiquées :-(

Oui, ça vient de revenir. Microcoupure + defaillance des installations
electriques,...

Je n'ai pas pu entrer chez http://vectoris.fr/
c'est que des trucs Flash (bloqués) et du texte qui se fond dans une
image de même teinte.
(champions de la com! c'est tout vu!)
Je te dis pas le truc dégueu dans le coin droit pour "accrocher" !

Oui bon...
C'est revenu, comme je disais.
http://lab.vectoris.fr/projects/vectoris/browser/Alamino/trunk

J'ai trouvé mon erreur, je ne mettais pas d'unités (em, px, mm,...)
Là, j'ai simplifié le problème final.

Je veux en venir au final à un affichage "tree" et "flat" de posts d'un
mini forum Web.

Par défaut, c'est affiché par date ("flat"), puis en cliquant sur
quelquechose, on peut l'afficher en "tree" pour voir qui repond à qui.

Mais pour passer de "flat" à "tree", la chose qui m'est venue à l'esprit
est du positionnement "absolute".

Merci pour toute suggestions.

Yu veux faire comme sur Google-groups ?
- à gauche le tree des intervenants
- à droite les posts +/- chronologiques
comme, par exemple :
<http://groups.google.com/group/fr.comp.lang.javascript/browse_frm/thread/a895250f93551c2b/ea441745e2457163?#ea441745e2457163>

Bon ... ce n'est pas Google qui va nous donner des leçons de respect des
standards ... outre que ce "tree" est affiché dans une page ouverte dans
une frame, ils usent de la balise [nobr]
et pour l'indentation du tree ils codent en dur des insécables

Suivant le shemas suivant :

<nobr>
<img src="r.gif" alt=""> 
<span><tt></tt> 
<a href="message1.htm">bla 1</span> <span>21 avr</span>
</nobr>
<nobr>
<img src="r.gif" alt="">
<span><tt> </tt>
<a href="message2.htm">bla 1</span> <span>22 avr</span>
</nobr>
<nobr>
<img src="r.gif" alt="">
<span><tt> </tt>
<a href="message3.htm">bla 3</span> <span>22 avr</span>
</nobr>

qui alors affiche qque chose comme :

| *bla 1* 21 avr
| *bla 2* 22 avr
| *bla 3* 22 avr

Partant de ce constat, on peut bien imaginer que le JS va introduire
avant chaque lien une image transparente de largeur voulue pour
simuler/afficher l'indentation

<ul id="resumeTree">
<li><img src="v.gif" style="width: 10px">
<a href="m1.htm" onclick="return XHR(this)">toto</a> 21 avr
</li>
<li><img src="v.gif" style="width: 30px">
<a href="m2.htm" onclick="return XHR(this)">jojo</a> 22 avr
</li>
<li><img src="v.gif" style="width: 30px">
<a href="m3.htm" onclick="return XHR(this)">toto</a> 22 avr
</li>
</ul>

Ou qu'il va directement styler le bon li :

<ul id="resumeTree">
<li style="width: 10px">
<a href="m1.htm" onclick="return XHR(this)">toto</a> 21 avr
</li>
<li style="width: 30px">
<a href="m2.htm" onclick="return XHR(this)">jojo</a> 22 avr
</li>
<li style="width: 30px">
<a href="m3.htm" onclick="return XHR(this)">toto</a> 22 avr
</li>
</ul>

--
sm

Mihamina Rakotomandimby

28/04/2009 à 05:31

SAM wrote:

Par défaut, c'est affiché par date ("flat"), puis en cliquant sur
quelquechose, on peut l'afficher en "tree" pour voir qui repond à qui.
Mais pour passer de "flat" à "tree", la chose qui m'est venue à l'esprit
est du positionnement "absolute".

[...]

Yu veux faire comme sur Google-groups ?

[...]

Partant de ce constat, on peut bien imaginer que le JS va introduire
avant chaque lien une image transparente de largeur voulue pour
simuler/afficher l'indentation

[...]

Ou qu'il va directement styler le bon li :

Oui, pour l'indentation c'est bon.
Maintenant, il me reste un problème, et là je vous demande des pistes:
Reordonner verticalement les posts quand on passe de "flat" à "tree".
Sachant que dans une base de données quelconque, nous stockons que tel MSG-Id repond à tel MSG-Id.

En fait le plus gros de ma difficulté est là.
J'avais pensé à un positionnement absolute parceque j'y voyais une solution pour reordonner verticalement...

--
Chef de projet chez Vectoris
http://www.google.com/search?q=mihamina+rakotomandimby
Telephone: +261 33 11 207 36

SAM

28/04/2009 à 22:09

Le 4/28/09 5:31 AM, Mihamina Rakotomandimby a écrit :

SAM wrote:
Tu veux faire comme sur Google-groups ?

[...]
Partant de ce constat, on peut bien imaginer que le JS va introduire
avant chaque lien une image transparente de largeur voulue pour
simuler/afficher l'indentation

[...]
Ou qu'il va directement styler le bon li :

Oui, pour l'indentation c'est bon.
Maintenant, il me reste un problème, et là je vous demande des pistes:
Reordonner verticalement les posts quand on passe de "flat" à "tree".
Sachant que dans une base de données quelconque, nous stockons que tel
MSG-Id repond à tel MSG-Id.

En fait le plus gros de ma difficulté est là.
J'avais pensé à un positionnement absolute parceque j'y voyais une
solution pour reordonner verticalement...

Pour moi le "flat" c'est ordonné verticalement (ce n'est que mono-colonne)

Tu as bêtement : appendChild ...
(pour bouger "physiquement" un élément d'un coup)
plutôt que de se battre avec les absolutes et tous leurs pbs relatifs à
la taille possible de la fenêtre du navigateur de l'utilisateur.

Soit tu Ajaxionnes pour que le serveur se dépatouille du réagencement
(tableau chronologique de tableaux imbriqués des réponses aux réponses)
soit tu le fais par JS en direct (cf. tt en bas).

Il me semble que côté serveur (Ajax) ce sera moins prise de tête?
- disponibilité de la fonction foreach
- arrays à clefs

<ul>
<li>message 1
<ul>
<li>réponse 1 à message 1
<ul>
<li>réponse 1 à réponse 1</li>
<li>réponse 2 à réponse 1</li>
</ul>
</li>
<li>réponse 2 à message 1</li>
<li>réponse 3 à message 1
<ul>
<li>réponse 1 à réponse 3
<ul>
<li>réponse 1 à réponse 1.3</li>
<li>réponse 2 à réponse 1.3</li>
<li>réponse 3 à réponse 1.3</li>
</ul>
</li>
<li>réponse 2 à réponse 3</li>
</ul>
</li>
<li>réponse 2 à message 1</li>
<li>réponse 3 à message 1
<ul>
<li>réponse 1 à réponse 3</li>
<li>réponse 2 à réponse 3</li>
</ul>
</li>
</ul>
</li>
<li>message 2
<ul>
<li>réponse 1 à message 2</li>
</ul>
</li>
</ul>

J'en reviens touj à l'idée d'imbrication
(et les indentations se font alors toutes seules)

On crée l'imbrication voulue :
- en y appenchildant à la volée les lignes du flat.
ou
- en y créant les lignes issues du tableau Json MSG-id à MSG-id
que le serveur n'aura pas manqué de servir d'entrée de jeu au JS

Maintenant, une fois la prise de tête des sous-arrays aboutie,
possiblement le rangement monocolonne doit être possible tant pour le
flat (tri sur la date ou le nom de l'array multiple sans doute recomposé
en un nouvel array + simple) que pour le tree (tri multiple sur les
réponses qui a été donné d'entrée de jeu et qui est à conserver).
Pour le tree il doit suffire de suivre l'inbrication ordonné des
tableaux pour adjoindre à chaque "ligne" la bonne marge gauche
(accroissement relatif de l'y-celle en fonction du rang de l'item dans
l'imbrication des arrays)

Rien compris ?
alors ...
comme ça :
<http://cjoint.com/?eEecDePeYa>

--
sm

Le 4/28/09 5:31 AM, Mihamina Rakotomandimby a écrit :

SAM wrote:

Tu veux faire comme sur Google-groups ?

[...]

Partant de ce constat, on peut bien imaginer que le JS va introduire
avant chaque lien une image transparente de largeur voulue pour
simuler/afficher l'indentation

[...]

Ou qu'il va directement styler le bon li :

Oui, pour l'indentation c'est bon.
Maintenant, il me reste un problème, et là je vous demande des pistes:
Reordonner verticalement les posts quand on passe de "flat" à "tree".
Sachant que dans une base de données quelconque, nous stockons que tel
MSG-Id repond à tel MSG-Id.

En fait le plus gros de ma difficulté est là.
J'avais pensé à un positionnement absolute parceque j'y voyais une
solution pour reordonner verticalement...

Pour moi le "flat" c'est ordonné verticalement (ce n'est que mono-colonne)

Tu as bêtement : appendChild ...
(pour bouger "physiquement" un élément d'un coup)
plutôt que de se battre avec les absolutes et tous leurs pbs relatifs à
la taille possible de la fenêtre du navigateur de l'utilisateur.

Soit tu Ajaxionnes pour que le serveur se dépatouille du réagencement
(tableau chronologique de tableaux imbriqués des réponses aux réponses)
soit tu le fais par JS en direct (cf. tt en bas).

Il me semble que côté serveur (Ajax) ce sera moins prise de tête?
- disponibilité de la fonction foreach
- arrays à clefs

<ul>
<li>message 1
<ul>
<li>réponse 1 à message 1
<ul>
<li>réponse 1 à réponse 1</li>
<li>réponse 2 à réponse 1</li>
</ul>
</li>
<li>réponse 2 à message 1</li>
<li>réponse 3 à message 1
<ul>
<li>réponse 1 à réponse 3
<ul>
<li>réponse 1 à réponse 1.3</li>
<li>réponse 2 à réponse 1.3</li>
<li>réponse 3 à réponse 1.3</li>
</ul>
</li>
<li>réponse 2 à réponse 3</li>
</ul>
</li>
<li>réponse 2 à message 1</li>
<li>réponse 3 à message 1
<ul>
<li>réponse 1 à réponse 3</li>
<li>réponse 2 à réponse 3</li>
</ul>
</li>
</ul>
</li>
<li>message 2
<ul>
<li>réponse 1 à message 2</li>
</ul>
</li>
</ul>

J'en reviens touj à l'idée d'imbrication
(et les indentations se font alors toutes seules)

On crée l'imbrication voulue :
- en y appenchildant à la volée les lignes du flat.
ou
- en y créant les lignes issues du tableau Json MSG-id à MSG-id
que le serveur n'aura pas manqué de servir d'entrée de jeu au JS

Maintenant, une fois la prise de tête des sous-arrays aboutie,
possiblement le rangement monocolonne doit être possible tant pour le
flat (tri sur la date ou le nom de l'array multiple sans doute recomposé
en un nouvel array + simple) que pour le tree (tri multiple sur les
réponses qui a été donné d'entrée de jeu et qui est à conserver).
Pour le tree il doit suffire de suivre l'inbrication ordonné des
tableaux pour adjoindre à chaque "ligne" la bonne marge gauche
(accroissement relatif de l'y-celle en fonction du rang de l'item dans
l'imbrication des arrays)

Rien compris ?
alors ...
comme ça :
<http://cjoint.com/?eEecDePeYa>

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

Le 4/28/09 5:31 AM, Mihamina Rakotomandimby a écrit :

SAM wrote:
Tu veux faire comme sur Google-groups ?

[...]
Partant de ce constat, on peut bien imaginer que le JS va introduire
avant chaque lien une image transparente de largeur voulue pour
simuler/afficher l'indentation

[...]
Ou qu'il va directement styler le bon li :

Oui, pour l'indentation c'est bon.
Maintenant, il me reste un problème, et là je vous demande des pistes:
Reordonner verticalement les posts quand on passe de "flat" à "tree".
Sachant que dans une base de données quelconque, nous stockons que tel
MSG-Id repond à tel MSG-Id.

En fait le plus gros de ma difficulté est là.
J'avais pensé à un positionnement absolute parceque j'y voyais une
solution pour reordonner verticalement...

Pour moi le "flat" c'est ordonné verticalement (ce n'est que mono-colonne)

Tu as bêtement : appendChild ...
(pour bouger "physiquement" un élément d'un coup)
plutôt que de se battre avec les absolutes et tous leurs pbs relatifs à
la taille possible de la fenêtre du navigateur de l'utilisateur.

Soit tu Ajaxionnes pour que le serveur se dépatouille du réagencement
(tableau chronologique de tableaux imbriqués des réponses aux réponses)
soit tu le fais par JS en direct (cf. tt en bas).

Il me semble que côté serveur (Ajax) ce sera moins prise de tête?
- disponibilité de la fonction foreach
- arrays à clefs

<ul>
<li>message 1
<ul>
<li>réponse 1 à message 1
<ul>
<li>réponse 1 à réponse 1</li>
<li>réponse 2 à réponse 1</li>
</ul>
</li>
<li>réponse 2 à message 1</li>
<li>réponse 3 à message 1
<ul>
<li>réponse 1 à réponse 3
<ul>
<li>réponse 1 à réponse 1.3</li>
<li>réponse 2 à réponse 1.3</li>
<li>réponse 3 à réponse 1.3</li>
</ul>
</li>
<li>réponse 2 à réponse 3</li>
</ul>
</li>
<li>réponse 2 à message 1</li>
<li>réponse 3 à message 1
<ul>
<li>réponse 1 à réponse 3</li>
<li>réponse 2 à réponse 3</li>
</ul>
</li>
</ul>
</li>
<li>message 2
<ul>
<li>réponse 1 à message 2</li>
</ul>
</li>
</ul>

J'en reviens touj à l'idée d'imbrication
(et les indentations se font alors toutes seules)

On crée l'imbrication voulue :
- en y appenchildant à la volée les lignes du flat.
ou
- en y créant les lignes issues du tableau Json MSG-id à MSG-id
que le serveur n'aura pas manqué de servir d'entrée de jeu au JS

Maintenant, une fois la prise de tête des sous-arrays aboutie,
possiblement le rangement monocolonne doit être possible tant pour le
flat (tri sur la date ou le nom de l'array multiple sans doute recomposé
en un nouvel array + simple) que pour le tree (tri multiple sur les
réponses qui a été donné d'entrée de jeu et qui est à conserver).
Pour le tree il doit suffire de suivre l'inbrication ordonné des
tableaux pour adjoindre à chaque "ligne" la bonne marge gauche
(accroissement relatif de l'y-celle en fonction du rang de l'item dans
l'imbrication des arrays)

Rien compris ?
alors ...
comme ça :
<http://cjoint.com/?eEecDePeYa>

--
sm

Positionnement Javascript

6 réponses

Veuillez sélectionner un problème