Scroll up d'un div à la génération d'un autre div [Résolu]

Pymento · 03/10/2011, 12h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

NoSmoking · 03/10/2011, 23h11

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

DDNetweaver · 04/10/2011, 01h40

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

Pymento · 04/10/2011, 08h58

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é

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Pymento · 04/10/2011, 11h23

J'ai trouvé une piste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

SpaceFrog · 04/10/2011, 11h34

heu des li tout seuls ... ???

il manque ...
enfin quelque chose quoi ...

vermine · 04/10/2011, 11h58

Il manque le sommier !

Loceka · 04/10/2011, 14h00

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.

Pymento · 04/10/2011, 15h38

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.

SpaceFrog · 04/10/2011, 15h39

c'est peut etre visuellement acceptable ... mais pas valide !

SpaceFrog · 04/10/2011, 15h42

206 = la hauteur du div contenant le select ?

SpaceFrog · 04/10/2011, 15h52

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pymento · 04/10/2011, 16h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

[...].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.

SpaceFrog · 04/10/2011, 16h06

je viens de tester sou IE et FFX le srcollIntoViex fonctionne ...

Pymento · 04/10/2011, 16h30

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

SpaceFrog · 04/10/2011, 16h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Pymento · 04/10/2011, 17h21

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.

NoSmoking · 04/10/2011, 19h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

04/10/2011, 11h23	#5
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	J'ai trouvé une piste : Code : Sélectionner tout - Visualiser dans une fenêtre à part 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. __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

04/10/2011, 11h34	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	heu des li tout seuls ... ??? il manque ... enfin quelque chose quoi ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	10

04/10/2011, 11h58	#7
vermine Responsable JavaScript & AJAX Inscription : mars 2008 Messages : 2 690 Détails du profil Informations personnelles : Âge : 27 Informations forums : Inscription : mars 2008 Messages : 2 690 Points : 5 763 Points : 5 763	Pas d'bras, pas d'chocolat Il manque le sommier ! __________________ Elen Poukram - Isegoria - Sandawe
	10

04/10/2011, 15h38	#9
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	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. __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

04/10/2011, 15h39	#10
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	c'est peut etre visuellement acceptable ... mais pas valide ! __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

03/10/2011, 23h11	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 779 Points : 4 779	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 ???
	00

04/10/2011, 01h40	#3
DDNetweaver Futur Membre du Club Inscription : août 2007 Messages : 16 Détails du profil Informations forums : Inscription : août 2007 Messages : 16 Points : 17 Points : 17	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
	00

04/10/2011, 14h00	#8
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 451 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 451 Points : 2 151 Points : 2 151	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.
	10

04/10/2011, 15h42	#11
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	206 = la hauteur du div contenant le select ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

04/10/2011, 16h06	#14
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	je viens de tester sou IE et FFX le srcollIntoViex fonctionne ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

04/10/2011, 16h30	#15
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	Ha bizarre... peux tu me coller toute ta source stp ? je vais refaire le test. __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

04/10/2011, 17h21	#17
Pymento Membre confirmé Ingé. Info. Inscription : janvier 2008 Messages : 338 Détails du profil Informations personnelles : Sexe : Âge : 24 Localisation : France, Haute Garonne (Midi Pyrénées) Informations professionnelles : Activité : Ingé. Info. Informations forums : Inscription : janvier 2008 Messages : 338 Points : 273 Points : 273	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. __________________ Memento Quia Pulvis Es, Et In Pulverem ReverteriS
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email