We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 15050
    • 24 Posts
    先日、jQueryを使用して、同一ページ内のアンカーにスムーズにスクロールという質問をしましたが、このページにAjaxSearchを入れました。
    AjaxSearchは動くのですが、mootoolsが衝突しているのか、スムーズスクロールが機能しなくなりました。

    先日のスムーズスクロールの質問で 『jQueryのnoConflict()メソッドで衝突を回避』 ということに触れられましたので、いろいろと調べてみて
    jQueryのnoConflict();メソッドで回避しようとしましたが、
    AjaxSearchの場合、テンプレートに直接

    <script src="http://hoge.com/js/shCore.js" type="text/javascript"></script>
    <script src="http://hoge.com/js/jquery.lightbox.js" type="text/javascript"></script>

    などと書くわけではないので、どうやって回避していいかわかりません。
    今回の場合はAjaxSearchの問題ですが、その他のスニペットやプラグインなどもぶつかってくる場合があるかと思います。
    このような場合はどうしたらいいでしょうか。
    スムーズスクロールのjQueryのバージョンは1.2.6でAjaxSearchと同一バージョンです。

    当方の環境はテスト環境として
    Macにて
    MySQL 4.1.22
    PHP 5.2.1
    MODx 0.9.6.3
    で使用しております。

    よろしくお願いいたします。
      • 15050
      • 24 Posts
      jQuery.noConflict()は

      <script type="text/javascript" src="jquery.js"></script>
      ここ
      <script type="text/javascript" src="mootools.js"></script>

      上のようにここと書かれた部分に書かなきゃならないものと思っていました。
      自動的に入ってきたものをよく見たら下記の順序になっており、

      <script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
      <script type="text/javascript" src="assets/snippets/ajaxSearch/js/ajaxSearch.js"></script>

      その上には自分で記述した

      <script type="text/javascript" src="[(base_url)]assets/js/lib/jquery.js"></script>
      <script type="text/javascript" src="[(base_url)]assets/js/jquery.easing.js"></script>

      がありました。よってテンプレートは

      <script type="text/javascript" src="[(base_url)]assets/js/lib/jquery.js"></script>
      <script type="text/javascript" src="[(base_url)]assets/js/jquery.easing.js"></script>

      <script language="JavaScript">
      jQuery.noConflict();
      var j$ = jQuery
      </script>

      <script language="JavaScript">
      j$(function() {
      j$(’a[href*=#]’).click(function() {
      if (location.pathname.replace(/^\//,’’) == this.pathname.replace(/^\//,’’) && location.hostname == this.hostname) {
      var target = j$(this.hash);
      target = target.length && target;
      if (target.length) {
      var sclpos = 30;
      var scldurat = 1200;
      var targetOffset = target.offset().top - sclpos;
      j$(’html,body’)
      .animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
      return false;
      }
      }
      });
      });
      </script>


      のようにすることによって、この下に自動的にAjaxSearchの<script type= 〜 .js">が入るようになりました。
      これで今のところ、動くようになりました。
      ちなみにスクリプト部分の$はj$に変えてあります。
      よく見ずにいて、質問してしまった自分に反省です。
      一応、私のようにわからない方もいらっしゃるかもしれないので、反省の意味も込めて自己レスです。
        • 29908
        • 95 Posts
        junkさん
         こんにちは、thrです。
         このフォーラムはおそらく書き込みをしている人も多いですが、それ以上に見ている方が多いと思うので、こおいった自己レスでもきっと誰かの役に立つと思います。
         今後もぜひ書き込みしてくださいね。
          MODx CMS JAPAN
          モデレータ(日本公式とか、広報とか、雑務担当?)
          thr