11567 sujets

JavaScript, DOM et API Web HTML5

Imcompatibilite j query

Bonjour a tous

J utilise 2 fichiers j query sur la meme page et ca me pose probleme

Il faut utiliser la fonction noconflit mais je ne comprend pas comment l utiliser
Il faut aussi mettre les js dans un certains ordre ce que j ai fait

Merci de votre aide

mon exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Feature List | Demo page</title>
	<link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>
    <script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
	
		[code=css] h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;

}

div#feature_list {
width: 750px;
height: 240px;
overflow: hidden;
position: relative;
}

div#feature_list ul {
position: absolute;
top: 0;
list-style: none;
padding: 0;
margin: 0;
}

ul#tabs {
left: 0;
z-index: 2;
width: 320px;
}

ul#tabs li {
font-size: 12px;
font-family: Arial;
}

ul#tabs li img {
padding: 5px;
border: none;
float: left;
margin: 10px 10px 0 0;
}

ul#tabs li a {
color: #222;
text-decoration: none;
display: block;
padding: 10px;
height: 60px;
outline: none;
}

ul#tabs li a:hover {
text-decoration: underline;
}

ul#tabs li a.current {
background: url('feature-tab-current.png');
color: #FFF;
}

ul#tabs li a.current:hover {
text-decoration: none;
cursor: default;
}

ul#output {
right: 0;
width: 463px;
height: 240px;
position: relative;
}

ul#output li {
position: absolute;
width: 463px;
height: 240px;
}

ul#output li a {
position: absolute;
bottom: 10px;
right: 10px;
padding: 8px 12px;
text-decoration: none;
font-size: 11px;
color: #FFF;
background: #000;
-moz-border-radius: 5px;
}

ul#output li a:hover {
background: #D33431;
}
[/code]
</style>

<script language="javascript">
$(document).ready(function() {

$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 1
}
);

/*

// Alternative


$('#tabs li a').featureList({
output : '#output li',
start_item : 1
});

*/

});
</script>
</head>
<body>
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
</div>
</div>
<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);

</script>
<!-- /debut slider -->
<div id="content">
<h1>Feature List</h1>

<p>This is a demo page. You can view the supporting article <a href="http://jqueryglobe.com/article/feature-list">here</a></p>

<hr />
<!-- /debut slider -->
<div id="feature_list">
<ul id="tabs">
<li>
<a href="javascript:;">
<img src="services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="programming.png" />
<h3>Programming</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="applications.png" />
<h3>Applications</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>
</li>
</ul>
<ul id="output">
<li>
<img src="sample1.jpg" />
<a href="#">See project details</a>
</li>
<li>
<img src="sample2.jpg" />
<a href="#">See project details</a>
</li>
<li>
<img src="sample3.jpg" />
<a href="#">See project details</a>
</li>
</ul>

</div>
<!-- /fin slider -->
</body>
</html>
Modifié par audi68 (20 Mar 2011 - 10:36)
Modérateur
Et l'eau,

Si tes deux/trois fichiers utilisent la même bibliothèque, Jquery en l'occurence, il n'est pas nécessaire d'utiliser la méthode noConflict. Par contre, admettons que tu utilises motools et jQuery dans la même page, alors il va falloir utiliser le no conflict.

Pour ce faire (code fait de tête -> si je fais une erreur, désolé) :

<!-- exemple avec l'html -->
<p class="colorer">du texte dans un paragraphe</p>



var $j = jQuery.noConflict();

$j('.colorer').css('color','red');

Modifié par niuxe (20 Mar 2011 - 01:52)
Merci de ta reponse

Oui je me disais bien que le noconflit est pour des bibliotheque externe

Par contre ton code que tu viens de me donner je ne le comprends pas

pourraistu me donner plus de details

Merci pour ton aide
salut

avec un doctype strict

<script language="javascript">


n'est pas valide

<script type="text/javascript">


là c'est bon, d'ailleurs plus bas c'est correct. Attention au bête c/c. De plus, tes liens

<a href="javascript:;">


çà, c'est forcement un problème... Quant aux balises img, si tu veux te rendre service, code les correctement. Smiley cligne Pour les styles, ils doivent toujours apparaitres avant les js quand jquery doit les utiliser, ce n'est pas le cas ici, pour la deuxième partie. Et si je peux me permettre une appréciation toute personnelle.


<a href="javascript:;">
<img src="services.png" />
<h3>Services</h3>
<span>Lorem ipsum dolor sit amet consect</span>
</a>


Il existe de très nombreux plugins qui font la même chose mais de façon moins barbare...hou que c'est laid.


