ascenseurs et javascript

Version imprimable

Bonjour,

Je précise avant tout que je suis débutant. Je cherche à pouvoir manipuler les ascenseurs, Je vous explique le contexte. Dans ma page html, j'ai 3 frames. et je cherche en bougeant l’ascenseur de la frame3, pouvoir pouvoir bouger à la même position la frame 2. Je sais pas si cela est possible, et j'ai trouvé une fonction qui me permet de récupérer la position de l’ascenseur (scrollTop et scrollLeft). Je me suis dit que je pourrais faire bouger les deux ascenseurs à la même position en actionnant un seul ascenseur. J'ai imaginé une fonction qui fonctionnerait comme cela :
- lecture de la position de l’ascenseur de la frame3
- écrit de la valeur récupéré dans l’ascenseur de la frame 2
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> </head> <FRAMESET COLS="20%,80%" onload="pos()"> <FRAME SRC="page1.html" NAME="gauche" id="gauche" scrolling="no" > <FRAMESET ROWS="50%, 50%"> <FRAME SRC="frame2.htm" NAME="frame2"id="frame2"> <FRAME SRC="page" NAME="frame1" scrolling="yes" id="droit_bas"> </FRAMESET> </html>
Peut être que j'ai mal compris l'utilisation de cette fonction.

Je remercie d'avance les personnes qui pourrait me donner des pistes ou m'aider tout simplement.

02/03/2011, 15h36
RomainVALERI

Citation:

Envoyé par breizhlama

[...] J'ai imaginé une fonction qui fonctionnerait comme cela [...] Peut être que j'ai mal compris l'utilisation de cette fonction. [...]

Heu... tu ne sais pas comment utiliser une fonction non encore écrite, mais que tu as imaginée... ? :koi: C'est moi qui craque ou bien ? :fou:

Quelle partie te pose problème exactement ? :? lier la fonction aux éléments de la page ?
02/03/2011, 15h51
breizhlama

Non en faite, dans un premier temps, je cherche à récupérer la valeur de l'ascenceur de la frame3 puis envoyer cette valeur dans la frame1 afin de les faire bouger "simultanement". Quand je dis imaginer... elle est pas encore écrite puisque je cherche comment faire fonctionner scrolltop avec mes frames mais j'y arrive pas. Ensuite je viens de trouver la fonction scrollto(x,y) qui permet d'envoyer l'ascenseur à la position x et y.
La partie qui me pose problème, c'est de faire fonctionner scrolltop et scrollto avec mes frames... mais j'y arrive pas ^^.

Merci d'avance
02/03/2011, 15h58
SpaceFrog

scrollTop ?
02/03/2011, 16h03
breizhlama

J'ai l'impression d'avoir dis quelque chose qu'il fallait pas ? Il me semble qu'avec scrollTop, je peux récupérer la position d'un ascenseur, non ?
02/03/2011, 16h10
SpaceFrog

et l'attribuer
02/03/2011, 16h17
breizhlama

et c'est possible que cela se fasse simultanément ? c'est à dire que quand je bouge l’ascenseur de la frame3, l’ascenseur de la frame2 bouge en même temps ?
02/03/2011, 16h21
SpaceFrog

oui
02/03/2011, 16h21
Bovino

Utilise l'événement onscroll pour synchroniser les deux.
02/03/2011, 17h11
RomainVALERI
Quelque chose ressemblant à
Code:

1 2 3 4 5 function synchroniser_scrolls() { document.getElementById("idElementMaitre").onscroll = function() { document.getElementById("idElementEsclave").scrollTop = this.scrollTop; }; }
que tu appelles sur le chargement du body, par exemple en faisant :

Code:

document.body.onload = synchroniser_scrolls;

(mais attention quand même si tu as déjà des fonctions appelées sur le onload du body ^^)
02/03/2011, 17h12
SpaceFrog

a condition que les pages dependent du même domaine
02/03/2011, 17h15
Bovino
Citation:
Envoyé par RomainVALERI

Quelque chose ressemblant à

Code:

1 2 3 4 5 function synchroniser_scrolls() { document.getElementById("idElementMaitre").onscroll = function() { document.getElementById("idElementEsclave").scrollTop = this.scrollTop; }; }

que tu appelles sur le chargement du body, par exemple en faisant :

Code:

document.body.onload = synchroniser_scrolls;

(mais attention quand même si tu as déjà des fonctions appelées sur le onload du body ^^)
Bien tenté, mais dans une page avec frameset, il n'y a pas de body :aie:
02/03/2011, 17h18
SpaceFrog

documentElement ?
02/03/2011, 17h23
Bovino
Citation:

je cherche en bougeant l’ascenseur de la frame3, pouvoir pouvoir bouger à la même position la frame 2

En supposant que la "frame3" corresponde en fait à celle nommée "frame1" (:aie:), je verrais plus, dans son body :

Code:

<body onscroll="synchro()">

avec
Code:

1 2 3 function synchro(){ parent.frame2.document.body.scrollTo(document.body.scrollTop,document.body.scrollLeft); }
02/03/2011, 17h44
RomainVALERI

