11548 sujets

JavaScript, DOM et API Web HTML5

Conflit javascript

Bjr,
Je cherche a reparer un conflit de javascript, entre trois applications : lightbox, slider, et une calendrier. voila mon head :

<head>


<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />


<script language="javascript" type="text/javascript">

jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>

<script src="admin/javascript/src/prototype.js" type="text/javascript"></script>
<script src="admin/javascript/src/rico.js" type="text/javascript"></script>
<script src="admin/javascript/datetimepicker.js" type="text/javascript"></script>




<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

<script language="javascript" type="text/javascript">

$(function() {
$('#map a').lightBox();
});



$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:false,
directionNavHide:false, //Only show on hover
controlNav:false, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
$(function() {
$('#map a').lightBox();
});

function clearText(field)
{
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>

</head>


avez vous une idée qui peut m'aider?
merci d'avance
Salut,
est que tu as vraiment besoin de prototype.js, rico.js,datetimepicker.js

Car tu as le jquery ui qui te permet d'avoir un datetimepicker ici.


jQuery.noConflict();
// Code that uses other library's $ can follow here.
</script>

<script src="admin/javascript/src/prototype.js" type="text/javascript"></script> 
<script src="admin/javascript/src/rico.js" type="text/javascript"></script>
<script src="admin/javascript/datetimepicker.js" type="text/javascript"></script> 




<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

<script language="javascript" type="text/javascript">


je ferais un truc du genre

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript" src="js/scripte.js"></script>


creer un fichier scripte.js pour ton code d'initialisation de tes variables, lib ou fonctions sera bien plus sympa.
Modifié par yellooo (06 Feb 2012 - 17:10)
Modérateur
Comme dit précédemment, le meilleur moyen d'éviter les conflits c'est d'éviter d'utiliser 3 librairies qui font au final la même chose Smiley eek

Il y a déjà un conflit sur la fonction "$" entre prototype et jQuery. Lorsque tu passes jQuery en monde sans conflit:

#1 Le faire après que jQuery soit appelé serait plus efficace (jquery.min.js) ...

#2 En mode no-conflict l'alias $ n'est plus disponible pour jQuery vu qu'il est déja utilisé, on utilisera alors jQuery au lieu de $: jQuery(window)...

#3 Il est ensuite possible de continuer d'utiliser $ à l'intérieur des structures suivantes:

jQuery(document).ready(function($) {
    // utilisation de jQuery avec $
});


(function($) { 
  // utilisation de jQuery avec $
})(jQuery);


# 4 Le slider peut être chargé dès que le dom est chargé, donc possibilité d'utiliser $(document).ready(function () { au lieu de $(window).load(function().
Modifié par kustolovic (06 Feb 2012 - 14:20)
Sujet clos
Aller à