Conflit entre plusieurs codes js jquery (résolu)

Question

lyon

20 Jun 2010 à 14:18

Bonjour,

j'ai plusieurs code javascript dans ma page et quand j'en deplace un, les autres ne fonctionne plus, alors je pense qu'il faut les placer d'une certaine façon mais je ne sais pas comment.
quelqu'un peut-il m'aider a les mettre dans l'ordre pour qu'il fonctionne tous.
merci


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Studio RD</title>
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>
<script type="text/javascript"  src="scripts/jquery.js"></script>
<script type="text/javascript"  src="scripts/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
	$('#gal1 a').lightBox(); 
    $('#gal2 a').lightBox(); 
    $('#gal3 a').lightBox(); 

});</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-latest.js"></script>
<script language="JavaScript" src="scripts/index.js" type="text/javascript"></script>
<style type="text/css">
/*<![CDATA[*/ #topcontrol {
	opacity: 3;
	z-index: 9000;
} /*]]>*/
</style>
<script type="text/javascript">
		$('div#footerBt').click(
		function() {
			$('#footerContent').animate({"marginBottom": "-=45px"}, "slow");
			$(this).animate({"marginBottom": "-=45px"}, "slow").animate({"marginBottom": "+=5px"}, "fast");
			$('#fotplug').hide('slow');
		});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.contactable.js"></script>

<link rel="stylesheet" href="css/contactable.css" type="text/css" />
<style type="text/css">
#content {
	background-color:#FDFDFD;
	border-left:2px solid #333333;
	border-right:2px solid #333333;
	margin:0 auto 0;
	padding:10px;
	position:relative;
	width:930px;
	height:100%;
}
</style>
<script>
	$(function(){
		$('#contact').contactable({
	 		subject: 'A Feeback Message'
	 	});
	});
</script>
<link href="css/style1.css" rel="stylesheet" type="text/css" />

</head>

Modifié par lyon (29 Jun 2010 - 13:47)

jo_link_noir

20 Jun 2010 à 18:28

Salut

Rien qu'à la première ligne de java-script il y une erreur : $ n'existe pas encore mais tu l'utilise quand même.
Et tu mes 3 fois jquery :

...
<script type="text/javascript" src="scripts/jquery.js"></script>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...

Super_baloo8

21 Jun 2010 à 13:58

Salut !

Il faut penser à utiliser le validateur html de temps en temps ! Ca aide bien !!!

Sinon, ton code, penses à mettre en premier les liens CSS puis en ensuite les liens JS (c'est plus propre pour le téléchargement des scripts !

Ensuite, évite d'inclure trop de script, et surtout dans n'importe quel ordre et pas non plus 20 fois le même script ! (Comme Jo_Link_Noir te l'a indiqué !)

Pour tes fonctions Jquery, il faut toujours les faire éxecuter après le chargement de la DOM.

Ce bout de code devrait aller mieux !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Studio RD</title>

	<link href="css/style1.css" rel="stylesheet" type="text/css" />
	<link href="css/contactable.css" rel="stylesheet" type="text/css" />
	<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css"/>
	<style type="text/css">
	#content {
	background-color:#FDFDFD;
	border-left:2px solid #333333;
	border-right:2px solid #333333;
	margin:0 auto 0;
	padding:10px;
	position:relative;
	width:930px;
	height:100%;
	}
	</style>

	<script type="text/javascript" src="scripts/jquery.js"></script>
	<script type="text/javascript" src="scripts/index.js" ></script>
	<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
	<script type="text/javascript" src="scripts/jquery.validate.pack.js"></script>
	<script type="text/javascript" src="scripts/jquery.contactable.js"></script>

	<script type="text/javascript">
		//<![CDATA[
		$(document).ready(function($){
			$.noConflict();

			$('#gal1 a').lightBox();
			$('#gal2 a').lightBox();
			$('#gal3 a').lightBox();

			$('div#footerBt').click(function() {
				$('#footerContent').animate({"marginBottom": "-=45px"}, "slow");
				$(this).animate({"marginBottom": "-=45px"}, "slow").animate({"marginBottom": "+=5px"}, "fast");
				$('#fotplug').hide('slow');
			});
			
			$('#contact').contactable({
				subject: 'A Feeback Message'
			});

		});
		//]]>
	</script>

</head>

Modifié par Super_baloo8 (21 Jun 2010 - 14:00)

lyon

21 Jun 2010 à 16:24

salut a tous

super balou merci pour ton aide
j'ai suivi tes instructions par contre il y en a un qui ne fonctionne pas car il manque ce bout que je en sais pas ou placé du coup


<style type="text/css">
/*<![CDATA[*/ #topcontrol {
	opacity: 3;
	z-index: 9000;
} /*]]>*/
</style>