Citation:

Envoyé par Bovino

Bien tenté, mais dans une page avec frameset, il n'y a pas de body :aie:

Ah tiens oui c'est un frameset... :oops: Avec les frames, je sais pas pourquoi, mais l'information ne veut pas rentrer dans mon crâne ... :aie:
02/03/2011, 20h10
SpaceFrog

Peut être parce que toi tu n'es pas deprecated ^^
03/03/2011, 10h15
RomainVALERI

Citation:

Envoyé par SpaceFrog

Peut être parce que toi tu n'es pas deprecated ^^

8O oula... misère les gars y'a spaffy qui nous fait le coup de blues du printemps :mouarf:
03/03/2011, 20h30
breizhlama

j'ai essayé les bouts de codes que vous m'avez donné... mais j'arrive toujours pas à faire fonctionner même en passant en iframe. et j'ai trituré le code dans tous les sens :( sans avoir aucun résultat positif. Pourtant il me semble que le code est bon dans les propositions.
03/03/2011, 20h57
RomainVALERI

Montre-nous le résultat de tes tentatives (le code, quoi ^^)

Voilà le morceau de code que je triture. En utilisant les parties de codes que l'on m'a donné dans les réponses précédentes.
J'ai lu le code, et pourtant je ne vois pas ce qui ne veut pas fonctionner.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>	
          <head>
		  <script>
				function synchroniser_scrolls() {
					document.getElementById("frame1").onscroll = function() {
					document.getElementById("frame2").scrollTop = this.scrollTop;
				};
			}
		  </script>
 
	  </head>
 
          <body>
		  <script>
			document.body.onload = synchroniser_scrolls;
		  </script>
 
		  <IFRAME src="OP_52_2011.txt" width=600 height=200 scrolling=auto frameborder=1 NAME="frame3" id="frame3" scrolling="no" > </IFRAME>
		  <IFRAME src="OP_52_2011.txt" width=600 height=200 scrolling=auto frameborder=1 NAME="frame2"id="frame2"> </IFRAME>
		  <IFRAME src="OP_52_2011.txt" width=600 height=200 scrolling=auto frameborder=1 NAME="frame1" scrolling="yes" id="frame1"> </IFRAME>
 
	  </body>
</html>

Merci aux âmes charitables de ce forum :D

03/03/2011, 21h55
Bovino
Code:

1 2 3 document.getElementById("frame1").onscroll = function() { document.getElementById("frame2").scrollTop = this.scrollTop; };
:nono:

Lorsque tu scrolles dans l'iframe, l'événement n'est pas lié à la balise iframe mais au body du document qu'elle contient.
03/03/2011, 22h06
breizhlama
Code:

1 2 3 document.getElementById("frame1").onscroll = function() { document.getElementById("frame2").scrollTop = this.scrollTop; };
si j'ai bien compris ce que tu as dis je dois faire ça ?
Code:

1 2 3 document.getElementById("frame1").body.onscroll = function() { document.getElementById("frame2").body.scrollTop = this.scrollTop; };
Désolé mais j'ai un peu de mal à comprendre avec les frames et les iframes. J'avoue que j'aurais pu commencer par plus facile comme problème. Mais c'est une fonctionnement que j'ai besoin pour une appli web.
03/03/2011, 22h35
Bovino

Une page Web est un document HTML.
Or une frame ou une iframe intègrent dans cette page un nouveau document HTML qui possède ses propres propriétés.
Dans un document HTML, si tu as par exemple

Code:

<div style="overflow:scroll"></div>

c'est bien l'élément div qui reçoit l'événement scroll, mais avec

Code:

<iframe scrolling="auto"></iframe>

ce n'est pas l'élément iframe qui reçoit l'événement mais le body de l'iframe, c'est donc sur ce body qu'il faut récupérer l'événement.

Merci beaucoup aux personnes qui ont réagis par rapport à mon problème. J'ai compris finalement comment ça fonctionnait. Pour ceux que ca pourrait aider plus tard je donne mon code pour cela.

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
29
30
31
	<html>	
		<head>
			<script type="text/javascript">
				function scrollTwin(f1, f2, f3)
				{
				 document.frames[f3].document.body.onscroll = function(){
				 window.parent.document.frames[f1].scroll(window.parent.document.frames[f3].document.body.scrollLeft,0);
				 window.parent.document.frames[f2].scroll(0,window.parent.document.frames[f3].document.body.scrollTop);
				 }
				}
			</script>
 
 
 
		</head>
 
 
				<FRAMESET ROWS="15%,85%" COLS="24%,76%" onLoad="scrollTwin('frame1','frame2','frame3')"> 
					<FRAME SRC="frame0.htm" Scrolling="no" NAME="frame0">
 
					<FRAME SRC="frame1.htm" Scrolling="no" NAME="frame1">
 
 
					<FRAME SRC="frame2.htm" Scrolling="no" NAME="frame2">
 
					<FRAME SRC="frame3.htm" NAME="frame3" Scrolling="yes" id="frame3">
 
				</FRAMESET> 
 
 
	</html>

Merci encore :D