2009-10-28 7 views
0

Je développe un composant pour le site Web Joomla. Dans ce composant j'utilise colorbox pour afficher la galerie d'images modale mais ce qui se passe estCSS et Javascripts en conflit

dès que ce composant est appelé propriétés CSS et fonctions de javascript de modèle échoue résultant en quelques affichages de page usés. Comme je n'ai pas écrit ces CSS et javascripts, il sera très difficile pour moi d'éviter les conflits entre les CSS et les scripts.

Alors, quelle est ma question est

Est-il possible d'éviter les conflits entre ces scripts sans plonger beaucoup dans les scripts réels.

Veuillez me guider à travers cela.

Thanx à l'avance

Répondre

0

K2 est un composant de contenu pour Joomla. Il n'est pas inhabituel que des plug-ins de structure ou des add-ons aient des conflits entre eux. Malheureusement, vous devrez peut-être chercher dans le forum Joomla ou K2 pour obtenir des réponses. Soit, vous pouvez essayer de désactiver les autres plug-ins un par un jusqu'à ce que le conflit disparaisse (espérons-le).

+0

Je demande simplement s'il existe un moyen d'éviter les conflits entre css et script en utilisant Javascript ou une autre méthode –

+0

Sans toucher aux codes, vous pourriez trouver le CSS conflictuel ou chevauchant (par exemple en utilisant Firebug). Pour les javascripts en conflit, vous avez besoin d'un certain niveau de connaissance du langage de script, alors vous pouvez faire une trace de débogage (par exemple en utilisant Firebug). –

0

L'un des principaux conflits dans JavaScript est entre MooTools (requis pour certaines fonctionnalités Joomla) et d'autres bibliothèques JavaScript. Le plus commun est la variable $ global qui est couramment utilisée comme sélecteur DOM.

Dans MooTools, il ne sélectionne que par ID, alors que dans d'autres bibliothèques comme JQuery, il utilise des sélecteurs CSS. Par conséquent, si vous avez une extension Joomla qui charge une autre bibliothèque JavaScript comme JQuery, vous rencontrerez des problèmes. Pour JQuery, il existe une solution spécifique. Pour les autres bibliothèques cependant, vous devrez plonger dans le JS, ou utiliser une extension qui offre la même fonctionnalité mais utilise MooTools. Comme pour CSS, la seule façon de contourner cela est d'éditer les fichiers CSS. Les bonnes extensions devraient utiliser une sorte de namespacing pour leur CSS. Par exemple, préfixez toutes les classes CSS avec le nom du composant. Ou enveloppez tout le code HTML dans un élément d'encapsulation nommé d'après le composant, le module, etc.

Si cela n'existe pas, vous devrez l'ajouter vous-même.

Probablement le plus facile à éditer les extensions HTML et ajouter:

<div id="extension-name"> 
    <!-- extension HTML here --> 
</div> 

autour de l'extension.

modifier ensuite les extensions CSS et ajoutez

#extension-name 

avant tous les sélecteurs CSS.

Par exemple, si vous avez:

.left-column { 
    float: left; 
} 

changement à:

#extension-name .left-column { 
    float: left; 
} 

Vous pouvez même automatiser ce processus avec une recherche de regex et remplacer.