質問編集履歴

6 Markdownでリンクを記載しなおしました。

Novz

Novz score 22

2018/02/18 17:20  投稿

JQuery drawer.min.jsプラグインとの競合の改善方法について
いつも大変お世話になっております。
WordPressでテーマを作成したのですが、
Jqueryのプラグインがコンフリクトを起こしてしまい、
幾つかのプラグインが同時に利用できない状況です。
【概要】
競合しているURL
https://belcantolibrary.com
[競合しているURL](https://belcantolibrary.com)
(A)
iscroll.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
drawer.min.js(スマートフォンでドロワーメニューを出す)
https://goo.gl/P7X5ez
[iscroll.js](https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js)
[drawer.min.js](https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/drawer.min.js)
(スマートフォンでドロワーメニューを出す)
```
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
     $('.drawer').drawer();
   });
</script>
```
(B)
パソコン版でスクロールするとヘッダーに固定メニューを表示させる
jquery-fixed.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js
[jquery-fixed.js](
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js)
スクロールすると右下にトップに戻るボタンを表示する
jquery-scrolls.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
[fixed.js](https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js)
が同時に利用できない状況です。
AとBをheadに記述すると後述のjsファイルが動かなくなる状況です。
他のプラグインを削除したりしてチェックしてみたのですが、
競合を起こしているのは上記のプラグインのみのようでした。
ただ、スマートフォンでみると
drawer.min.js
jquery-scrolls.js
の順で記述すればなぜかどちらも動作します。
【試したこと】
(1)
調べたところ$関数が競合をおこすとのことでしたので、
```
$(function() {
```
```
jQuery(function($)
```
に修正してみましたが解消しませんでした。
(2)
また、
https://webcode-lab.com/topics/blogid/8/
[プラグインを複数入れたらjQueryが動かない!-コンフリクト対策](https://webcode-lab.com/topics/blogid/8/)
を参考に
「$() 関数」の代わりに別の関数「$d」のような任意の関数を定義してみたのですが、
こうすると競合以前にプラグインが動作しなくなってしまいました。
(2)を記述した際はAとBを下記のように修正しました。
```
<script type="text/javascript">
var $d = jQuery.noConflict();
$d(document).ready( function() {
     $d('.drawer').drawer();
   });
</script>
```
```
var $f = jQuery.noConflict();
$f(function() {
   var nav = $f('.nav');
   var navTop = nav.offset().top+500;
   var navHeight = nav.height()+10;
   var showFlug = false;
   nav.css('top', -navHeight+'px');
   $(window).scroll(function () {
       var winTop = $(this).scrollTop();
       if (winTop >= navTop) {
           if (showFlug == false) {
               showFlug = true;
               nav
                   .addClass('fixed')
                   .stop().animate({'top' : '0px'}, 200);
           }
       } else if (winTop <= navTop) {
           if (showFlug) {
               showFlug = false;
               nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
                   nav.removeClass('fixed');
               });
           }
       }
   });
});
```
```
var $s = jQuery.noConflict();
$s(function() {
   var topBtn = $s('#page-top');   
   topBtn.hide();
   //スクロールが100に達したらボタン表示
   $s(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
           topBtn.fadeIn();
       } else {
           topBtn.fadeOut();
       }
   });
   //スクロールしてトップ
   topBtn.click(function () {
       $s('body,html').animate({
           scrollTop: 0
       }, 500);
       return false;
   });
});
```
【その他】
他に下記のプラグインを導入していますが、
こちらは動作しております。
bxslider(スライダープラグイン)
jquery.matchHeight(ボックスの高さを揃えるプラグイン)
dropdown(ドロップダウンメニューを呼び出すプラグイン)
ofi.min(IEでcss object-fitを適用させるプラグイン)
AとBを競合を起こさずに、同時に利用する方法はありませんでしょうか?
お忙しいところお手数をおかけしますが、
どうぞご指導よろしくお願いいたします。
  • JavaScript

    37369 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13295 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    821 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

5 抜けていたURLのhを追加しました。

Novz

Novz score 22

2018/02/18 14:42  投稿

JQuery drawer.min.jsプラグインとの競合の改善方法について
いつも大変お世話になっております。
WordPressでテーマを作成したのですが、
Jqueryのプラグインがコンフリクトを起こしてしまい、
幾つかのプラグインが同時に利用できない状況です。
【概要】
競合しているURL
https://belcantolibrary.com
(A)
iscroll.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
drawer.min.js(スマートフォンでドロワーメニューを出す)
https://goo.gl/P7X5ez
```
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
     $('.drawer').drawer();
   });
</script>
```
(B)
パソコン版でスクロールするとヘッダーに固定メニューを表示させる
jquery-fixed.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js
スクロールすると右下にトップに戻るボタンを表示する
jquery-scrolls.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
が同時に利用できない状況です。
AとBをheadに記述すると後述のjsファイルが動かなくなる状況です。
他のプラグインを削除したりしてチェックしてみたのですが、
競合を起こしているのは上記のプラグインのみのようでした。
ただ、スマートフォンでみると
drawer.min.js
jquery-scrolls.js
の順で記述すればなぜかどちらも動作します。
【試したこと】
(1)
調べたところ$関数が競合をおこすとのことでしたので、
```
$(function() {
```
```
jQuery(function($)
```
に修正してみましたが解消しませんでした。
(2)
また、
ttps://webcode-lab.com/topics/blogid/8/
https://webcode-lab.com/topics/blogid/8/
を参考に
「$() 関数」の代わりに別の関数「$d」のような任意の関数を定義してみたのですが、
こうすると競合以前にプラグインが動作しなくなってしまいました。
(2)を記述した際はAとBを下記のように修正しました。
```
<script type="text/javascript">
var $d = jQuery.noConflict();
$d(document).ready( function() {
     $d('.drawer').drawer();
   });
</script>
```
```
var $f = jQuery.noConflict();
$f(function() {
   var nav = $f('.nav');
   var navTop = nav.offset().top+500;
   var navHeight = nav.height()+10;
   var showFlug = false;
   nav.css('top', -navHeight+'px');
   $(window).scroll(function () {
       var winTop = $(this).scrollTop();
       if (winTop >= navTop) {
           if (showFlug == false) {
               showFlug = true;
               nav
                   .addClass('fixed')
                   .stop().animate({'top' : '0px'}, 200);
           }
       } else if (winTop <= navTop) {
           if (showFlug) {
               showFlug = false;
               nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
                   nav.removeClass('fixed');
               });
           }
       }
   });
});
```
```
var $s = jQuery.noConflict();
$s(function() {
   var topBtn = $s('#page-top');   
   topBtn.hide();
   //スクロールが100に達したらボタン表示
   $s(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
           topBtn.fadeIn();
       } else {
           topBtn.fadeOut();
       }
   });
   //スクロールしてトップ
   topBtn.click(function () {
       $s('body,html').animate({
           scrollTop: 0
       }, 500);
       return false;
   });
});
```
【その他】
他に下記のプラグインを導入していますが、
こちらは動作しております。
bxslider(スライダープラグイン)
jquery.matchHeight(ボックスの高さを揃えるプラグイン)
dropdown(ドロップダウンメニューを呼び出すプラグイン)
ofi.min(IEでcss object-fitを適用させるプラグイン)
AとBを競合を起こさずに、同時に利用する方法はありませんでしょうか?
お忙しいところお手数をおかけしますが、
どうぞご指導よろしくお願いいたします。
  • JavaScript

    37369 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13295 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    821 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

4 URLのhを追加しました。

Novz

Novz score 22

2018/02/18 14:39  投稿

JQuery drawer.min.jsプラグインとの競合の改善方法について
いつも大変お世話になっております。
WordPressでテーマを作成したのですが、
Jqueryのプラグインがコンフリクトを起こしてしまい、
幾つかのプラグインが同時に利用できない状況です。
【概要】
競合しているURL
ttps://belcantolibrary.com
https://belcantolibrary.com
(A)
iscroll.js
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
drawer.min.js(スマートフォンでドロワーメニューを出す)
ttps://goo.gl/P7X5ez
https://goo.gl/P7X5ez
```
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
     $('.drawer').drawer();
   });
</script>
```
(B)
パソコン版でスクロールするとヘッダーに固定メニューを表示させる
jquery-fixed.js
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js
スクロールすると右下にトップに戻るボタンを表示する
jquery-scrolls.js
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
https://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
が同時に利用できない状況です。
AとBをheadに記述すると後述のjsファイルが動かなくなる状況です。
他のプラグインを削除したりしてチェックしてみたのですが、
競合を起こしているのは上記のプラグインのみのようでした。
ただ、スマートフォンでみると
drawer.min.js
jquery-scrolls.js
の順で記述すればなぜかどちらも動作します。
【試したこと】
(1)
調べたところ$関数が競合をおこすとのことでしたので、
```
$(function() {
```
```
jQuery(function($)
```
に修正してみましたが解消しませんでした。
(2)
また、
ttps://webcode-lab.com/topics/blogid/8/
を参考に
「$() 関数」の代わりに別の関数「$d」のような任意の関数を定義してみたのですが、
こうすると競合以前にプラグインが動作しなくなってしまいました。
(2)を記述した際はAとBを下記のように修正しました。
```
<script type="text/javascript">
var $d = jQuery.noConflict();
$d(document).ready( function() {
     $d('.drawer').drawer();
   });
</script>
```
```
var $f = jQuery.noConflict();
$f(function() {
   var nav = $f('.nav');
   var navTop = nav.offset().top+500;
   var navHeight = nav.height()+10;
   var showFlug = false;
   nav.css('top', -navHeight+'px');
   $(window).scroll(function () {
       var winTop = $(this).scrollTop();
       if (winTop >= navTop) {
           if (showFlug == false) {
               showFlug = true;
               nav
                   .addClass('fixed')
                   .stop().animate({'top' : '0px'}, 200);
           }
       } else if (winTop <= navTop) {
           if (showFlug) {
               showFlug = false;
               nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
                   nav.removeClass('fixed');
               });
           }
       }
   });
});
```
```
var $s = jQuery.noConflict();
$s(function() {
   var topBtn = $s('#page-top');   
   topBtn.hide();
   //スクロールが100に達したらボタン表示
   $s(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
           topBtn.fadeIn();
       } else {
           topBtn.fadeOut();
       }
   });
   //スクロールしてトップ
   topBtn.click(function () {
       $s('body,html').animate({
           scrollTop: 0
       }, 500);
       return false;
   });
});
```
【その他】
他に下記のプラグインを導入していますが、
こちらは動作しております。
bxslider(スライダープラグイン)
jquery.matchHeight(ボックスの高さを揃えるプラグイン)
dropdown(ドロップダウンメニューを呼び出すプラグイン)
ofi.min(IEでcss object-fitを適用させるプラグイン)
AとBを競合を起こさずに、同時に利用する方法はありませんでしょうか?
お忙しいところお手数をおかけしますが、
どうぞご指導よろしくお願いいたします。
  • JavaScript

    37369 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13295 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    821 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

3 $d関数を定義してみたときの記述を追加いたしました。

Novz

Novz score 22

2018/02/18 14:37  投稿

JQuery drawer.min.jsプラグインとの競合の改善方法について
いつも大変お世話になっております。
WordPressでテーマを作成したのですが、
Jqueryのプラグインがコンフリクトを起こしてしまい、
幾つかのプラグインが同時に利用できない状況です。
【概要】
競合しているURL
ttps://belcantolibrary.com
(A)
iscroll.js
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
drawer.min.js(スマートフォンでドロワーメニューを出す)
ttps://goo.gl/P7X5ez
```
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
     $('.drawer').drawer();
   });
</script>
```
(B)
パソコン版でスクロールするとヘッダーに固定メニューを表示させる
jquery-fixed.js
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js
スクロールすると右下にトップに戻るボタンを表示する
jquery-scrolls.js
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
が同時に利用できない状況です。
AとBをheadに記述すると後述のjsファイルが動かなくなる状況です。
他のプラグインを削除したりしてチェックしてみたのですが、
競合を起こしているのは上記のプラグインのみのようでした。
ただ、スマートフォンでみると
drawer.min.js
jquery-scrolls.js
の順で記述すればなぜかどちらも動作します。
【試したこと】
(1)
調べたところ$関数が競合をおこすとのことでしたので、
```
$(function() {
```
```
jQuery(function($)
```
に修正してみましたが解消しませんでした。
(2)
また、
ttps://webcode-lab.com/topics/blogid/8/
を参考に
「$() 関数」の代わりに別の関数「$d」のような任意の関数を定義してみたのですが、
こうすると競合以前にプラグインが動作しなくなってしまいました。
(2)を記述した際はAとBを下記のように修正しました。  
 
 
```  
<script type="text/javascript">  
var $d = jQuery.noConflict();  
$d(document).ready( function() {  
     $d('.drawer').drawer();  
   });  
</script>  
```  
 
 
```  
var $f = jQuery.noConflict();  
$f(function() {  
   var nav = $f('.nav');  
   var navTop = nav.offset().top+500;  
   var navHeight = nav.height()+10;  
   var showFlug = false;  
   nav.css('top', -navHeight+'px');  
   $(window).scroll(function () {  
       var winTop = $(this).scrollTop();  
       if (winTop >= navTop) {  
           if (showFlug == false) {  
               showFlug = true;  
               nav  
                   .addClass('fixed')  
                   .stop().animate({'top' : '0px'}, 200);  
           }  
       } else if (winTop <= navTop) {  
           if (showFlug) {  
               showFlug = false;  
               nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){  
                   nav.removeClass('fixed');  
               });  
           }  
       }  
   });  
});  
```  
 
 
```  
var $s = jQuery.noConflict();  
$s(function() {  
   var topBtn = $s('#page-top');     
   topBtn.hide();  
   //スクロールが100に達したらボタン表示  
   $s(window).scroll(function () {  
       if ($(this).scrollTop() > 100) {  
           topBtn.fadeIn();  
       } else {  
           topBtn.fadeOut();  
       }  
   });  
   //スクロールしてトップ  
   topBtn.click(function () {  
       $s('body,html').animate({  
           scrollTop: 0  
       }, 500);  
       return false;  
   });  
});  
```  
【その他】
他に下記のプラグインを導入していますが、
こちらは動作しております。
bxslider(スライダープラグイン)
jquery.matchHeight(ボックスの高さを揃えるプラグイン)
dropdown(ドロップダウンメニューを呼び出すプラグイン)
ofi.min(IEでcss object-fitを適用させるプラグイン)
AとBを競合を起こさずに、同時に利用する方法はありませんでしょうか?
お忙しいところお手数をおかけしますが、
どうぞご指導よろしくお願いいたします。
  • JavaScript

    37369 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13295 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    821 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

2 短縮URLの部分を修正いたしました。

Novz

Novz score 22

2018/02/18 14:31  投稿

JQuery drawer.min.jsプラグインとの競合の改善方法について
いつも大変お世話になっております。
WordPressでテーマを作成したのですが、
Jqueryのプラグインがコンフリクトを起こしてしまい、
幾つかのプラグインが同時に利用できない状況です。
【概要】
競合しているURL
ttps://goo.gl/wiAuBR
ttps://belcantolibrary.com
(A)
iscroll.js
ttps://goo.gl/4inz9c
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
drawer.min.js(スマートフォンでドロワーメニューを出す)
ttps://goo.gl/P7X5ez
```
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
     $('.drawer').drawer();
   });
</script>
```
(B)
パソコン版でスクロールするとヘッダーに固定メニューを表示させる
jquery-fixed.js
ttps://goo.gl/Jz5bVf
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-fixed.js
スクロールすると右下にトップに戻るボタンを表示する
jquery-scrolls.js
ttps://goo.gl/Zt4pHi
ttps://belcantolibrary.com/wp/wp-content/themes/belblank_v5.2/js/jquery-scrolls.js
が同時に利用できない状況です。
AとBをheadに記述すると後述のjsファイルが動かなくなる状況です。
他のプラグインを削除したりしてチェックしてみたのですが、
競合を起こしているのは上記のプラグインのみのようでした。
ただ、スマートフォンでみると
drawer.min.js
jquery-scrolls.js
の順で記述すればなぜかどちらも動作します。
【試したこと】
(1)
調べたところ$関数が競合をおこすとのことでしたので、
```
$(function() {
```
```
jQuery(function($)
```
に修正してみましたが解消しませんでした。
(2)
また、
ttps://webcode-lab.com/topics/blogid/8/
を参考に
「$() 関数」の代わりに別の関数「$d」のような任意の関数を定義してみたのですが、
こうすると競合以前にプラグインが動作しなくなってしまいました。
【その他】
他に下記のプラグインを導入していますが、
こちらは動作しております。
bxslider(スライダープラグイン)
jquery.matchHeight(ボックスの高さを揃えるプラグイン)
dropdown(ドロップダウンメニューを呼び出すプラグイン)
ofi.min(IEでcss object-fitを適用させるプラグイン)
AとBを競合を起こさずに、同時に利用する方法はありませんでしょうか?
お忙しいところお手数をおかけしますが、
どうぞご指導よろしくお願いいたします。
  • JavaScript

    37369 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13295 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    821 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

1 タイトルをわかりやすいよう修正

Novz

Novz score 22

2018/02/18 13:08  投稿

JQuery drawer.min.jsプラグインとの競合の改善方法について
いつも大変お世話になっております。
WordPressでテーマを作成したのですが、
Jqueryのプラグインがコンフリクトを起こしてしまい、
幾つかのプラグインが同時に利用できない状況です。
起こっている問題
概要
競合しているURL
ttps://goo.gl/wiAuBR
(A)
iscroll.js
ttps://goo.gl/4inz9c
drawer.min.js(スマートフォンでドロワーメニューを出す)
ttps://goo.gl/P7X5ez
```
<script type="text/javascript">
jQuery(document).ready( function( $ ) {
     $('.drawer').drawer();
   });
</script>
```
(B)
パソコン版でスクロールするとヘッダーに固定メニューを表示させる
jquery-fixed.js
ttps://goo.gl/Jz5bVf
スクロールすると右下にトップに戻るボタンを表示する
jquery-scrolls.js
ttps://goo.gl/Zt4pHi
が同時に利用できない状況です。
AとBをheadに記述すると後述のjsファイルが動かなくなる状況です。
他のプラグインを削除したりしてチェックしてみたのですが、
競合を起こしているのは上記のプラグインのみのようでした。
ただ、スマートフォンでみると
drawer.min.js
jquery-scrolls.js
の順で記述すればなぜかどちらも動作します。
【試したこと】
(1)
調べたところ$関数が競合をおこすとのことでしたので、
```
$(function() {
```
```
jQuery(function($)
```
に修正してみましたが解消しませんでした。
(2)
また、
ttps://webcode-lab.com/topics/blogid/8/
を参考に
「$() 関数」の代わりに別の関数「$d」のような任意の関数を定義してみたのですが、
こうすると競合以前にプラグインが動作しなくなってしまいました。
【その他】
他に下記のプラグインを導入していますが、
こちらは動作しております。
bxslider(スライダープラグイン)
jquery.matchHeight(ボックスの高さを揃えるプラグイン)
dropdown(ドロップダウンメニューを呼び出すプラグイン)
ofi.min(IEでcss object-fitを適用させるプラグイン)
AとBを競合を起こさずに、同時に利用する方法はありませんでしょうか?
お忙しいところお手数をおかけしますが、
どうぞご指導よろしくお願いいたします。
  • JavaScript

    37369 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    13295 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    821 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る