11548 sujets

JavaScript, DOM et API Web HTML5

Conflit entre 2 jquery

Bonjour,
j'essaye de me créer un portfolio des plus simple
pour la navigation j'utilise un menu accordéon Jquery à 3 niveaux
et pour mes visuels un diaporama Jquery.

Mon accordéon et mon diaporama dissociés fonctionne parfaitement,
mais avec les deux ensemble ne fonctionne plus,
puis j'ai réussi a faire fonctionner le diaporama
mais le menu lui ne fonctionne toujours pas Smiley decu

voici mon code html :

<!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" xml:lang="fr" lang="fr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aurélina</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#diaporama')
.before('<div id="chiffre">')
.cycle({
fx: 'fade',
speed: 'fast',
timeout: 10000 ,
pager: '#chiffre'
});
});
</script>


<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// applying the settings
jQuery('#theMenu').Accordion({
active: 'h3.selected',
header: 'h3.head',
alwaysOpen: false,
animated: true,
showSpeed: 400,
hideSpeed: 800
});
jQuery('#xtraMenu').Accordion({
active: 'h4.selected',
header: 'h4.head',
alwaysOpen: false,
animated: true,
showSpeed: 400,
hideSpeed: 800
});
jQuery('#xtraMenu').Accordion({
active: 'h6.selected',
header: 'h6.head',
alwaysOpen: false,
animated: true,
showSpeed: 400,
hideSpeed: 800
});
});
</script>
</head>

<body oncontextmenu="return false">
<div id="globale">

<div class="logo"><a href="portfolio.html"><img src="logo/Logo.png"/></a></div><!--fin div logo-->

<div class="visuel">
<div id="diaporama">
<img src="images/marseille/mars1.png" width="750" height="484" />
<img src="images/marseille/mars2.png" width="750" height="484" />
<img src="images/marseille/mars3.png" width="750" height="484" />
<img src="images/marseille/mars4.png" width="750" height="484" />
</div><!--fin div diaporama-->
</div><!--fin div visuel-->


<ul id="theMenu">
<li>
<h3 class="head"><a href="#;">PORTFOLIO</a></h3>
<ul style="display: none;">
<li>
<ul id="xtraMenu">
<li>
<h4 class="head"><a href="#">Edition</a></h4>
<ul style="display: none;">
<li><h6 class="head"><a href="#">Magazine Maki Sushi</a></h6></li>
<li><h6 class="head"><a href="#">Edition Galimard</a></h6></li>
<li><h6 class="head"><a href="#">Edition Girard</a></h6></li>
</ul>
</li>

<li>
<h4 class="head"><a href="#">Culture</a></h4>
<ul style="display: none;">
<li><h6 class="head"><a href="#">Content 2 2 1</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 2</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 3</a></h6></li>
</ul>
</li>

<li>
<h4 class="head"><a href="#">Social</a></h4>
<ul style="display: none;">
<li><h6 class="head"><a href="#">Content 2 2 1</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 2</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 3</a></h6></li>
</ul>
</li>

<li>
<h4 class="head"><a href="#">Environement</a></h4>
<ul style="display: none;">
<li><h6 class="head"><a href="#">Content 2 2 1</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 2</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 3</a></h6></li>
</ul>
</li>

<li>
<h4 class="head"><a href="#">Divers</a></h4>
<ul style="display: none;">
<li><h6 class="head"><a href="#">Content 2 2 1</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 2</a></h6></li>
<li><h6 class="head"><a href="#">Content 2 2 3</a></h6></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>

<li>
<h3 class="head"><a href="#">PARCOURS</a></h3>
<ul style="display: none;">
<li>
<ul id="xtraMenu">
<li>
<h4 class="head"><a href="#">CV PDF</a></h4>
</li>
</ul>
</ul>
</li>

<li>
<h3 class="head"><a href="#">CONTACT</a></h3>
<ul style="display: none;">
<li>
<ul id="xtraMenu">
<li>
<h4 class="head"><a href="#">Contact</a></h4>
</li>
</ul>
</ul>
</li>


