Scroll up d'un div à la génération d'un autre div

Version imprimable

03/10/2011, 12h04
Pymento

Scroll up d'un div à la génération d'un autre div
Bonjour, je vais essayer d'être le plus clair possible, mais ça risque d'être compliqué étant donné que je ne comprend pas vraiment mon problème, c'est pour cela que je fais appel à vous.
Code:

1 2 3 4 5 6 <div id="1" style="overflow:scroll"> <li onclick="fct()" /> <li ... /> ... <div>
Voila ma structure à peu près, la fonction fct() doit récupérer selon un bdd d'autres <li> et les afficher à coté dans un nouveau <div id="2" />.(il passe aussi en classe selected)
Mon problème :
quand le nombre d'élément li dépasse sur l'axe des y, la scroll bar se dégrise, parfait, et par contre quand je clique sur un élément en bas le div va se scroller vers le haut tout seul, et uniquement pour les élément générant un nouveau div.

Je cherche un peu partout je n'ai pas de #ANCHOR.

Je reste dispo si vous avez besoin de plus de précision, dites moi si mon problème vous dit quelque chose.

Merci.
03/10/2011, 23h11
NoSmoking

Bonsoir,
vraiment pas saisi, je pense que le mieux est une page simplifiée en ligne et/ou plus de code, pour éventuellement visualiser...rechargement page, Ajax ???
04/10/2011, 01h40
DDNetweaver

Pourquoi t'utilises pas un select sur plusieurs lignes plutot qu'une div avec des li ?

car la c'est pas très conforme html et tu reinventes la roue quand meme.

Un select avec un onchange="fct()" c'est quand même beaucoup plus simple

Citation:

Envoyé par DDNetweaver

Pourquoi t'utilises pas un select sur plusieurs lignes plutot qu'une div avec des li ?

car la c'est pas très conforme html et tu reinventes la roue quand meme.

Un select avec un onchange="fct()" c'est quand même beaucoup plus simple

Je suis entièrement d'accord avec toi, le seul soucis c'est qu'en fait le cahier des charges vient de changer et je peux difficilement niveau temps faire machine arrière au niveau de la génération des mes éléments.

@NoSmoking, je te concède que c'est mal expliqué :D

Voila le code simplifié qui réagi exactement pareil:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> <head /> <body> <div id="aa"> <div id= "bb" style="height:50px;overflow-y:scroll;width:100px;"> <ul> <li onclick="fct();"> 1 </li> <li onclick="fct();"> 2 </li> <li onclick="fct();"> 3 </li> <li onclick="fct();"> 4 </li> <li onclick="fct();"> 5 </li> <li onclick="fct();"> 6 </li> <li onclick="fct();"> 7 </li> <li onclick="fct();"> 8 </li> <li onclick="fct();"> 9 </li> <li onclick="fct();"> 0 </li> </ul> </div> </div> <script> function fct(){ document.getElementById('aa').innerHTML += '<div>test</div>'; } </script> </body> </html>
Donc le soucis vient du innerHTML je pense.

04/10/2011, 11h23
Pymento

J'ai trouvé une piste :

Code:

document.getElementById(div_id).scrollTop = (document.getElementById(li_id).offsetTop-206);

Ce qui me chagrine c'est que j'ai a utilisé ce 206 que j'ai trouvé je ne sais comment !

en gros scrollTop permet de se positionner à l'intérieur d'un div scrollable, le but étant de récupérer l'offset de l'élément cliqué pour le repositionner après que le innerHTML += 'div' ai fais des siennes. Le soucis c'est que le offsetTop bien que l'élément étant en position relative, me renvoi l 'offset absolut que j'affecte a un offset relatif.
L'offsetTop de ma div est de 196. l'offset heigth d'un li est de 30. Mais impossible de retomber sur le 206 seul param qui fait tout bien réagir.
04/10/2011, 11h34
SpaceFrog

heu des li tout seuls ... ???

il manque ...
enfin quelque chose quoi ...
04/10/2011, 11h58
vermine

Pas d'bras, pas d'chocolat

Il manque le sommier ! :-o
04/10/2011, 14h00
Loceka

Je plussoie SpaceFrog et Vermine, il manque <ul> devant ton <li>.