voici le code que tu ma conseillé


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Studio RDDesign</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link href="css/contactable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
#content {
	background-color:#FDFDFD;
	border-left:2px solid #333333;
	border-right:2px solid #333333;
	margin:0 auto 0;
	padding:10px;
	position:relative;
	width:930px;
	height:100%;
}
</style>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/index.js" ></script>
<script type="text/javascript" src="scripts/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.contactable.js"></script>
<script type="text/javascript">         
//<![CDATA[         
		   $(document).ready(function($){             
		   $.noConflict();              
		   $('#gal1 a').lightBox();             
		   $('#gal2 a').lightBox();             
		   $('#gal3 a').lightBox();              
		   
		   $('div#footerBt').click(function() {                 
		   $('#footerContent').animate({"marginBottom": "-=45px"}, "slow");                 
		   $(this).animate({"marginBottom": "-=45px"}, "slow").animate({"marginBottom": "+=5px"}, "fast");                 
		   $('#fotplug').hide('slow');             
		   });                          
		   
		   $('#contact').contactable({                 
		    subject: 'A Feeback Message'             
									 
			});          
		   });         
		   
		   //]]>     
           
           </script>
           
</head>

Modifié par 6l20 (29 Jun 2010 - 13:32)

Super_baloo8

21 Jun 2010 à 16:50

Je ne vais pas tout te faire, ça ne serait pas te rendre service !

D'après toi, où est-ce que tu peux mettre ce bout de code ? C'est quel langage ?

lyon

21 Jun 2010 à 17:03

hihi

tu pense bien que j'y ai pensé de la mettre avec le reste du css puisque c'est de ça qu'il s'agit mais cela ne fonctionne pas c'est pour ca que je pose la question!
Smiley langue

Super_baloo8

23 Jun 2010 à 11:35

Un lien vers ta page sera plus simple pour t'aider alors que ce simple bout de code Smiley cligne

(C'est un autre problème)

lyon

28 Jun 2010 à 13:50

salut

le site n'est pas encore en ligne !!

qq a une idée ??
merci

lyon

28 Jun 2010 à 18:13

quelqu'un peut il m'aider avec le code jquery

il y a donc plusieurs code et un ne fonctionne pas il s'agit d'une fleche scroll to top

qui a une idée ?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8" />
<title>Studio Design</title>
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/contactable.css" type="text/css" />
<style type="text/css">
#content {
	background-color:#FDFDFD;
	border-left:2px solid #333333;
	border-right:2px solid #333333;
	margin:0 auto 0;
	padding:10px;
	position:relative;
	width:930px;
	height:100%;
}
</style>
<style type="text/css">
/*<![CDATA[*/ #topcontrol {
	opacity: 3;
	z-index: 9000;
} /*]]>*/
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-latest.js"></script>

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/index.js" ></script>
<script type="text/javascript" src="scripts/jquery.validate.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.contactable.js"></script>
<script type="text/javascript">         
//<![CDATA[         
		   $(document).ready(function($){             
		$.noConflict(); 
		
		$('#contact').contactable({                 
		subject: 'A Feeback Message'             
		});
				
		$('div#footerBt').click(function() {                 
		$('#footerContent').animate({"marginBottom": "-=45px"}, "slow");                 
		$(this).animate({"marginBottom": "-=45px"}, "slow").animate({"marginBottom": "+=5px"}, "fast");                 
		$('#fotplug').hide('slow');             
		}); 
		
		
		$('.boxgrid.captionfull').hover(function(){
		$(".cover", this).stop().animate({bottom:'0px'},{queue:false,duration:350});
		}, function() {
		$(".cover", this).stop().animate({bottom:'-60px'},{queue:false,duration:600});
		});

		});        
		   //]]>    
</script>
</head>
<body>
<div id="contact"> </div>

