IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Appel à la fonction depuis une div "externe"


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Webmaster
    Inscrit en
    Mars 2007
    Messages
    39
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2007
    Messages : 39
    Par défaut Appel à la fonction depuis une div "externe"
    J'ai un petit probleme quant à l'appel de mes fonctions. Voici donc ce qui se trouve dans mon HEAD :

    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
     
    <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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Et en passant le controleur concerné en paramètre ? ^^
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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...

  3. #3
    Membre averti
    Profil pro
    Webmaster
    Inscrit en
    Mars 2007
    Messages
    39
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2007
    Messages : 39
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 )

  4. #4
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Hu hu, oui je comprends la confusion possible 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 !*

    * lequel d'entre vous a dit "en enfer" ?

  5. #5
    Membre averti
    Profil pro
    Webmaster
    Inscrit en
    Mars 2007
    Messages
    39
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2007
    Messages : 39
    Par défaut
    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

  6. #6
    Rédacteur
    Avatar de Arnaud F.
    Homme Profil pro
    Développeur COBOL
    Inscrit en
    Août 2005
    Messages
    5 183
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Développeur COBOL
    Secteur : Finance

    Informations forums :
    Inscription : Août 2005
    Messages : 5 183
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $('.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.
    C'est par l'adresse que vaut le bûcheron, bien plus que par la force. Homère

    Installation de Code::Blocks sous Debian à partir de Nightly Builds

  7. #7
    Membre averti
    Profil pro
    Webmaster
    Inscrit en
    Mars 2007
    Messages
    39
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2007
    Messages : 39
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ...

  8. #8
    Membre averti
    Profil pro
    Webmaster
    Inscrit en
    Mars 2007
    Messages
    39
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Mars 2007
    Messages : 39
    Par défaut
    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 : 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
    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>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Appel de fonction depuis une table dynamique
    Par kap dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 01/04/2011, 14h30
  2. Appel de fonction depuis une classe fille
    Par lhpp dans le forum Interfaces Graphiques en Java
    Réponses: 8
    Dernier message: 26/04/2006, 22h02
  3. Appel aux fonctions d'une DLL externe ??
    Par Fbartolo dans le forum Access
    Réponses: 7
    Dernier message: 21/11/2005, 17h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo