11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]Conflit entre 2 jquery sur une meme page

Bonjour a tous les amis, je suis nouveau ici, j’espère être accueilli comme il se doit Smiley cligne En générale je trouve mes réponse directement sur un sujet déjà existant sur votre site qui est très bien fait, ou un peu partout sur google, mais la je bloque.

Je viens de créer une page html comportant un slideshow jquery combiné a la fonction ligthbox, jusque la tout va bien (J'utilise le jquery 1.4.4 pour le slide)

2eme partie de la page html, donc juste en dessous j'ai mis cette fonction (exemple kamil smala) (qui nécessite le jquery 1.3.1):
http://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm


Ces deux fonctions fonctionnent parfaitement séparément, mais lorsque je combine les deux code, en une seule page html ou avec la fonction include en php, le résultat reste le même car les jquery chargent sur la même page. le ligthbox ne fonctionne pas et les miniatures ne s'affichent pas, alors que la seconde fonction marche parfaitement, et lorsque j'essaie d'enlever le jquery 1.3.1 c'est l'inverse ?????

comment pourrai-je faire pour combiner les deux jquery en un seul ?
peut-être que la solution se cache la ?
Modifié par kodjoe (03 Jul 2011 - 02:48)
Salutation

Deux versions comme ça ?
C'est peut-être une collision de variable de même nom, ou de fonction de même nom.

Dans les hauts langages de programmations (java par exemple) c'est la notion de package qui règle ce litige. Car la cible est prise en compte, comme une adresse (placer dans des pakcages différents). Ainsi deux variables ou deux méthodes ayant le même nom ne peuvent faire collision, car l'adresse est différente.

Mais prend le comme une suggestion à vérifier.

..
Modifié par zardoz (02 Jul 2011 - 17:19)
Et bien dans la balise <head> j'ai :

pour le slide/ligthbox ça:

<link rel="stylesheet" type="text/css" href="photos/composants/style.css" media="screen" />
<script type="text/javascript" src="photos/composants/jquery.js"></script>
<script type="text/javascript" src="lightboxcomposant/prototype.js"></script>
<script type="text/javascript" src="lightboxcomposant/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightboxcomposant/lightbox.js"></script>
<link rel="stylesheet" href="lightboxcomposant/lightbox.css" type="text/css" media="screen" />



et pour la deuxième partie ça :

<script type="text/javascript" src="participation/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
</script>

------------------------------------------------------------------------------------------------
et ces les 2 lignes en gras représentent l'utilisation des différentes versions de jquery sur une même page, la 1.4.4 pour la bleu qui rempli la premier fonction de ma page et la 1.3.1 pour la jaune qui remplie la deuxième fonction de ma page... je suis aussi sur la même idée que toi zardoz, mais je bloque sur le fait de le mettre en pratique.

comment faire en sorte que les deux fichiers jquery font leurs boulots sans se mettre des battons dans leurs roues lol ????
Bonjour,

En regardant les deux lignes qui appellent les librairies jQuery, on se rend immédiatement compte que les deux fichiers js portent le même nom!
Avant de trop changer ton code, modifie simplement l'appel au 2ème fichier jQuery ainsi :
<script type="text/javascript" src="participation/jquery_2.js"></script>

N'oublie pas de modifier également le nom du fichier lui-même Smiley cligne .

Cordialement
changé immédiatement, sorry!!!


la première partie de la page fait sont travail parfaitement, slide + ligthbox + miniatures fonctionnent parfaitement mais la seconde bloc, les captions ne montent pas, comme si le premier jquery bloquait l'option...
j'ai fait quelques recherche dessus il y a quelques jours, j'y ai trouvé que soit

dans l'un des deux jquery (celui de la deuxième partie pour mon histoire ) on devait remplacer les $ par jquery

soit s'il y en avait un bon paquet, qu'il fallait ouvrir le jquery et le refermer par 2/3 phrases de code qui était donné..

mais ça ne marchait pas pour moi, peut être que j'ai pas fait de mauvaises recherches ?
Pourquoi utilises-tu 2 versions de jQuery différentes?
Essaie de n'appeler que la plus récente!

Pour ta question : pousse tes recherches encore un peu plus loin et ne néglige pas les sites anglophones Smiley cligne
je pousse ma recherche sur le noconflit,

et j'utilise deux version car j'ai construit ma page html en deux partie a l'aide de 2 tuto différents,
ces 2 parties utilisent chacune une version pour sa propre fonction, et je bloque sur le mariage des deux car si je n'utilise que la version la plus ressente, seulement 1 fonction sur 2 marche sur ma page!!!!


je voudrai en faite faire un fichier jquery qui rempli ces deux fonction en un seul fichier Smiley cligne
ou mettre une fonction qui règle le conflit entre 2 jquery

merci pour vos réponses les amis
A mon avis, le problème ne vient pas du fait que, d'après ce que tu dis, il faille les 2 versions de jQuery pour que ça fonctionne (pour moi, la version la plus récente suffit), mais bien du fait que tu utilises plusieurs librairies utilisant $ dans ta page.
C'est pour cette raison que tu dois résoudre ce problème de jQuery.noConflict(). La solution est là (enfin, selon moi).

Ah oui, j'oubliais de te dire, il va de soi que tu n'appelles qu'une seule fois le script jquery.js (le + récent) Smiley cligne . Il sera mis dans le cache et servira à tous les scripts utilisant jQuery.
Modifié par lddsoft (02 Jul 2011 - 20:10)
tu as raison sur ce point car je les vu plusieurs fois que seul la version la plus ressente était nécessaire et le noconflit était la réponse la plus proche que j'avais trouvé avant d'ouvrir le topic.

mais dans mon cas, lorsque je laisse la fonction la plus ressente, la seconde partie de ma page bloque, car je vire le jquery le plus ancien, donc celui qui servait a ma 2eme partie, c'est pourquoi je ne voulais pas trop le prendre en compte.


en fait, les deux partie de ma page remplissent une fonction unique, et seul le fichier jquery est présent pour ma seconde partie, si je le vire (ligne 1 de mon code), comment la seconde fonction remplira sa tache ?

sachant qu'il ne reste que ces codes pour la seconde fonction dans ma page html :
--------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML><head>

<script type="text/javascript" src="participation/jquery_2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'190px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
</script>
</head>
<body>
<style type="text/css">


*{ padding:0px; margin:0px; }
body{ background:#fff; }
a{ color:#C8DCE5;}
h3{ margin: -0px 0px 0 10px; color:#FFF; font:12pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }

.boxgrid{
width: 180px;
height: 177px;
margin:10px;
float:left;
background:#161613;
border: solid 0px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:regular;
font:9pt "Lucida Grande", Arial, sans-serif;
}

.boxcaption{
float: left;
position: absolute;
background: #000;
margin: -79px 0px 0 0px;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}

h3 a{}
</style>


<div id="participation"><h1>Contributors</h1><hr>



<div class="boxgrid caption">
<img src="participation/2.jpg">
<div style="top: 220px;" class="cover boxcaption">
<h3>Charles</h3>
<p>Art Director
<br><a href="http://www.nonsensesociety.com/2009/03/the-art-of-kamil-smala/" target="_BLANK"><font color = #71d3fa>interview</font></a>
<br><a href="http://www.nonsensesociety.com/2009/03/the-art-of-kamil-smala/" target="_BLANK"><font color = #71d3fa>website</font></a>
</p></div></div>
dsl d'avoir perdu mon combat, j'ai perdu cette bataille mais pas la guerre car j'ai remplacé
la seconde fonction de ma page html qui nécessitait donc le chargement d'un fichier jquery :

http://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm


par celle ci, qui est quasi semblable et qui nécessite seulement quelques lignes css :
http://css-tricks.com/examples/SlideinCaptions/



donc plus de conflit entre les 2 fichiers jquery, et donc topic résolu, merci a tous pour votre aide
kodjoe a écrit :
j'ai perdu cette bataille mais pas la guerre


a) Dommage que tu ne fournisses pas l'intégralité du code de ta page, ou mieux, une adresse en ligne!

b) Le style doit se placer dans le head ou, mieux, dans une feuille de style externe.

c) Comme déjà dit, une fois que tu as appelé un script js, il est dans le cache du navigateur et est disponible pour tout ce qui ferait appel à lui. Il n'est pas bon que plusieurs versions de jQuery se retrouvent ensemble.

d) Comme tu utilises d'autres librairies que jQuery utilisant elles-aussi $, il est nécessaire de faire appel à jQuery.noConflict().

