Appel à la fonction depuis une div "externe"

Version imprimable

J'ai un petit probleme quant à l'appel de mes fonctions. Voici donc ce qui se trouve dans mon HEAD :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"> </script> <script type="text/javascript"> function CacherNews(){ $('.boxgrid.slideright').click(function(){ $(".cover", this).stop().animate({left:'300px'},{queue:false,duration:300}); }); }; function MontrerNews(){ $('.boxgrid.slideright').click(function(){ $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300}); }); }; </script>
Donc dans mon HEAD, j'ai deux fonctions qui sont utilisées en fait pour montrer et/ou afficher une div ( avec un effet de slide grâce au JQuery ),

et donc dans mon BODY , j'ai :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="boxgrid slideright"> <div class="cover"> LES NEWS </div> <div> <A href="javascript:;" onClick="CacherNews();"> LIEN1 </A><br /> <A href="javascript:;" onClick="MontrerNews();"> LIEN2 </A> </div> </div> <div class="test"> <A href="javascript:;" onClick="CacherNews();"> LIEN3</A><br /> <A href="javascript:;" onClick="MontrerNews();"> LIEN4 </A> </div>
Mon problème est le suivant, lorsque j'appel la fonction CacherNews() via le premier lien ( LIEN1 ), cela fonction ( et l'autre également LIEN2).

Mais lorsque je tente d'appeler mes fonctions via LIEN3 et LIEN4, cela ne marche pas ( sans doute car je me trouve dans la div "test" et non pas dans la div "boxgrid slideright" mais c'est pourtant ce que je souhaite, c'est à dire appeler mes fonctions d'une div "indépendante").

Je pense que la réponse ne doit pas être trop compliqué, sans doute au niveau de l'appel de la fonction qu'il faut que je spécifie le chemin ou autre ? mais j'ai tenté plein de chose, je n'y arrive pas.

Donc je me retourne vers vous en espérant trouvé une aide
Par avance je vous remercie.
David

ps: si cela n'est pas assez clair , je peux mettre tout en ligne

