Konflikt Mootools und jQuery

[jschma]

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:

<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>

<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

[tril]

Im jQuery Script einfach anstelle von $ die Funktion jQuery verwenden:

<script>
jQuery(function($){
  var menus = $("#tab");
  menus.click(function() {
    menus.not(this).removeClass("active");
    $(this).toggleClass("active");
  });

  //updated line, removing the #panel ID.
  $(".content").hide();
 
  //adding a toggle function to the #tab
  $('#tab').toggle(
    function() {
      //sliding the #panel to 400px
      $('#panel')
        .stop()
        .animate(
          {width:"300px", opacity:1},
          250,
          function() {
            $('.content').fadeIn('fast'); //slides the content into view.
          }
        );  
    },
    //when the #tab is next cliked
    function() {
      $('.content')
        .fadeOut(
          'fast',
          //fade out the content 
          function() {
            //slide the #panel back to a width of 0
            $('#panel').stop().animate({width:"0", opacity:0.1}, 250);
	  }
        );
    }
  );
}); 
</script>

[jschma]

Im jQuery Script einfach anstelle von $ die Funktion jQuery verwenden:

<script>
jQuery(function($){
  var menus = $("#tab");
  menus.click(function() {
    menus.not(this).removeClass("active");
    $(this).toggleClass("active");
  });

  //updated line, removing the #panel ID.
  $(".content").hide();
 
  //adding a toggle function to the #tab
  $('#tab').toggle(
    function() {
      //sliding the #panel to 400px
      $('#panel')
        .stop()
        .animate(
          {width:"300px", opacity:1},
          250,
          function() {
            $('.content').fadeIn('fast'); //slides the content into view.
          }
        );  
    },
    //when the #tab is next cliked
    function() {
      $('.content')
        .fadeOut(
          'fast',
          //fade out the content 
          function() {
            //slide the #panel back to a width of 0
            $('#panel').stop().animate({width:"0", opacity:0.1}, 250);
	  }
        );
    }
  );
}); 
</script>

Hi tril,

danke für den Tipp! Genau das hatte ich bereits versucht, allerdings funktioniert das das Skript nicht mehr. Der Button #tab wird dann von Anfang an einfach ausgeblendet...

[tril]

Hi tril,

danke für den Tipp! Genau das hatte ich bereits versucht, allerdings funktioniert das das Skript nicht mehr. Der Button #tab wird dann von Anfang an einfach ausgeblendet...

Hast du es wirklich genau so versucht?
Ich bin der Meinung es müsste funktionieren mit jQuery(function($){ (man beachte das $ in der Parameterliste !!!).
Aber ohne URL um es zu analysieren ist es quasi unmöglich, hier noch weitergehende Tipps zu geben.

[jschma]

Hast du es wirklich genau so versucht?
Ich bin der Meinung es müsste funktionieren mit jQuery(function($){ (man beachte das $ in der Parameterliste !!!).
Aber ohne URL um es zu analysieren ist es quasi unmöglich, hier noch weitergehende Tipps zu geben.

Hi tril,

100% so, war copy & paste Ich kann dir (PN) kurz die URL schicken. Da das Projekt noch nicht live ist möchte ich es hier nicht posten.

Viele Grüße,
Jan