Bonjour à tous,
J'ai un petit problème d'incompatibilité apparemment entre deux framework Javascript, à savoir : Rico (basé sur Prototype) et jQuery.
Tout d'abord, on pourrait se questionner sur le but d'une telle associations de frameworks. La réponse est simple, j'utilise Rico pour faire des coins arrondis (Rico.Corner.round(...)) et jQuery pour des effets de couleur progressive (la fonction animate()) ; les possibilités des coins arrondis avec jQuery ne me sont pas suffisantes.
J'arrive donc parfaitement à faire fonctionner ces deux framework...séparément ! En effet, dès que je veux avoir des div avec coins arrondis et des boutons à couleur progressive (au mouseOver et mouseOut en l'occurence), PATATRA ! Rien ne va plus.
Voici les références aux différents sources js dans mon <head> :
Au chargement de la page :
Dans le fichier all.js se trouve entre autre cette partie de code (pour la couleur progressive) :
En laissant les sources de cette manière, j'arrive à obtenir des coins arrondis mais pas de couleur progressive pour les boutons (situés dans la div navigation).
En enlevant les références à rico dans le <head>, j'arrive à avoir uniquement la couleur progressive sur les fameux boutons !
Je suis un peu désespéré car l'association Rico et jQuery est le seul moyen que j'ai trouvé pour répondre à mes besoins.
Merci d'avance pour toute l'aide que vous pourrez m'apporter.
J'ai un petit problème d'incompatibilité apparemment entre deux framework Javascript, à savoir : Rico (basé sur Prototype) et jQuery.
Tout d'abord, on pourrait se questionner sur le but d'une telle associations de frameworks. La réponse est simple, j'utilise Rico pour faire des coins arrondis (Rico.Corner.round(...)) et jQuery pour des effets de couleur progressive (la fonction animate()) ; les possibilités des coins arrondis avec jQuery ne me sont pas suffisantes.
J'arrive donc parfaitement à faire fonctionner ces deux framework...séparément ! En effet, dès que je veux avoir des div avec coins arrondis et des boutons à couleur progressive (au mouseOver et mouseOut en l'occurence), PATATRA ! Rien ne va plus.
Voici les références aux différents sources js dans mon <head> :
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/color.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/all.js"></script>
<!-- **** -->
<!-- RICO -->
<script type="text/javascript" src="js/rico/prototype.js"></script>
<script type="text/javascript" src="js/rico/rico.js"></script>
<script type="text/javascript" src="js/rico/ricoStyles.js"></script>
<!-- **** -->
Au chargement de la page :
<script type="text/javascript">
window.onload = function() {
Rico.Corner.round('events', {corners:"bottom", border: '#c7c2a7'});
Rico.Corner.round('ListOfNews', {corners:"bottom", border: '#c7c2a7'});
Rico.Corner.round('guestbook');
}
</script>
Dans le fichier all.js se trouve entre autre cette partie de code (pour la couleur progressive) :
$(document).ready(function() {
$("#navigation .primary a").mouseover(function() {
// Change la couleur de la fonte
$(this).animate({ color: "#ffffff" }, 20)
// COULEUR progressive div lescat
$(this).animate({ backgroundColor: "#990000" }, 400)
});
$("#navigation .primary a").mouseout(function() {
$(this).animate({ color: "#660000" }, 20)
// COULEUR FIN et DEBUT div lescat
$(this).animate({ backgroundColor: "#cccc99" }, 400)
});
$("#navigation .secondary a").mouseover(function() {
// COULEUR progressive div connexe
$(this).animate({ backgroundColor: "#cccc99" }, 400)
});
$("#navigation .secondary a").mouseout(function() {
// COULEUR FIN et DEBUT div connexe
$(this).animate({ backgroundColor: "#d4d0b7" }, 400)
});
});
En laissant les sources de cette manière, j'arrive à obtenir des coins arrondis mais pas de couleur progressive pour les boutons (situés dans la div navigation).
En enlevant les références à rico dans le <head>, j'arrive à avoir uniquement la couleur progressive sur les fameux boutons !
Je suis un peu désespéré car l'association Rico et jQuery est le seul moyen que j'ai trouvé pour répondre à mes besoins.
Merci d'avance pour toute l'aide que vous pourrez m'apporter.