CSS e Javascripts in conflitto

Question

Sto sviluppando un componente per il sito Web Joomla. Questo sito web ha un modello sofisticato con fantastici CSS e script (in particolare alcuni componenti di K2 sono chiamati) In questo componente sto usando colorbox per visualizzare la galleria di immagini modale ma quello che succede è

non appena questo componente viene chiamato proprietà CSS e le funzioni di javascript del modello falliscono con conseguente visualizzazione di pagine usurate. Dato che non ho scritto questi CSS e javascripts, sarà abbastanza ingombrante per me prevenire conflitti tra CSS e script.

Quindi qual è la mia domanda è

Esiste un modo per prevenire il conflitto tra questi script senza immergersi molto negli script reali.

Per favore guidami attraverso questo.

Grazie in anticipo

Answer 1

K2 è un componente di contenuto per Joomla. Non è insolito che i plug-in o i componenti aggiuntivi del framework abbiano conflitti tra loro. Sfortunatamente, potresti dover cercare nel forum Joomla o K2 per le risposte. In entrambi i casi, puoi provare a disabilitare altri plug-in uno a uno fino a quando il conflitto scompare (si spera).

Answer 2

Uno dei principali conflitti in JavaScript è tra MooTools (richiesto per alcune funzionalità di Joomla) e altre librerie JavaScript. Più comune è la variabile $ globale che è comunemente usata come selettore DOM.

In MooTools, seleziona solo per ID, mentre in altre librerie come JQuery, utilizza selettori CSS.

Quindi, se si dispone di un'estensione Joomla che carica un'altra libreria JavaScript come JQuery, si verificheranno problemi. Per JQuery esiste una soluzione specifica. http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Per altre librerie, tuttavia, dovrai immergerti in JS o utilizzare un'estensione che offre la stessa funzionalità ma utilizza MooTools.

Per quanto riguarda i CSS, l'unico modo per aggirare questo è modificare i file CSS. Le buone estensioni dovrebbero usare una sorta di spazio dei nomi per i loro CSS. Ad esempio, prefisso tutte le classi CSS con il nome del componente. Oppure racchiudi tutto l'HTML in un elemento wrapper che prende il nome dal componente, dal modulo ecc.

Se questo non esiste, dovrai aggiungerlo tu stesso.

Probabilmente il più semplice è modificare le estensioni HTML e aggiungere:

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

attorno all'estensione.

Quindi modifica le estensioni CSS e aggiungi

#extension-name 

prima di tutti i selettori CSS.

Ad esempio, se hai:

.left-column {
  float: left;
}

modificalo in:

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

Puoi persino automatizzare questo processo con una ricerca regex e sostituirla.