PS :
Des discussions comme ça, on ne peut pas se permettre des les laisser passer. :nono:
04/10/2011, 15h38
Pymento

Si si je te rassure on peut se permettre, quand quelqu'un met une source faite en 30sec pour simplement proposer un visuel.
Mais allez, c'est de bonne guerre, je vais rééditer mon post ! cela dit ça ne change en rien la problématique.
04/10/2011, 15h39
SpaceFrog

c'est peut etre visuellement acceptable ... mais pas valide !
04/10/2011, 15h42
SpaceFrog

206 = la hauteur du div contenant le select ?

Code:

1
2
3
4
function fct(){
	document.getElementById('aa').innerHTML += '<div>test</div>';
	document.getElementById('aa').getElementsByTagName('div')[document.getElementById('aa').getElementsByTagName('div').length-1].scrollIntoView(true)
}

04/10/2011, 16h04
Pymento
Je devais avoir un pb de cache quand j'ai fais mes tests (pourtant ctrl+F5) mais enfait le 196, offset de l'élément parent convient:
Code:

1 2 3 parentOffset = document.getElementById(li_id).parentNode.offsetTop; document.getElementById(div_id).scrollTop = (document.getElementById(li_id).offsetTop-parentOffset);
Donc c'est une solution pour palier à l'effet scroll up lors d'un

Code:

[...].innerHTML += "<div />"

Je passe le post en résolu mais si quelqu'un a directement une solution pour éviter ce trucage Javascript, ou simplement l'explication du pourquoi cela réagis il comme ça, je suis preneur !

@SpaceFrog
J'ai aussi vu ta solution traîner sur le net, mais elle ne marche pas pour moi, je viens de la retester, ça remonte inexorablement vers le haut.
04/10/2011, 16h06
SpaceFrog

je viens de tester sou IE et FFX le srcollIntoViex fonctionne ...
04/10/2011, 16h30
Pymento

Ha bizarre... peux tu me coller toute ta source stp ? je vais refaire le test.

Ou alors je n'ai pas compris l'ergonomie attendue ?

Mais là si tu cliques une 20aine de fois sur les options du select afin que les divs ajoutés débordent de la page en overflow, la page scrolle immédaitement de sorte que le dernier div ajouté soit visible ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head />
 
<body>
<div id="aa">
	<div style="height:50px;overflow-y:scroll;width:100px;">
           <ul>	
       <li onclick="fct();"> 1 </li>
		<li onclick="fct();"> 2 </li>
		<li onclick="fct();"> 3 </li>
		<li onclick="fct();"> 4 </li>
		<li onclick="fct();"> 5 </li>
		<li onclick="fct();"> 6 </li>
		<li onclick="fct();"> 7 </li>
		<li onclick="fct();"> 8 </li>
		<li onclick="fct();"> 9 </li>
		<li onclick="fct();"> 0 </li>
           </ul>
	</div>
</div>
<script>
function fct(){
	document.getElementById('aa').innerHTML += '<div>test</div>';
	document.getElementById('aa').getElementsByTagName('div')[document.getElementById('aa').getElementsByTagName('div').length-1].scrollIntoView(true)
}
</script>
</body>
</html>

04/10/2011, 17h21
Pymento

Effectivement, ce n'est pas l'effet attendu, mais c'est vrai qu'initialement étant donné que j'ai eu du mal à comprendre mon propre problème, j'ai sans doute très mal expliqué !

En gros l'effet recherché, est qu'à n'importe quel clic, la position du "scroll" de la div reste inchangé(donc par exemple un clic sur le dernier <li>). Et en l’occurrence le soucis venait du fait, que le scroll du div en question remontait à l'ajout d'un autre div.

Citation:

Envoyé par Pymento

Donc le soucis vient du innerHTML je pense.

tout juste, il n'y a aucune raison d'avoir à repositionner la div contenue si l'ajout d'un élément se fait de façon "clean" vai le méthodes createElement et autre appendChild
Code:

1 2 3 4 5 6 7 function fct(){ var oDiv = document.getElementById('aa'); var oNode = document.createElement('DIV'); var oTxt = document.createTextNode('test'); oNode.appendChild(oTxt); oDiv.appendChild( oNode); }
Méfions nous de innerHTML et de ses effets de bord...