Konflikt mit jQuery-Plugin "hordion" und "jf_headerslide"

Hallo zusammen,

ich habe zur Zeit folgendes Problem:
Ich setze bei meinem aktuellen Projekt die Extensions "t3jquery" und "t3mootools" ein.
t3jquery wird benutzt von "jfmulticontent".
t3mootools wird benutzt von "jf_headerslide".

Soweit funktioniert auch alles konfliktfrei.

Für jQuery gibt es nun noch das Plugin "hordion" (ein horizontales accordion Menü) welches ich gerne auf der Startseite einsetzen möchte.

Zum Einsetzen reicht folgendes aus:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery_easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery_hordion/jquery.hordion.js"></script>

<script language="javascript" type="text/javascript">
  $(function(){
    var options = {
      speed: 300, // Dauer der Animationen in msec
      max: 400, // Breite des aufgeklappten Elements in Pixeln
      easing: "linear", // benötigt jQuery Easing-Plugin
      activeClass: "active" // Das LI-Element (oder Div) mit der
      // Klasse "active" ist offen, wenn die Maus nicht im Container ist.
    };
  $("ul#hordion").hordion(options); // Der Parameter ist optional.
  });
</script>

Ich benutze TV und wenn ich das als HTML-HeaderParts einbinde funktioniert "hordion" nicht.
Wenn ich es allerdings innerhalb des Body-Tags setze (im html-Template direkt) dann funktioniert zwar hordion aber "jf_headerslide" welches die mootools benutzt nicht mehr.

Hat jemand eine Idee wie man an die Sache rangehen kann bzw. mit was zu tun haben könnte?
Ich denke mal, dass ich nicht extra noch einmal jQuery in der ersten Zeile einbinden darf, aber wenn ich über TypoScript befehle, dass hordion t3jquery benutzen soll funktioniert hordion wieder nicht.

Über Eure Hilfe würde ich mich sehr freuen - sitze schon ziemlich lange an dem Problem.

Danke vorab und Gruß,
Nightcrawler

das liegt höchst wahrscheinlich daran das mooTools und jquery beide das Dollar Zeichen "$" definieren, und je nachdem welches Javascript du zuletzt einbindest, wird "$" überschrieben.

Jquery hat hierfür die Funktion noConflict() http://api.jquery.com/jQuery.noConflict/ . Nach dem Einsatz nutzt Jquery dann nicht mehr das "$", was wiederum heißt, dass du wahrscheinlich dein hordion Script von Hand anpassen musst, also alle Aufrufe ala $.(...) ändern in jQuery.() oder etwas ähnliches.

Hallo karlchen,

vielen herzlichen Dank für Deine Antwort - Du hast damit genau ins Schwarze getroffen und mir somit prima weitergeholfen.

Ich habe nun Folgendes im Header stehen:

<script type="text/javascript" src="/uploads/tx_t3jquery/jquery-1.4.2-1.8.0.js"></script>
<script type="text/javascript" src="js/jquery_easing/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery_hordion/jquery.hordion.js"></script>

<script language="javascript" type="text/javascript">
  jQuery.noConflict();
    (function($) { 
      $(function(){
        var options = {
        speed: 300, // Dauer der Animationen in msec
        max: 400, // Breite des aufgeklappten Elements in Pixeln
        easing: "linear", // benötigt jQuery Easing-Plugin
        activeClass: "active" // Das LI-Element (oder Div) mit der
        // Klasse "active" ist offen, wenn die Maus nicht im Container ist.
      };
      $("ul#hordion").hordion(options); // Der Parameter ist optional.
    });
  })(jQuery);
</script>

Damit wurde das hordion-"Menü" erst einmal angezeigt, die hover-Effekte funktionierten allerdings nicht.
Doch im hordion.js habe ich noch 2 Stellen mit $-Zeichen gefunden. Dieses habe ich durch "jQuery" ersetzt und jetzt funktioniert alles ganz prima!

Vielen Dank und viele Grüße,
Jens.