bref! c'est quoi le problème a part tout çà. Et ce n'est pas dù au noConflict comme dit plus haut.
Modérateur
audi68 a écrit :
Merci de ta reponse

Oui je me disais bien que le noconflit est pour des bibliotheque externe

Par contre ton code que tu viens de me donner je ne le comprends pas

pourraistu me donner plus de details

Merci pour ton aide



En soit ce n'est pas difficile de comprendre le code :

var $j = jQuery.noConflict();

La variable $j est affectée à la bibliothèque jQuery


$j('.colorer').css('color','red');


jQuery va chercher la classe '.colorer' dans le DOM et affecte le texte en rouge par la méthode css.

A noter que j'ai préféré rééditer mon message précédent afin que tu ais également une belle ligne HTML.

En effet, le 'javascript:;' c'est pas propre. Autant mettre un '#' et agir autour de lui/eux.
(code fait de tête)

$('a').each(function(){
	var obj = $(this);
	if(obj.attr('href') == '#'){
		obj.live('click',function(e){
			e.preventDefault();
		});
	}
});


Le return false c'est pas mal non plus.

++

ps : peux tu rééditer stp ton message afin qu'il n'y ait pas ce problème de mise en page. Ainsi tu donneras à ton lecteur plus de facilité à comprendre ton souci.
Modifié par niuxe (20 Mar 2011 - 02:22)
Merci de votre reponse je viens de reposter mon exmple désolé mais je n arrivais a pas le modifier

Merci pour vos reponse j ai modifier 
language="javascript"

mais ca ne fonctionne toujours pas

j ai chercher longtemps pour trouver ce genre d exemple mais je n es pas trouver en jquery
avez vous des exmples?

merci pour votre aide

mon exemple

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Feature List | Demo page</title>
	<link rel="stylesheet" href="style.css" />
    <script language="javascript" src="js/jquery.js"></script>
	<script language="javascript" src="jquery.featureList-1.0.0.js"></script>
    <script language="javascript" src="js/interface.js"></script>]
<script language="javascript">
		$(document).ready(function() {

			$.featureList(
				$("#tabs li a"),
				$("#output li"), {
					start_item	:	1
				}
			);

			/*
			
			// Alternative

			
			$('#tabs li a').featureList({
				output			:	'#output li',
				start_item		:	1
			});

			*/

		});
	</script>


</head>
<body>
<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> 
  <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> 
  <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
  <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> 
  <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> 
  <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> 
  <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a> 
</div>
</div>

<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
		}
	);

</script>
<!--  /debut slider -->
	<div id="content">
		<h1>Feature List</h1>

		<p>This is a demo page. You can view the supporting article <a href="http://jqueryglobe.com/article/feature-list">here</a></p>

		<hr />
<!--  /debut slider -->
		<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="services.png" />
						<h3>Services</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="programming.png" />
						<h3>Programming</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="applications.png" />
						<h3>Applications</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="sample1.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample2.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample3.jpg" />
					<a href="#">See project details</a>
				</li>
			</ul>

		</div>
    <!--  /fin slider -->
</body>
</html>

Modifié par audi68 (20 Mar 2011 - 10:48)
Bonjour,

J'en reviens à poser toujours la même question de départ :
Es-tu certain des chemins de tes scripts js, et en particulier de la relation du fichier "jquery.featureList-1.0.0.js" par rapport à "js/jquery.js"?
Salut

J'ai testé les deux plugins ensemble et il se trouve que la version de jquery nécessaire au slide est celle utilisée par le script de slide, au dessus, avec 1.4.4 ou +, un bug apparait au déclenchement du slide. Avec 1.3 çà passe pour les deux. Donc, à moins de modifier le plugin pour mettre à jour pour les versions supérieures, passage d'attributs à revoir. utlise la version 1.3 et pas au dessus. Ci- dessous le code testé.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>     
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
<meta http-equiv="imagetoolbar" content="no" />     
<title>Feature List | Demo page</title>     
<link rel="stylesheet" href="style.css" />
	<style type="text/css">
		.fisheye{
	text-align: center;
	height: 50px;
	position: relative;
}
a.fisheyeItem
{
	text-align: center;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	width: 40px;
	position: absolute;
	display: block;
	top: 0;
}
a.fisheyeItem2
{
	text-align: center;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	width: 40px;
	position: absolute;
	display: block;
	bottom: 0;
}
.fisheyeItem img
{
	border: none;
	margin: 0 auto 5px auto;
	width: 100%;
}
.fisheyeItem2 img
{
	border: none;
	margin: 5px auto 0 auto;
	width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
	display: none;
	positon: absolute;
}
.fisheyeContainter
{
	background-color: #f00;
	height: 50px;
	width: 200px;
	left: 500px;
	position: absolute;
}
#fisheye2
{
	position: absolute;
	width: 100%;
	bottom: 0px;
}

		h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;
		}

		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#tabs {
			left: 0;
			z-index: 2;
			width: 320px;
		}

		ul#tabs li {
			font-size: 12px;
			font-family: Arial;
		}
		
		ul#tabs li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#tabs li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#tabs li a:hover {
			text-decoration: underline;
		}

		ul#tabs li a.current {
			background:  url('feature-tab-current.png');
			color: #FFF;
		}

		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 463px;
			height: 240px;
		}

		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		
		ul#output li a:hover {
			background: #D33431;
		}
	</style>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="interface.js"></script>