Bien à toi
le style a été placé dans le head, et je suis d'accord avec ton point b) mais je préférai l'avoir sur la même page pour pouvoir travailler dessus deux fois plus vite et avoir moins de fichiers externes Smiley smile


ensuite ok pour le fait d'utiliser plusieurs versions de jquery, mais le noconflit est utilisable que lorsqu'il y a plusieurs version sur une même page, non ?

Si tu veux je peux soit te mettre mon code intégrale de ma page ou ça bloque ou te mettre un lien lorsque je l'a met en ligne ?
kodjoe a écrit :
je suis d'accord avec ton point b) mais je préférai l'avoir sur la même page pour pouvoir travailler dessus deux fois plus vite
Oui, je comprends bien Smiley cligne . Je fais pareil.

kodjoe a écrit :
le noconflit est utilisable que lorsqu'il y a plusieurs version sur une même page, non ?

C'est vrai que dans un de mes messages précédents, je me suis un peu fourvoyé. noConflict permet, je le rappelle, d'éviter des conflits entre des scripts de librairies différentes qui utilisent l'alias $.

kodjoe a écrit :
Si tu veux je peux soit te mettre mon code intégrale de ma page ou ça bloque ou te mettre un lien lorsque je l'a met en ligne ?

L'idéal serait un lien vers la page en ligne, si elle (= la page) n'est pas en PHP.