<!--footer start -->
<div id="footer-main">
  <div id="footer">
    <div class="footer_bloc">
      <ul>
        <li class="titre_bloc_foot">Site</li>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
      </ul>
    </div>
    <div class="footer_bloc">
      <ul>
        <li class="titre_bloc_foot">Nos packs &amp; services</li>
        <li><a href="#">Pack com</a></li>
        <li><a href="#">Pack exposition</a></li>
        <li><a href="#">Pack pr&eacute;mium</a></li>
        <li><a href="#">Services &agrave; la carte</a></li>
      </ul>
    </div>
    <div class="footer_bloc">
      <ul>
        <li class="titre_bloc_foot">Infos</li>
        <li><a href="#">Mentions &eacute;gales</a></li>
        <li><a href="#">Plan du site</a></li>
      </ul>
    </div>
    <div class="footer_bloc">
      <ul>
        <li class="titre_bloc_foot">Suivez-nous</li>
        <li class="ico_resaux" title="suivez-nous sur facebook"><a href="#" class="decalage_reseaux"> Facebook</a></li>
        <li class="ico_twitt" title="suivez-nous sur twitter"><a href="#"  class="decalage_twitt">Twitter</a></li>
      </ul>
    </div>
    <div class="footer_bloc">
      <p class="copyright">&copy;Design</p>
    </div>
  </div>
</div>
<!--footer end -->
<script language="JavaScript" src="scripts/scroll.js" type="text/javascript"></script>
</body>
</html>

Je pense qu'il y a une sens ou peut etre manque t-il quelque chose?
merci les amis
Modifié par 6l20 (29 Jun 2010 - 13:33)

Super_baloo8

29 Jun 2010 à 12:51

Salut !

Utilises les balises de code stp !!! ([code ] [/code ])

Sinon, dans ton code :
- Tu inclus plusieurs fois le script Jquery !!! Une seule et unique fois suffit
- Tant que tu ne maitrise pas l'inclusion de script, met tout au même endroit (genre scroll.js qui se trouve tout seul en bas de ton code)
- Pour les CSS, met tout au même endroit
- Indente ton code html pour t'y retrouver !
- Dans ton code javascript animate, je crois que le "-=45px" ne doit pas vraiment fonctionner.

Pour débugger ta page, essayes d'utiliser les outils qui vont bien, du style "http://validator.w3.org" pour valider ton code source, puis utilise Firebug (extension firefox) pour avoir la console d'erreur qui t'indiquera les erreurs javascript si il y en a !)

Sinon, pour ton code remanier :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link href="css/style1.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" href="css/contactable.css" type="text/css" />

	<style type="text/css">
		#content { background-color:#FDFDFD; border-left:2px solid #333333;	border-right:2px solid #333333;	margin:0 auto 0; padding:10px; position:relative; width:930px; height:100%; }
		#topcontrol { opacity: 3; z-index: 9000; }
	</style>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script type="text/javascript" src="scripts/index.js" ></script>
	<script type="text/javascript" src="scripts/jquery.validate.pack.js"></script>
	<script type="text/javascript" src="scripts/jquery.contactable.js"></script>
	<script type="text/javascript" src="scripts/scroll.js"></script>

	<script type="text/javascript">
	//<![CDATA[
	$(document).ready(function($){
		$.noConflict();

		$('#contact').contactable({
		subject: 'A Feeback Message'
		});

		$('div#footerBt').click(function() {
		$('#footerContent').animate({"marginBottom": "-45px"}, "slow");
		$(this).animate({"marginBottom": "-45px"}, "slow").animate({"marginBottom": "+5px"}, "fast");
		$('#fotplug').hide('slow');
		});

		$('.boxgrid.captionfull').hover(function(){
		$(".cover", this).stop().animate({bottom:'0px'},{queue:false,duration:350});
		}, function() {
		$(".cover", this).stop().animate({bottom:'-60px'},{queue:false,duration:600});
		});

	});
	//]]>
	</script>

	<title>Studio Design</title>
</head>