<!--<script type="text/javascript" src="source/fisheye.js"></script>-->     
<script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>     
<script type="text/javascript">          
$(document).ready(function() {             
$('#fisheye').Fisheye({                     
maxWidth: 50,                     
items: 'a',                     
itemsText: 'span',                     
container: '.fisheyeContainter',                     
itemWidth: 40,                     
proximity: 90,                     
halign : 'center'                 
});

$.featureList(                 
$("#tabs li a"),                 
$("#output li"), {                     
start_item: 1                 
});         
});      
</script>
</head> 
<body> 
<div id="fisheye" class="fisheye">   
<div class="fisheyeContainter">   
<a class="fisheyeItem" href="#"><img src="home.png" alt="home" /><span>Home</span></a>    
<a class="fisheyeItem" href="#"><img src="email.png" alt="contact" /><span>Contact</span></a>    
<a class="fisheyeItem" href="#"><img src="portfolio.png" alt="portfolio" /><span>Portfolio</span></a>    
<a class="fisheyeItem" href="#"><img src="music.png" alt="music" /><span>Music</span></a>    
<a class="fisheyeItem" href="#"><img src="videos.png" alt="video" /><span>Video</span></a>    
<a class="fisheyeItem" href="#"><img src="rss.png" alt="rss" /><span>RSS</span></a>  
</div> 
</div>   
<!--  /debut slider -->     
<div id="content">         
<h1>Feature List</h1>          
<p>This is a demo page. You can view the supporting article <a href="http://jqueryglobe.com/article/feature-list">here</a></p>          
<hr /> <!--  /debut slider -->         
<div id="feature_list">             
<ul id="tabs">                 
<li>                     
<a href="">                         
<img src="services.png" />                         
<h3>Services</h3>                         
<span>Lorem ipsum dolor sit amet consect</span>                     
</a>                 
</li>                 
<li>                     
<a href="">                         
<img src="programming.png" />                         
<h3>Programming</h3>                         
<span>Lorem ipsum dolor sit amet consect</span>                     
</a>                 
</li>                 
<li>                     
<a href="">                         
<img src="applications.png" />                         
<h3>Applications</h3>                         
<span>Lorem ipsum dolor sit amet consect</span>                     
</a>                 
</li>             
</ul>             
<ul id="output">                 
<li>                     
<img src="sample1.jpg" />                     
<a href="#">See project details</a>                 
</li>                 
<li>                     
<img src="sample2.jpg" />                     
<a href="#">See project details</a>                 
</li>                 
<li>                     
<img src="sample3.jpg" />                     
<a href="#">See project details</a>                 
</li>             
</ul>          
</div>
</div>
<!--  /fin slider --> 
</body> 
</html>
Modérateur
ralaala, je n'avais pas vu cette belle erreur html. Disons que je pars du principe que si tu viens ici, c'est que tu as au moins de bonnes connaissances en html/css.

brûler les étapes n'a jamais fait quelque chose de durable.
Modifié par niuxe (21 Mar 2011 - 01:59)
merci de vos reponse

Quelle belle erreur HTML?

j'ai des connaissance en html et php

je suis entrain d apprendre le java

merci de votre aide
Modérateur
audi68 a écrit :
merci de vos reponse

Quelle belle erreur HTML?


Keran a mis en exergue une grossière erreur qui apparemment ne l'a même pas relevée

Un élément de rendu en ligne ne peut avoir pas comme enfant un élément de rendu bloc (Du moins dans ce cas de figure).

Egalement, je t'invite à valider ton code.
Modifié par niuxe (21 Mar 2011 - 22:02)
a écrit :
Keran a mis en exergue une grossière erreur qui apparemment ne l'a même pas relevée


Mais heureusement ton oeil sagace est passé par là Smiley lol

En tout cas le code que j'ai posté fonctionne. Pas chez vous? mais peut être que vous ne l'avez pas testé.

a écrit :
Egalement, je t'invite à valider ton code.


çà c'est cruel Smiley cligne
Sujet clos
Aller à