やったよ!! ついに見つけたよ~~!! 何個かのページに書きましたが、前々から、 「prototype.js」系のスクリプトを入れると「jQuery」シリーズが動作不能に陥る解決方法が判りましたよ!! (*゚ o゚*) オオー!
な・なんと、答えは「jQuery」の、本家サイトにありました・・・(゜_゜i)タラー・・・ まぁ~英語で判らないんだけどね~
(゚゚;)\(--;)オイオイ 実際は、グルルン先生に「prototype.js jQuery コンフリクト」で質問するといっぱい答えてくれます。
・・・今までは、検索キーワードが良くなかった為見つけられなかった (^∀^2)、
ちなみに原因は詳しくないので詳しく書けませんが、「$」関数が両方でかぶってしまっているのが原因らしい・・・
そこで解決方法は・・・かぶらないように「jQuery」の「$」関数を変更すれば良い・・・らしい・・・
※結果的にはうまく共存できたのですが・・・自分の環境では、多少副作用がありました (TOT)
prototype.js と jQuery 共存方法説明
その前に、自分の環境説明しときますと、「jQuery」シリーズが4個使用中 詳しくはこちらそして、使いたいのに使えなかった「prototype.js」系のスクリプトが何個かあるのですが、ど~ぅしても諦めきれなかったのが「Scriptaculous」を使ったプラグインなのです。(「Content with show/hide javascript for "more"のカスタマイズ品」 & 「WP-dTree」のエフェクト機能)
それを使えるようにする設定です・・・というか、「prototype.js」系が使えるようになると思うのですが、自分はそれ以外は試していないので・・・(^∀^2)、
<head>~</head>の部分です。(変更前のバックアップは忘れずに~!!)
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
var j$ = jQuery;
</script>
追記・・・その後、自分のソースを見たところ使いたかったプラグインを有効にしたら勝手に「prototype.js」も読み込まれていました。(^∀^2)、・・・・しかも、「jQuery」より後ろに・・・アレ_(・・?..)?アレェ
「jquery.js」を読み込ませたすぐ下に上記の黄色い部分を追記あとは、自分の使用している(<head>~</head>間で読み込ませている)「jQuery」の「js」ファイルの「$(」部分をすべて「j$(」に置き換えます。
それと<head>~</head>間に直接記入してある「jQuery」のスクリプトの「$(」部分もすべて「j$(」に置き換えれば完了です。
※「$(」とは「js」ファイルの中では、「$('ここに文字が入っています')」と書かれている部分の左だけを書いたものです・・・検索置換する時は「$(」で探すといいかも・・・自分の場合はそうしました。
※変更前にちゃんと動いていて、変更後にうまく動かないスクリプトがあったらこちらを参考にしてみてください・・・参考になればいいけど・・・
見事すべてが使えるようになりました~!!!! v(=∩_∩=) ブイブイ!!
・・・しかし喜んだのもつかの間?・・・・自分の場合「firefox」と「safari」と「IE6」・・・たまに「opera」のブラウザで動作確認しているのですが、思わぬ副作用が・・・・
1. 「safari」だけ、「roundcorners canvas」で角丸が表示されない
2. 「safari」だけ、「Sliding Panles」が使用できない
3. 「IE6」だけ、「Content with show/hide javascript for "more"のカスタマイズ品」を有効後、「続きを読む」でページを開かずに下にスライドさせて表示させた場合、「roundcorners canvas」で角丸はできているのだが・・・中の文字が全く表示されない・・・( ̄□ ̄;)!! ページを開けば問題ないのだが・・・
4. 「firefox」だけ、「WP-dTree」のエフェクト機能を有効にするとかなりの確率でツリーが開けなくなる・・・
2. 「safari」だけ、「Sliding Panles」が使用できない
3. 「IE6」だけ、「Content with show/hide javascript for "more"のカスタマイズ品」を有効後、「続きを読む」でページを開かずに下にスライドさせて表示させた場合、「roundcorners canvas」で角丸はできているのだが・・・中の文字が全く表示されない・・・( ̄□ ̄;)!! ページを開けば問題ないのだが・・・
4. 「firefox」だけ、「WP-dTree」のエフェクト機能を有効にするとかなりの確率でツリーが開けなくなる・・・
う~~ん、これで、完璧だ~・・・と思ったのだが、うまくいかないね・・・人生こんなものさ・・・・(T^T)
いつか解決したいと思います・・・・
追記・・・上記 1. 2. はその後解決しました。
1. 番の解決法 知識のない自分が一応「roundcorners canvas」のファイルを除いてみると、「safari」の文字を発見・・・
1. 番の解決法 知識のない自分が一応「roundcorners canvas」のファイルを除いてみると、「safari」の文字を発見・・・
if ($.browser.safari && v == 'rgba(0, 0, 0, 0)')
そしてさらに「msie」の文字も・・・
if (jQuery.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE
・・・あれ? 確か「$」が「jQuery」って意味になってたんだよなぁ??・・・そしてこのページの設定で「j$」が「jQuery」になった・・・これは!! と思い早速
if (jQuery.browser.safari && v == 'rgba(0, 0, 0, 0)')
に変更してみたところ、ばっちり直りました!! それに伴い、2. 番も勝手に直りました!! (笑) ・・・多分「roundcorners canvas」のエラーのせいで表示されなかったのでしょう・・・
※・・・かと言って「$」をすべて変更するのは危険です。うまく動かない時だけ調べましょう~(^∀^)
※・・・かと言って「$」をすべて変更するのは危険です。うまく動かない時だけ調べましょう~(^∀^)
追記・・・その後、3.は違う理由でスタイルシートの「roundcorners canvas」で使用するクラス名のところに「height: 100%;」って追記したら、偶然直りました・・・何ででしょうか? (^∀^2)、 まぁ~よかった よかった!!
4.はこちらのページにも書きましたが、「Grow」のみ使用出来ることが発覚したので、いんちきカスタマイズをしてとりあえず解決?しました。
関係のある記事
3 users の書き込みがあります
[…] prototype.js と jQuery の競合(コンフリクト)解決! & 共存方法 […]
[…] ■prototype.js と jQuery の競合(コンフリクト)解決! & 共存方法 http://le-coeur.net/archives/186 […]
[…] prototype.js と jQuery の競合(コンフリクト)解決! & 共存方法のような、回避方法もあるが、prototype.jsを使用しないLightboxを入れてしまう方法も1つの解決方法。ColorBoxの基本骨格はjquery.min.jsとcolorbox + jquery.colorbox.js + CSSなので、いたってシンプルに使用する事が可能 […]
コメントほしぃ~よぉ~ σ(^◇^;)