Zum Inhalt springen

Problemstellung: t3mootools & jquery

Erstellt am 15. März 2012 · 6 Antworten · letzte Antwort am 15. März 2012

Tags: Frage

wave ·

Hallo liebe Leser,

gestern wurde mir schon wunderbar hier geholfen, dafür noch mal ein großes Danke.

und zwar habe ich auf meiner seite die EXT fl_header_slide (0.1.12, zusätzlich benötigt t3_mootools 1.2.1, perfectlightbox) installiert, dies hat jetzt über Tage hin einwandfrei funnktioniert. Gestern habe ich ein neues Menu eingebaut und zwar über die EXT t3s_slidedownboxmenu und zusätzlich jquery installiert.

Circa einen halben Tag lang lief beides einwandfrei miteinander, bis ich neue Headerbilder im Backend eingetragen habe, seit dem läuft mein fl_header_slide nicht mehr, mir wird nur das erste Bild angezeigt.

Kann es sein das t3_mootools und jquery nicht gut zusammen funktionieren?
Vorschläge?
Ist jemandem ein Lösungsweg bekannt?

Webseite zur überprüfung: http://www.wagyuverein.at/index.php?id=293
Typo3 Version: 4.5.5.

Vielen Dank für eure Hilfe

jousch ·

Die Javaskriptkonsole gibt dir den Fehler aus, welche darauf hindeuten, dass es eindeutig damit zusammenhängt.

Es gibt bereits zig Anleitungen wie man Mootools gemeinsam mit jQuery zum Arbeiten bringt. Wichtig ist, dass jQuery im NoCnflict Modus arbeitet (dafür musst du evtl. deine Customscripts anpassen) und die Reihenfolge beachten.

Nach einer kurzen Googlesuche habe ich das hier gefunden: http://davidwalsh.name/jquery-mootools

skydivematy ·

Hallo Wave,
was ich nach einsicht im Quell Code sehen kann, ist erst einmal das Du JQUERY 2x einbindest. Einmal mit t3_jquery und einmal über googleapis.

Unterbinde einmal das Einbinden der Jquery datei vom Headerslide. Mit t3_jquery einmal die Analyse der Extensions durführen. Dann auf no conflict stellen. Bei header_slide kannst du glaube ich auch auf no conflict stellen.

Nimm doch anstelle von perfectlightbox die Extension rzcolorbox. Damit hast du keine Prob. mit mootools da diese mit jquery läuft.

Und rzcolorbox harmoniert mit all den anderen jquery Plugins vom Entwickler(t3_jquery) Furrer...

gruss
maty

wave ·

Vielen Dank!

beide EXT laufen nun ... ein kleines problem habe ich noch 😃 .. da ich nicht so sonderlich versiert in JScript bin.. wenn ihr nochmal einen Blick auf die Seite riskiert..

steht ganz unten loading ..

skydivematy ·

Stimmt, habe mich Verlesen, ging von jf_headerslide aus. Aber trotzdem hast du 2x jquery drinne.

<script src="http://wagyuverein.at/uploads/tx_t3jquery/jquery-1.7.x-1.8.x-1.2.x.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">

Das ist bestimmt von t3s_slidedownboxmenu, Das muss Raus.

In Die Constants vom Template [ROOT] Das wird alles von t3_jquery eingefügt.

plugin.tx_t3sslidedownboxmenu_pi1 {
  jquery = 
  jqueryEasing = 
  }

Ins Setup

page.includeJSlibs {
    slidedownboxmenu >
}

page.includeJSlibs {
    my_slidedownboxmenu = fileadmin/scripts/my_slidedownboxmenu.js
    my_slidedownboxmenu {
      type = text/javascript
      forceOnTop = 0
    }
}

Die Angaben von fileadmin musst Du nach deinen Vorgaben dann Ändern. Den Pfad zur Deiner Abgeänderten slidedownboxmenu.js file trägst Du halt dort ein.

Dieses script für slidedownboxmenu.js speicherst als .js im fileadmin wo du deine scripts ablegst.

jQuery(function() {
	jQuery('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = jQuery(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'150px',
				'height':'150px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'150px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}
		});
	}).bind('mouseleave',function(){
		var $elem = jQuery(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

Dann sollte mootools mit jquery laufen.

Mein Tipp. Mache alles mit jquery. Also den headerslide von Jürgen Furrer ( jf_headerslide) nehmen oder den von Helmut Hackbarth (t3s_headerslider), dann hast du in Zukunf weniger Probleme.

gruss
maty

jousch ·

Ich kenne mich auch nicht so gut aus, allerdings kann ich dir nur nahelegen, sich mit dem Thema jQuery und Mootools mal ausgiebig zu beschäftigen. Hat mans erst einmal kappiert, kann man die Probleme eigentlich immer lösen. (außer es liegt ein Scriptfehler vor^^)