Konflikt Mootools und jQuery
Hallo zusammen,
ich verwende auf meiner (Start)-Seite 'Mooquee4ward' (basiert auf Mootools) sowie ein kleines Modul das auf jQuery basiert.
Ich habe daher die Erweiterung 'jquery' installiert und im Seitenlayout jquery sowie mootools laden lassen und moo_jquery_nc eingebunden.
Der Slider funktioniert problemlos, allerdings geht mein kleines "Modul" nicht. "Uncaught TypeError: Object #<HTMLDocument> has no method 'ready'" Das liegt wohl an der Doppelbelegung des $ Zeichens - sowohl mootools als auch jquery beansprucht es.
Ich habe diverse Sachen probiert, aber entweder läuft nur das Modul oder nur der Slider. An sich sehr simpel was ich mache:
Code:
<div id="sidenav">
<div id="panel">
<div class="content">
<h2>Kontakt</h2>
<!-- indexer::stop -->
<div class="ce_form tableless block">
<form action="index.php/startseite.html" id="f1" method="post" enctype="application/x-www-form-urlencoded">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="auto_form_1">
<input type="hidden" name="REQUEST_TOKEN" value="25a3dde146f842ca81083a8106ae06ee">
<input type="hidden" name="MAX_FILE_SIZE" value="2048000">
<label for="ctrl_1">Name</label>
<input type="text" name="Name" id="ctrl_1" class="text" value=""><br>
<label for="ctrl_2">E-Mail</label>
<input type="text" name="E-Mail" id="ctrl_2" class="text" value=""><br>
<label for="ctrl_3">Telefon</label>
<input type="text" name="Telefon" id="ctrl_3" class="text" value=""><br>
<label for="ctrl_4">Inhalt</label>
<textarea name="Inhalt" id="ctrl_4" class="textarea" rows="4" cols="40"></textarea><br>
<div class="submit_container">
<input type="submit" id="ctrl_5" class="submit" value="SENDEN">
</div>
</div>
</form>
</div>
<!-- indexer::continue -->
</div>
</div>
<div id="buttons">
<div id="fb">
</div>
<div id="xing">
</div>
<div id="yt">
</div>
<div id="tab">
</div>
<div id="telefon">
</div>
</div>
</div>
Code:
<script>
$(document).ready(function(){
$(function(){
var menus = $("#tab");
menus.click(function(){
menus.not(this).removeClass("active");
$(this).toggleClass("active");
});
$(".content").hide(); //updated line, removing the #panel ID.
$('#tab').toggle(function(){ //adding a toggle function to the #tab
$('#panel').stop().animate({width:"300px", opacity:1}, 250, function() {//sliding the #panel to 400px
$('.content').fadeIn('fast'); //slides the content into view.
});
},
function(){ //when the #tab is next cliked
$('.content').fadeOut('fast', function() { //fade out the content
$('#panel').stop().animate({width:"0", opacity:0.1}, 250); //slide the #panel back to a width of 0
});
});
});
});
</script>
Auf allen anderen Seiten (auf denen der Slider nicht eingebunden ist) funktioniert das Skript.
Jemand eine Idee wie ich das hinbekommen könnte?
Viele Grüße und einen schönen Sonntag,
Jan