<div class="titre">2011 Affiches</div><!--fin div titre-->
<div class="texte">Association pour faciliter l'insertion professionnelle des jeunes diplômés</div><!--fin div texte-->
</div><!--fin div globale-->
<div class="foot"></div>
</body>
</html>


voici mon code js :

jQuery.fn.extend({
// nextUntil is necessary, would be nice to have this in jQuery core
nextUntil: function(expr) {
var match = [];

// We need to figure out which elements to push onto the array
this.each(function(){
// Traverse through the sibling nodes
for( var i = this.nextSibling; i; i = i.nextSibling ) {
// Make sure that we're only dealing with elements
if ( i.nodeType != 1 ) continue;

// If we find a match then we need to stop
if ( jQuery.filter( expr, ).r.length ) break;

// Otherwise, add it on to the stack
match.push( i );
}
});

return this.pushStack( match );
},
// the plugin method itself
Accordion: function(settings) {
// setup configuration
settings = jQuery.extend({}, jQuery.Accordion.defaults, {
// define context defaults
header: jQuery(':first-child', this)[0].tagName // take first childs tagName as header
}, settings);

// calculate active if not specified, using the first header
var container = this,
active = settings.active
? jQuery(settings.active, this)
: settings.active === false
? jQuery("<div>")
: jQuery(settings.header, this).eq(0),
running = 0;

container.find(settings.header)
.not(active || "")
.nextUntil(settings.header)
.hide();
active.addClass(settings.selectedClass);

function clickHandler(event) {
// get the click target
var clicked = jQuery(event.target);

// due to the event delegation model, we have to check if one
// of the parent elements is our actual header, and find that
if ( clicked.parents(settings.header).length ) {
while ( !clicked.is(settings.header) ) {
clicked = clicked.parent();
}
}

var clickedActive = clicked[0] == active[0];

// if animations are still active, or the active header is the target, ignore click
if(running || (settings.alwaysOpen && clickedActive) || !clicked.is(settings.header))
return;

// switch classes
active.toggleClass(settings.selectedClass);
if ( !clickedActive ) {
clicked.addClass(settings.selectedClass);
}

// find elements to show and hide
var toShow = clicked.nextUntil(settings.header),
toHide = active.nextUntil(settings.header),
data = [clicked, active, toShow, toHide];
active = clickedActive ? jQuery([]) : clicked;
// count elements to animate
running = toHide.size() + toShow.size();
var finished = function(cancel) {
running = cancel ? 0 : --running;
if ( running )
return;

// trigger custom change event
container.trigger("change", data);
};
// TODO if hideSpeed is set to zero, animations are crappy
// workaround: use hide instead
// solution: animate should check for speed of 0 and do something about it
if ( settings.animated ) {
if ( !settings.alwaysOpen && clickedActive ) {
toShow.slideToggle(settings.showSpeed);
finished(true);
} else {
toHide.filter(":hidden").each(finished).end().filter(":visible").slideUp(settings.hideSpeed, finished);
toShow.slideDown(settings.showSpeed, finished);
}
} else {
if ( !settings.alwaysOpen && clickedActive ) {
toShow.toggle();
} else {
toHide.hide();
toShow.show();
}
finished(true);
}

return false;
};
function activateHandlder(event, index) {
// call clickHandler with custom event
clickHandler({
target: jQuery(settings.header, this) Smiley index
});
};

return container
.bind(settings.event, clickHandler)
.bind("activate", activateHandlder);
},
// programmatic triggering
activate: function(index) {
return this.trigger('activate', [index || 0]);
}
});

jQuery.Accordion = {};
jQuery.extend(jQuery.Accordion, {
defaults: {
selectedClass: "selected",
showSpeed: 'slow',
hideSpeed: 'fast',
alwaysOpen: true,
animated: true,
event: "click"
},
setDefaults: function(settings) {
jQuery.extend(jQuery.Accordion.defaults, settings);
}
});

Merci d'avance pour votre aide
je m'arrache les cheveux Smiley biggol
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à