ascenseurs et javascript [Résolu]

breizhlama · 02/03/2011, 14h31

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 :

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

RomainVALERI · 02/03/2011, 15h36

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

C'est moi qui craque ou bien ?

Quelle partie te pose problème exactement ?

lier la fonction aux éléments de la page ?

breizhlama · 02/03/2011, 15h51

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

SpaceFrog · 02/03/2011, 15h58

scrollTop ?

breizhlama · 02/03/2011, 16h03

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 ?

SpaceFrog · 02/03/2011, 16h10

et l'attribuer

breizhlama · 02/03/2011, 16h17

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 ?

SpaceFrog · 02/03/2011, 16h21

oui

Bovino · 02/03/2011, 16h21

Utilise l'événement onscroll pour synchroniser les deux.

RomainVALERI · 02/03/2011, 17h11

Quelque chose ressemblant à

Code javascript :

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

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

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

document.body.onload = synchroniser_scrolls;

(mais attention quand même si tu as déjà des fonctions appelées sur le onload du body ^^)

SpaceFrog · 02/03/2011, 17h12

a condition que les pages dependent du même domaine

Bovino · 02/03/2011, 17h15

Citation:

Envoyé par RomainVALERI

Quelque chose ressemblant à

Code javascript :

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

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

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

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

SpaceFrog · 02/03/2011, 17h18

documentElement ?

Bovino · 02/03/2011, 17h23

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

), je verrais plus, dans son body :

Code html :

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

<body onscroll="synchro()">

avec

Code :

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

1
2
3
function synchro(){
    parent.frame2.document.body.scrollTo(document.body.scrollTop,document.body.scrollLeft);
}

RomainVALERI · 02/03/2011, 17h44

Citation:

Envoyé par Bovino

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

Ah tiens oui c'est un frameset...

Avec les frames, je sais pas pourquoi, mais l'information ne veut pas rentrer dans mon crâne ...

SpaceFrog · 02/03/2011, 20h10

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

RomainVALERI · 03/03/2011, 10h15

Citation:

Envoyé par SpaceFrog

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

oula... misère les gars y'a spaffy qui nous fait le coup de blues du printemps

breizhlama · 03/03/2011, 20h30

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.

RomainVALERI · 03/03/2011, 20h57

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

breizhlama · 03/03/2011, 21h02

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 :

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

02/03/2011, 15h58	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 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 007 Points : 45 091 Points : 45 091	scrollTop ? __________________ 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

02/03/2011, 16h10	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 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 007 Points : 45 091 Points : 45 091	et l'attribuer __________________ 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

02/03/2011, 16h21	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 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 007 Points : 45 091 Points : 45 091	oui __________________ 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

02/03/2011, 16h21	#9
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	Utilise l'événement onscroll pour synchroniser les deux. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

02/03/2011, 17h12	#11
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 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 007 Points : 45 091 Points : 45 091	a condition que les pages dependent du même domaine __________________ 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

02/03/2011, 15h51	#3
breizhlama Invité de passage Inscription : mars 2010 Messages : 46 Détails du profil Informations forums : Inscription : mars 2010 Messages : 46 Points : 4 Points : 4	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
	00

02/03/2011, 16h03	#5
breizhlama Invité de passage Inscription : mars 2010 Messages : 46 Détails du profil Informations forums : Inscription : mars 2010 Messages : 46 Points : 4 Points : 4	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 ?
	00

02/03/2011, 16h17	#7
breizhlama Invité de passage Inscription : mars 2010 Messages : 46 Détails du profil Informations forums : Inscription : mars 2010 Messages : 46 Points : 4 Points : 4	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 ?
	00

02/03/2011, 17h18	#13
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 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 007 Points : 45 091 Points : 45 091	documentElement ? __________________ 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

02/03/2011, 20h10	#16
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 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 007 Points : 45 091 Points : 45 091	Peut être parce que toi tu n'es pas deprecated ^^ __________________ 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/03/2011, 20h30	#18
breizhlama Invité de passage Inscription : mars 2010 Messages : 46 Détails du profil Informations forums : Inscription : mars 2010 Messages : 46 Points : 4 Points : 4	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.
	00

03/03/2011, 20h57	#19
RomainVALERI Expert Confirmé Sénior Romain VALERI POOête Inscription : avril 2008 Messages : 2 572 Détails du profil Informations personnelles : Nom : Romain VALERI Âge : 35 Localisation : France, Meurthe et Moselle (Lorraine) Informations professionnelles : Activité : POOête Informations forums : Inscription : avril 2008 Messages : 2 572 Points : 4 073 Points : 4 073	Montre-nous le résultat de tes tentatives (le code, quoi ^^) __________________ ...pour les linguistes et les curieux >>> générateur de phrases aléatoires __________________
	00

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