Et en passant le controleur concerné en paramètre ? ^^

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
</script>
<script type="text/javascript">
   function CacherNews(elem){
      elem.parentNode.parentNode.click(function(){
           $(".cover", this).stop().animate({left:'300px'},{queue:false,duration:300});
   });
};
   function MontrerNews(elem){
      elem.parentNode.parentNode.click(function(){
           $(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
   });
};
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
   <div class="boxgrid slideright">
      <div class="cover"> LES NEWS </div>
      <div>
         <A href="javascript:;" onClick="CacherNews(this);"> LIEN1 </A><br />
         <A href="javascript:;" onClick="MontrerNews(this);"> LIEN2 </A>
      </div>
   </div>

   <div class="test">
       <A href="javascript:;" onClick="CacherNews(this);"> LIEN3</A><br />
       <A href="javascript:;" onClick="MontrerNews(this);"> LIEN4 </A>
   </div>

Mais ici je suis parti du principe (je n'ai qu'une partie du contexte) que tes "A" étaient toujours placés à deux niveaux "sous" le div à cibler. Si ce n'est pas le cas et que ton besoin est plus complexe, il y a d'autres solutions, surtout en utilisant jQuery...

11/10/2010, 21h44
Zadoner
Tout d'abord, merci pour ton aide !

Je pense comprendre la théorie du principe, mais c'est justement quand il s'agit de l'appliqué que je bloc.

Lorsque tu mets "
Code:

1 2 3 4 ... function CacherNews(elem){ elem.parentNode.parentNode.click(function(){ ...
- a koi correspondent elem.parentNode... ( genre document.body.madiv.click ? )

- et "eleme dans function CacherNews (elem) c'est quel élément que je dois mettre le nom de la div ? dans mon cas, c'est la div "cover" donc ca veut dire CacherNews(cover)

Car pour la question de savoir si les liens A point toujours sur deux niveaux en dessous, on peut dire OUI avec le meme chemin d'acces genre ( body>madiv1>madivAcacher )
11/10/2010, 23h06
RomainVALERI

Hu hu, oui je comprends la confusion possible :mouarf: attends

Non, le code que je t'ai donné est fonctionnel en l'état, tu n'as rien à remplacer. Ici, l'expression elem est une variable dont la valeur est donnée lors de l'exécution de la page dans le navigateur. La valeur sera par exemple "cover" si c'est ce div qui est cliqué. C'est précisément le premier grain de sable à partir duquel tout l'empire informatique s'est construit. Ni plus ni moins... Bienvenue au paradis !* :king:

* lequel d'entre vous a dit "en enfer" ? :roll:
12/10/2010, 16h04
Zadoner

Bonjour,
et merci pour ta réponse. J'ai donc fait ce que tu m'avais dis mais cela ne fonctionne pas. Alors pour être bien sur qu'on soit sur le meme codage, je joins l'adresse url de ma page test.

La première , c'est la version initiale, ou on peut voir le rendu souhaité mais pas depuis le "bon lien"
http://www.zadoner.free.fr/test/test_good.html

Et la deuxieme page , ou j'ai appliqué tes recommandations , qui malheureusement ne semble pas fonctionner ... :(
http://www.zadoner.free.fr/test/test_bad.html

En espérant que quelqu'un puisse m'aider. J'espère que la fin est proche.
Cordialement,
David
12/10/2010, 20h44
Arnaud F.

Bonjour,

il faut rester un minimum cohérent dans votre structure ou votre manière d'attribuer les classes.

En effet, dans votre div .test, aucune div n'a de classe .cover, alors que cacher? Votre animation s'effectue seulement sur cette classe...

Si vous voulez appliquer vos deux méthodes il faut rajouter les div et classes correspondantes dans la div .test pour que cela prenne effet ...

Le problème vient de là :

Code:

$('.boxgrid.slideright')

Vous n'ajouter que l'évènement click sur les div ayant ces deux classes, .test n'en faisant pas partie, cette dernière est ignorée.

Merci pour votre réponse. Je comprends bien ce que vous essayé de me dire, mais la mise en pratique est tout autre. Je vais essayé de clarifier ce que je souhaite vraiment :

J'ai deux div imbriquée (absolument nécessaire, l'une qui se déroule -> ".volet" et l'autre qui sert de fond -> ".fond")

et une autre div "externe" qui permet de controler le volet dépliant, ce sera la div ".controle_externe"
Code:

1 2 3 4 5 6 7 8 9 <div class="fond"> <div class="volet"> LES NEWS </div> </div> <div class="controle_externe"> <A href="javascript:;" onClick="CacherNews();"> SUPP2 </A><br /> <A href="javascript:;" onClick="MontrerNews();"> AFF2 </A> </div>
ensuite dans mon head, j'ai mes deux fonctions script qui permettte le déploiment ou non du "volet" qui fonctionne avec du jquery.
Code:

1 2 3 4 5 6 7 8 9 10 function CacherNews(){ $('.fond').click(function(){ $(".volet", this).stop().animate({left:'300px'},{queue:false,duration:300}); }); }; function MontrerNews(){ $('.fond').click(function(){ $(".volet", this).stop().animate({left:'0px'},{queue:false,duration:300}); }); };
Et donc, si j'ai bien compris, vu que le lance la fonction depuis la div "controle_externe" , je ne peux pas faire marcher mes actions car dans les fonctions il y a que .fond et .volet

mais alors, comment faire pour lancer les action depuis ma div externe ???
comment intégrer la div externe dans les actions ?
en spécifiant le chemin pour y accéder ? si oui, comment ? j'ai pas réussi avec les parentNode ...

Vraiment, je vous assure, j'y mets du mien... c'est pas manque d'essayer ...

Juste pour vous signaler que j'ai résolu mon souci en utilisant un tout autre script mais qui fonctionne bien et qui est maniable.

Donc pour tout ceux qui aurait le même problème que moi. Voici donc un code qui fonctionne tres bien !

J'espère que cela aidera, et merci encore à tout pour votre aide.
Longue vie à developpez !

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		h1 {
			font-size:2em;
			text-shadow: 4px 4px 4px #bbbbbb;
			text-align:center;
		}
		p {
			padding:6px;
		}
		div#conteneur {
			width:95%;
			min-width:800px;
			min-height:500px;
			margin:12px auto;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
		}
 
		/* Test */
		div.cover {
			position:relative;
			top:200px;
			width:500px;
			height:200px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
		<div class="cover"> 
 
			<p>Un mot pour remplir</p>
		</div> 
	</div> 
 
    <span class="monter">Monter</span> <span class="descendre">Descendre</span> <span class="alterne">Up/Down</span> <span class="left">Left</span>
    <span class="right">right</span> <span class="toggleLR">Left/Right</span>
 
 
	<script charset="utf-8" src="jquery-1.4.3rc2.min.js"></script>
	<script>
		$(function(){
			$("span.monter").click(function(){
				$("div.cover").animate({top:'-=100px'}, 500);
			});
 
			$("span.descendre").click(function(){
				$("div.cover").animate({top:'+=100px'}, 500);
			});
 
			$("span.left").click(function(){
				$("div.cover").animate({left:'+=100px'}, 500);
			});
 
			$("span.right").click(function(){
				$("div.cover").animate({left:'-=100px'}, 500);
			});
 
			$("span.alterne").toggle(
				function() {
					$("div.cover").animate({top:'-=100px'}, 500);
				},
				function() {
					$("div.cover").animate({top:'+=100px'}, 500);
				}
			);
 
			$("span.toggleLR").toggle(
				function() {
					$("div.cover").animate({left:'-=100px'}, 500);
				},
				function() {
					$("div.cover").animate({left:'+=100px'}, 500);
				}
			);
 
		});
 	</script>
</body>  
</html>