[JQuery] Compatibilité avec un autre script

Bonjour à tous!

Je code actuellement un site et je me heurte à un problème, pour divers raisons, notamment pour l'utilisation des menus, j'utilise du javascript. Pour un menu horizontal fonctionnant par slider j'utilise le script ci-dessous.

		function $(element){
			return document.getElementById(element);
		}
		var timer = null;
		function slideUp(target,current){
			if(parseInt($(target).style.left) < 0){
				$(target).style.left = parseInt($(target).style.left) + 10 + "px";
				$(current).style.left = parseInt($(current).style.left) + 10 + "px";
				timer = setTimeout('slideUp("'+target+'","'+current+'")',10);
			}
			else{
				clearTimeout(timer);
			}
		}
		 
		function slideDown(target,current){
			if(parseInt($(target).style.left) > 0){
				$(target).style.left = parseInt($(target).style.left) - 10 + "px";
				$(current).style.left = parseInt($(current).style.left) - 10 + "px";
				timer = setTimeout('slideDown("'+target+'","'+current+'")',10);
			}
			else{
				clearTimeout(timer);
			}
		}
		/*
		onclick="slideDown('target','current')"
		class="previous" onclick="slideUp('target','current')"
		*/

Je ne suis pas du tout à l'aise en javascript, je ne maitrise pas du tout la syntaxe.
Mais voilà mon problème, le script précédent marche parfaitement si il est seul sur une page, or pour d'autre besoin je dois mettre en place JQuery UI, or quand ce dernier et présent (les fichiers js importés dans ma page) mon script précédent devient inefficace (il n'a plus aucun effet).

Il y a donc une incompatibilité entre mon script et la librairie JQuery. Il faudrait donc que je recode mon script à l'aide de la syntaxe JQuery, or là je sèche totalement, je ne sais pas comment il faut faire...

Pourriez-vous me guider ou me soumettre d'autres solutions si il y en a?

Un exemple en ligne peut-être trouvé de mon menu: http://dev.crea2clic.net/test/menu_slide/

Merci d'avance.
Modifié par @TiK (11 Jul 2009 - 12:59)

Salut,

Il faudrait, comme d'hab, voir le code entier (une page en ligne est l'idéal), mais on peut déjà supposer que tu peux supprimer ta fonction $ et remplacer tous les appels du style $(element) par $('#' + element)[0].

En ce qui concerne tes fonctions slideUp() et slideDown(), les équivalents de jQuery ne déroulent qu'un seul élément, contrairement à deux chez toi (target et current). Il faudrait donc voir le reste de ton code pour savoir à quoi correspondent ces deux éléments et adapter en conséquence.

Ok, voilà j'ai mis en ligne mon menu:

http://dev.crea2clic.net/test/menu_slide/

Dans les premiers indices d'adaptations que tu donnes je ne comprend pas très bien ce changement:

a écrit :
$(element) par $('#' + element)[0]

le # représente l'id? et pourquoi le mettre sous forme de array ([0])?

a écrit :

$(element) par $('#' + element)[0]

le # représente l'id? et pourquoi le mettre sous forme de array ([0])?

Ok :
- tu as défini une fonction $. Cette fonction renvoit un élément si tu lui donnes son id.
- jQuery a déjà une fonction $, d'où le probable conflit
- on pourrait utiliser jQuery.noConflict(), mais je suppose que tu as peu de code perso, et il est donc tout aussi propre de l'adapter rapido (ce qu'on est en train de faire) pour qu'il ne "conflicte" pas avec jQuery.
- je te propose donc de légèrement modifier tes appels à la fonction $ pour appeler celle de jQuery plutôt que la tienne, que l'on supprimera. Sinon, on pourrait très bien remplacer tes $('monId') par des document.getElementById('monId'), mais ce serait trop simple
- la fonction $ de jquery est bien plus puissante et récupère les éléments sur la base d'un ou plusieurs sélecteurs CSS. Pour récupérer un élément par son id, on doit donc appeler $('#monID')
- enfin, $ peut renvoyer plusieurs éléments, elle renvoit donc toujours un array (en fait ce n'est pas vraiment ça qui se passe, mais ça suffira pour que tu comprennes). Pour récupérer le premier (et le seul) élément trouvé, on doit demander, au final : $('#monID')[0]

Donc voilà pour tes appels à $. Pour le reste, à savoir tes deux fonctions slideUp() et slideDown(), je te propose une modification qui a selon moi les avantages suivants :
- elle regroupe slideUp() et slideDown() en une seule fonction
- à chaque répétition de tes deux fonctions (après chaque déplacement de 10px), tu vas chercher dans le DOM 2 fois l'élément target et 2 fois l'élément current. Je te propose de les chercher une seule fois chacun, au début, et de les enregistrer dans des variables pour y accéder immédiatement durant tout le reste de l'exécution
- ton timer n'est plus dans une variable globale
- j'utilise setInterval() plutôt que setTimeout(), là c'est plus une question de préférence
- enfin, bien sûr, pas de conflit avec jQuery :

function slide(direction, targetId, currentId){
    var target = document.getElementById(targetId),
        current = document.getElementById(currentId),
        targetPosition = parseInt(target.style.left),
        currentPosition = parseInt(current.style.left),
        step = (direction == "left" ? -10 : 10);
    var animating = setInterval(function() {
        if (direction == "left" && targetPosition > 0
        || direction == "right" && targetPosition < 0) {
            targetPosition += step;
            currentPosition += step;
            target.style.left = targetPosition + "px";
            current.style.left = currentPosition + "px";
        } else {
            clearInterval(animating);
        }    
    }, 10);
}

Tes onclicks doivent passer de

slideUp('p0','p4')

à

slide('right', 'p0', 'p4')

(et slide('left'... pour remplacer slideDown(..., bien sûr).
Modifié par marcv (12 Jul 2009 - 09:23)

Alors là franchement je te dis un grand MERCI!

C'est super! C'est fonctionnel (mais ça je n'en doutais pas ) mais au-delà de cela tes explications sont parfaites! Une véritable aide! Ca fait plaisir!

a écrit :
on pourrait utiliser jQuery.noConflict(), mais je suppose que tu as peu de code perso, et il est donc tout aussi propre de l'adapter rapido (ce qu'on est en train de faire) pour qu'il ne "conflicte" pas avec jQuery.

Oui j'avais vu cette fonctionnalité, mais je souhaitais davantage passer par une adaptation du code.

Bon maintenant il faut vraiment que j'ajoute "apprentissage du js et de JQuery" sur me To Do List après mon projet en cours... Il n'y a pas photo! Car même si je comprend globalement grâce à tes explications, je ne vois pas encore toutes les subtilités du js.

Enfin bref, merci à toi