A+
sure qu'elle (la page) l'est pas (en php) Smiley smile je préfère bosser d'abord sur du html
je met cette page en ligne assez rapidement pour toi...
le site sur lequel je travail est un magazine en ligne sur les artistes de la mode (photographes,mannequins,...) http://www.facticemagazine.com/



pour le moment seule, la solution de facilité est en ligne sur la page en question, voir partie "Ils ont participé à ce numéro" :

http://www.facticemagazine.com/2-magazine/1-numeros/numero03/galerie03.html



contrairement a la page d'accueil ou j'utilise la solution plus compliqué, car dans cette page l'utilisation du jquery ne bloque en rien le fonctionnement du reste de cette même page, voir sections interviews :

http://www.facticemagazine.com/accueil.html




donc comme je le disais la technique est quasi similaire dans les deux pages, la différence qui me gêne un peut, et que dans le premier lien, les prénom n'apparaissent pas directement comme sur le second et c'est vraiment la différence qui m'a fait ouvrir ce topic, en fait je suis, on va dire a 90% du travail final que je recherche. si j'arrive a faire en sorte que l'on voit les prénom directement je suis happy a 100%
Bonjour,
J'ai un peu examiné ta page "galerie03.html" et j'ai constaté que le menu ne fonctionnait pas.
Je me suis alors penché sur ton code, et là HORREUR Smiley lol , j'ai compté pas moins de 4 balises < body . Cette page "sent" le mauvais copier/coller de différentes sources. D'ailleurs, c'est pareil pour les autres pages Smiley confus .
Il faudrait commencer par mettre un peu d'ordre là-dedans et apprendre la structure d'une page html. C'est le début du commencement.
De plus, tu as mis un < !DOCTYPE html>, mais rien dans le reste du code ne montre que tu emploies du html5.

Bon travail!
Modifié par lddsoft (04 Jul 2011 - 09:23)
tu as raison la justification est qu'il y a eu modification sur modification et donc forcement quelques oublies ou erreur lors des copier-coller, non pas de différentes source mais des
anciens designs que comprenait ce site web... je penses qu'on doit être au changement numéro 5



le < !DOCTYPE html>
les balises body
certaines lignes dans le <style css> ne servent a rien
et le sur-chargement de la page est a traiter lorsque j'aurai du temps.



je pense refaire totalement les pages et passer a une fonction include du menu et contour car il reviens sur toutes les pages et ça évitera un sur chargement inutile des pages, je m'y perdrai moins facilement
Sujet clos
Aller à