<body>
	<div id="contact">

	</div>

	<!--footer start -->
	<div id="footer-main">
		<div id="footer">
			<div class="footer_bloc">
				<ul>
					<li class="titre_bloc_foot">Site</li>
					<li><a href="#">Accueil</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Portfolio</a></li>
				</ul>
			</div>
			<div class="footer_bloc">
				<ul>
					<li class="titre_bloc_foot">Nos packs &amp; services</li>
					<li><a href="#">Pack com</a></li>
					<li><a href="#">Pack exposition</a></li>
					<li><a href="#">Pack pr&eacute;mium</a></li>
					<li><a href="#">Services &agrave; la carte</a></li>
				</ul>
			</div>
			<div class="footer_bloc">
				<ul>
					<li class="titre_bloc_foot">Infos</li>
					<li><a href="#">Mentions &eacute;gales</a></li>
					<li><a href="#">Plan du site</a></li>
				</ul>
			</div>
			<div class="footer_bloc">
				<ul>
					<li class="titre_bloc_foot">Suivez-nous</li>
					<li class="ico_resaux" title="suivez-nous sur facebook"><a href="#" class="decalage_reseaux"> Facebook</a></li>
					<li class="ico_twitt" title="suivez-nous sur twitter"><a href="#" class="decalage_twitt">Twitter</a></li>
				</ul>
			</div>
			<div class="footer_bloc">
				<p class="copyright">&copy;Design</p>
			</div>
		</div>
	</div>
	<!--footer end -->
</body>
</html>

N'hésites pas à relire ta discussion du début, car des erreurs enlever au début sont réapparus maintenant Smiley fache

Un autre conseil, supprime tout ton javascript pour voir si ta page s'affiche correctement, et si oui, alors commence à rajouter petit à petit ton code javascript, comme ça tu verras où ça peut coincer !

Même chose pour débugger du CSS qui ne marche pas, d'ailleurs, on ne peut pas mettre opacity 3 il me semble, c'est soit 1 soit inférieur à 1 (0.5 etc ...).
Modifié par Super_baloo8 (29 Jun 2010 - 12:55)

lyon

29 Jun 2010 à 13:27

Salut a tous

merci super_baloo8 ça fonctionne.
c'est bizarre parce que j'utilise les balises code Smiley ohwell

mais elles s'affichent pas !!

bon sinon moi entre temps j'avais réussi a faire fonctionner le truc mais il n'affichais pas l'image malgré que le chemin était bon ! c'est bizarre. Smiley confus

donc j'ai mis ton code et tout est ok. merci encore.

ca m'erite un apéro cette affaire! Smiley lol

6l20

29 Jun 2010 à 13:45

Bonjour,

Les balises de code fonctionnent plutôt bien, encore faut-il prendre le temps de les "apprivoiser" :

la mise en forme a écrit :

[ code=html] ici ton code (x)html...[/code]
[ code=js] ici ton code JavaScript...[/code]
etc...
(Sans espace dans le premier crochet ouvrant la balise code !)

Merci également de ne pas poster en doublon tes interventions Smiley cligne

Et enfin, merci de rajouter le tag [résolu] dans le titre de ton sujet (en éditant ton premier post) si tu considères que ta problématique a trouvé sa solution.

Bonne continuation,
Cdt,
Sylvain

Dio

22 Jul 2010 à 14:53

Bonjour,
J'ai un petit souci je n'arrive pas a faire fonctionner cette balise "jQuery.noConflict();" pour réparer le conflit jquery. Je suis sur joomla je c'est pas si le problème peux venir de là.
Pourriez vous m'aider. Voici mes liens de code :

<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/jQuery.js"></script>
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/captify.tiny.js"></script>
<script type="text/javascript">
$(function(){
$('img.captify').captify({
// all of these options are... optional
// ---
// speed of the mouseover effect
speedOver: 'fast',
// speed of the mouseout effect
speedOut: 'normal',
// how long to delay the hiding of the caption after mouseout (ms)
hideDelay: 500,
// 'fade', 'slide', 'always-on'
animation: 'fade',
// text/html to be placed at the beginning of every caption
prefix: '',
// opacity of the caption on mouse over
opacity: '0.7',
// the name of the CSS class to apply to the caption box
className: 'caption-bottom',
// position of the caption (top or bottom)
position: 'bottom',
// caption span % of the image
spanWidth: '100%'
});
});
</script>

</head>

Je Vous remercie.

Heyoan

23 Jul 2010 à 09:49

Dio,

merci de créer ton propre sujet... et de mettre en forme ton code.

Sujet clos

JavaScript, DOM et API Web HTML5

Conflit entre plusieurs codes js jquery (résolu)