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

JavaScript Discussion :

javascript et interférence avec d'autres javascript


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 17
    Points : 12
    Points
    12
    Par défaut javascript et interférence avec d'autres javascript
    Bonjour à tous,

    je me suis penché sur un code en open source de chat communautaire qui se nomme AjaxIM, depuis hier j'ai réussi à modifier le javascript pour que la connexion soit automatique et qu'il s'adapte sans problème à mon programme

    mais je me heurte a un dernier problème en effet... lorsque je l'intègre à ma page, il marche parfaitement mais me désactivé tous les autres javascript du site, j'ai un menu déroulant en javascript qu'il désactive, une galerie image en javascript, qu'il désactive aussi...

    pensez- vous que cela est un lien avec le z-index ( je viens de vérifier ca n'en a pas l'air ! si jele modifie on obtiens le même probleme... ) , ou d'où cela peut-il venir ?

    peut-etre un problème de focus() ? je ne connais pas du tout les interférence de javascript, si vous pouvez juste me mettre sur des pistes, je ferai les recherches :p

    j'ai remarquer en faisant des tests, que si j'enlève mon second javascript galerie image, il marche mieux, et si je le laisse, il me fait disparaitre carrément tout. il y a donc une sacré interférence entre les deux système...

    merci de votre avis, si vous avez des questions je suis dans les parages...

    Merci, et Bonne journée.

    B.

    je vous met en ligne le code qui se trouve etre la gallerie qui désactive mon autre partie, il désactive totalement l'AJAX qui sert au chat communautaire...

    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
     
    var ImageMenu = new Class({
     
    	getOptions: function(){
    		return {
    			onOpen: false,
    			onClose: Class.empty,
    			openWidth: 200,
    			transition: Fx.Transitions.quadOut,
    			duration: 400,
    			open: null,
    			border: 0
    		};
    	},
     
    	initialize: function(elements, options){
    		this.setOptions(this.getOptions(), options);
     
    		this.elements = $$(elements);
     
    		this.widths = {};
    		this.widths.closed = this.elements[0].getStyle('width').toInt();
    		this.widths.openSelected = this.options.openWidth;
    		this.widths.openOthers = Math.round(((this.widths.closed*this.elements.length) - (this.widths.openSelected+this.options.border)) / (this.elements.length-1))
     
     
    		this.fx = new Fx.Elements(this.elements, {wait: false, duration: this.options.duration, transition: this.options.transition});
     
    		this.elements.each(function(el,i){
    			el.addEvent('mouseenter', function(e){
    				new Event(e).stop();
    				this.reset(i);
     
    			}.bind(this));
     
    			el.addEvent('mouseleave', function(e){
    				new Event(e).stop();
    				this.reset(this.options.open);
     
    			}.bind(this));
     
    			var obj = this;
     
    			el.addEvent('click', function(e){
     
    				if(obj.options.onOpen){
    					new Event(e).stop();
    					if(obj.options.open == i){
    						obj.options.open = null;
    						obj.options.onClose(this.href, i);
    					}else{
    						obj.options.open = i;
    						obj.options.onOpen(this.href, i);
    					}
     
     
    				}
     
    			})
     
    		}.bind(this));
     
    		if(this.options.open){
    			if($type(this.options.open) == 'number'){
    				this.reset(this.options.open);
    			}else{
    				this.elements.each(function(el,i){
    					if(el.id == this.options.open){
    						this.reset(i);
    					}
    				},this);
    			}
    		}
     
    	},
     
    	reset: function(num){
    		if($type(num) == 'number'){
    			var width = this.widths.openOthers;
    			if(num+1 == this.elements.length){
    				width += this.options.border;
    			}
    		}else{
    			var width = this.widths.closed;
    		}
     
    		var obj = {};
    		this.elements.each(function(el,i){
    			var w = width;
    			if(i == this.elements.length-1){
    				w = width+5
    			}
    			obj[i] = {'width': w};
    		}.bind(this));
     
    		if($type(num) == 'number'){
    			obj[num] = {'width': this.widths.openSelected};
    		}
     
    		this.fx.start(obj);
    	}
     
    });
     
    ImageMenu.implement(new Options);
    ImageMenu.implement(new Events);

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

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Points : 4 164
    Points
    4 164
    Par défaut
    Il est possible (mais seule la lecture de ton code pourrait le confirmer ^^) que le problème vienne des gestionnaires d'événement.

    Quand ils sont appliqués "correctement" aux éléments, tout va bien. Malheureusement, l'habitude très répandue de placer les gestionnaires en assignant directement des fonctions aux propriétés "événements" des éléments (je veux parler des propriétés onclick, onmouseover, onchange, etc.) cause parfois l'écrasement des gestionnaires précédemment appliqués quand plusieurs scripts (au départ indépendants) sont appliqués à la même page.

    Exemple :

    1er script : scriptMaison.js
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    // ...
    window.onload = fonction() {
       // initialisations, traitements divers, etc.
    }
    // ...

    2eme script : ajaxIM.js
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    // ...
    window.onload = fonction() {
       // autres traitements
    }
    // ...
    Dans cet exemple, la fonction contenant les "autres traitements", présents dans ajaxIM.js, vient écraser celle qui contenait les premiers traitements, ceux de scriptMaison.js... (si toutefois ils sont bien liés depuis le head dans cet ordre : sinon c'est le contraire bien entendu : le premier écraserait le second)

    Si jamais c'était le cas, il est facile de réparer la situation avec un peu d'addEventListener/attachEvent.

    Tiens-nous au jus ^^

  3. #3
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 17
    Points : 12
    Points
    12
    Par défaut
    Merci pour la réponse je ne connais pas des masses javascript mais en effet à tous les coups cela parait logique que ce soit incompatibilité "Event"

    donc là je suis à la recherche de dispatchevent, car j'ai essayer de mettre addeventlistener à la place de addevent dans le code du dessus, et il n'y a pas de modification !

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

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Points : 4 164
    Points
    4 164
    Par défaut
    Citation Envoyé par seif_scalp Voir le message
    Merci pour la réponse je ne connais pas des masses javascript mais en effet à tous les coups cela parait logique que ce soit incompatibilité "Event"

    donc là je suis à la recherche de dispatchevent, car j'ai essayer de mettre addeventlistener à la place de addevent dans le code du dessus, et il n'y a pas de modification !
    Oula attention quand même aux remplacements dans la masse, notamment si tu n'es pas sûr de tes connaissances javascript...

    >>> dispatchEvent ? Quel rapport ici ?

    Montre nous ton code si tu veux un avis plus précis

  5. #5
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Salut,
    Vu que tu sembles aussi utiliser des bibliothèques (au moins Prototype), vérifies qu'il n'y ai pas de conflits à ce niveau...

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    Juillet 2007
    Messages
    17
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2007
    Messages : 17
    Points : 12
    Points
    12
    Par défaut
    A vrai dire pour tout vous dire, je ne connais pas beaucoup de choses en javascript, mes connaissances sont plus vers d'autres langage web comme php mysql...

    mais je m'intéresse beaucoup àà javascript puisque je travail pas mal en ajax, par contre il est vrai que là je sèche... et en effet je me suis rendu compte que dispatch n'avait aucun interet ici !

    en ce qui concerne l'idée sur un conflit au niveau d'une bibliotèque je me suis rendu compte qu'en supprimant le fichier prototype.js je n'avais plus d'erreur, même si le script utilisant prototype ne marche plus. donc peut-etre cela viendrait-il de là !?

    je vous remercie beaucoup pour votre écoute

    donc le souçis pour vous transmettre le code, c'est que ajaxim, sur lequel j'ai bosser pendant 5h, est comporté de 15 fichiers .js, mais je ne sais pas lequel vous transmettre pour cibler mon problème.

    en ce qui concerne donc le second script qui est une mini gallerie image je vous ai envoyé le code dans mon premier message, j'ai essayé de modifier comme dit les add.event en add.eventlistener, en modifiant les variable entre ( ) de même... mais cela ne change rien, le second script marche toujours sans erreur, mais pas ajax im.

    avez vous des idées, je suis à votre écoute, comment puis-je faire pour vérifier si l'erreur vient d'interférence entre librairie ou bien d'ailleurs ?

    sur le site actuellement visible j'ai trois script javascript :

    1) un menu déroulant placé avant ajaxim qui marche plus lorsque ajaxim est disposé, mais ajaxim lui marche.
    2) ajaxim qui ne marche que si je ne met pas le 3)
    3) la mini galerie image qui ne marche plus a l'arrivée de ajaxim mais par contre elle empeche de fonctionner ajaxim aussi d'ou plus de javascript marche a l'arrivé de ajaxim

    et ennfin lorsque je n'ai pas ajaxim tout marche sans problème, il y a donc une interférence mais où :p ? quel fichier dois-je vous transmettre pour m'aider un peu :p

    voici le lien de ajaxim http://ajaxim.com/download/3.41 tous les fichiers sont dans ce zip... si vous avez quelques minutes à m'accorder

    Merci beaucoup d'avance ^^

    PS : Ajaxim utilise la librairie prototype et ma gallerie d'image est en mootools... le problème serait-il là ?
    par contre le menu déroulant n'utilise pas de librairie et a l'arrivé de ajaxim il ne marche plus non plus

    voilà le code du menu déroulant : ( rappel : le menu déroulant et la galerie ensemble n'ont pas d'interférence )
    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
     
    <SCRIPT LANGUAGE="JavaScript">
     
    <?php echo"
    bgcolor='#F7D469';
    bgcolor2='#FF9000';
    ";
    ?> 
    document.write('<style type="text/css">');
    document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:3;}')
    document.write('#topgauche { position:absolute;  z-index:10;  }')
    document.write('A:hover.ejsmenu {color:#0D2F85; text-decoration: none; font-family:Times New Roman;	font-size:14px;}')
    document.write('A.ejsmenu {color:#0D2F73; text-decoration:none;  font-family:Times New Roman;	font-size:14px;}')
    document.write('</style>')
    document.write('<div style="position:relative;height:25"><DIV class=popper id=topdeck></DIV>');
     
    zlien = new Array;
    zlien[0] = new Array;
    zlien[1] = new Array;
    zlien[2] = new Array;
    zlien[3] = new Array;
    zlien[4] = new Array;
    zlien[5] = new Array;
    zlien[6] = new Array;
     
    <?php $idd = $_SESSION['pseu_adm']; ?>
     
    zlien[0][0] = ' <img src="img/icon/silk/icons/cup.png"><A HREF="?id=<?php echo $idd; ?>&p=adm" CLASS=ejsmenu> &nbsp; Administration</A> -';
    zlien[0][1] = ' <img src="img/icon/silk/icons/cross.png"><A HREF="?id=<?php echo $idd; ?>&p=deco" CLASS=ejsmenu> &nbsp; Se Déconnecter</A> -';
     
    zlien[1][0] = ' <img src="img/icon/silk/icons/information.png"><A HREF="?id=<?php echo $idd; ?>&p=adm&q=infos" CLASS=ejsmenu> &nbsp; Infos du site</A> -';
    zlien[1][1] = ' <img src="img/icon/silk/icons/picture.png"><A HREF="?id=<?php echo $idd; ?>&p=adm&q=des" CLASS=ejsmenu> &nbsp; Design</A> -';
     
     
    zlien[2][0] = ' <img src="img/icon/silk/icons/bell.png"><A HREF="?id=<?php echo $idd; ?>&p=adm&q=news&t=1" CLASS=ejsmenu> &nbsp; Edito</A> -';
    zlien[2][1] = ' <img src="img/icon/silk/icons/bomb.png"><A HREF="?id=<?php echo $idd; ?>&p=adm&q=news&t=2" CLASS=ejsmenu> &nbsp; News / Actu</A> -';
     
    zlien[3][0] = ' <img src="img/icon/silk/icons/page_white_text.png"><A HREF="?id=<?php echo $idd; ?>&p=adm&q=crea" CLASS=ejsmenu> &nbsp; Articles</A>';
    zlien[3][1] = ' <img src="img/icon/silk/icons/chart_organisation.png"><A HREF="?id=<?php echo $idd; ?>&p=adm&q=annu" CLASS=ejsmenu> &nbsp; Annuaire</A>';
     
    if(document.getElementById)
    	{
    	skn = document.getElementById("topdeck").style
    	skn.left = 99;
    	}
     
    function pop(msg,pos)
    {
    skn.visibility = "hidden";
    a=true
    skn.top = pos;
    var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=150><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
    pass = 0
    while (pass < msg.length)
    	{
    	content += "<TR><TD BGCOLOR="+bgcolor+" onMouseOver=\"this.style.background='"+bgcolor2+"'\" onMouseOut=\"this.style.background='"+bgcolor+"'\" HEIGHT=20><FONT SIZE=1 FACE=\"Verdana\">&nbsp;&nbsp;"+msg[pass]+"</FONT></TD></TR>";
    	pass++;
    	}
    content += "</TABLE></TD></TR></TABLE>";
    document.getElementById("topdeck").innerHTML = content;
    skn.visibility = "visible";
    }
    function kill()
    {
    	if(document.getElementById)
    		skn.visibility = "hidden";
    }
    document.onclick = kill;
    if(document.getElementById)
    	{
    	document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR=#000000 WIDTH=100 HEIGHT=40><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT=40>')
     
    document.write('<tr><TD WIDTH=142 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[0],0)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[0],0)" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><img src="img/icon/silk/icons/house.png" border="0"> <B>Home</B></FONT></a></TD></tr>')
     
    document.write('<tr><TD WIDTH=142 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[1],20)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[1],20)" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><img src="img/icon/silk/icons/cog.png" border="0"> <B>Configurer</B></FONT></a></TD></tr>')
     
    document.write('<tr><TD WIDTH=142 ALIGN=center BGCOLOR='+bgcolor+' onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien[2],40)" onMouseOut="this.style.background=\''+bgcolor+'\'"><A onClick="return(false)" onMouseOver="pop(zlien[2],285)" href=# CLASS=ejsmenu><FONT SIZE=1 FACE="Verdana"><img src="img/icon/mini/icon_world_dynamic.gif" border="0"> <B>Zone Actu</B></FONT></a></TD></tr>')
    document.write('</TABLE></TD></TR></TABLE></DIV>')
    	}
    document.write('</div>');
    </SCRIPT>

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    Ajaxim utilise la librairie prototype et ma gallerie d'image est en mootools... le problème serait-il là ?
    Il y a de fortes chances...
    La plupart des librairies JavaScript ayant au moins en commun une fonction $...

Discussions similaires

  1. détection JVM installé avec script php/javascript
    Par <DYDY> dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/06/2006, 14h42
  2. Réponses: 5
    Dernier message: 13/04/2006, 19h51
  3. [Javascript/Dhtml] Problemes avec la supression des formulai
    Par ETI-trian dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 29/03/2006, 20h49
  4. Probleme avec un script javascript->php
    Par leluis dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 23/03/2006, 15h32
  5. Réponses: 2
    Dernier message: 20/08/2005, 19h23

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