- 締切済み
javascriptの多用によるページエラーの回避について質問致します
javascriptの多用によるページエラーの回避について質問致します。 私は趣味の傍ら、とあるホームページを運営しているのですが、そのページの中で、ページのトップに戻る時、滑らかにスムースに戻る動きを実現するために、「jquery」の「jquery-1.4.2.min.js」と「jquery.page-scroller-306.js」を使用しています。この時点では、エラーなく動作していたのですが、新たに、サイドメニューの箇所で「アコーディオンのように滑らかに開閉するメニュー」を導入しようと、http://hyper-text.org/archives/2006/12/slide_menu_javascript.shtml のページにある例を参考にして、３つのjsファイル（slidemenu.js）、(prototype.js)、(effects.js)を追加し、なんとか動作確認に成功しましたが、今度はページをトップにスムースに戻る動きができなくなってしまい、左下に「実行しましたが、ページでエラーが発生しました」とエラーが出てしまいます。そのエラーの詳細は「'undefined'は Nullまたはオブジェクトではありません」 「jquery-1.4.2.min.js コード0 」「文字26」というような感じです。つまり片方動作すれば、片方動作せずの状態です。 このエラーを解消する方法はございますでしょうか？アドバイスよろしくお願い致します。
- movt1002
- お礼率0% (0/4)
- JavaScript
- 回答数4
- ありがとう数16
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ANo1です。 No1にも書いておきましたが、jqueryベースのアコーディオンを利用する方法に切り替えることを、強くお勧めします。
- think49
- ベストアンサー率59% (285/482)
#2です。 > ここに、以下を追加すればいいんですよね。 本当に #2 を読まれていますか？ 私は「#2のコードをコピペしてください」とは書いていません。 jQueryのコードを置換する例を書いています。 ( jQuery.noConflict(); は確かに追加しますが、それ以外は置換します) 「専門用語だから読めない」とか思い詰めずに、もう一度良く読んでみてください。 どのように置換されているかは、2つのコードを見比べればわかると思いますので。 > jquery-1.4.2.min.jsの中身はいじらなくていいんですよね。 そこはいじらなくて構いませんが、jQueryを呼び出しているコードは全て書き直す必要があります。 jquery.page-scroller-306.js もjQueryのコードっぽいですね。 テキストエディタで「$ → jQuery」を一括置換するという方法がどこかに載っていましたが、そうすると正規表現まで置換されるリスクがあるので、出来れば一つ一つ目で見て置換した方がよいかと。 でなければ、正規表現パターンの \$\s*\( を置換ですかね…。 (それにしたって正規表現パターンにマッチするリスクはあるので、私は目で確認した方が確実だと思いますが)
- think49
- ベストアンサー率59% (285/482)
#1の補足より。 > お指し示して頂いた参考ページを<head>内に写しただけでは、だめでした。 fujillinさんが紹介されたリンク先のコメントには「jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。」と書かれています。 http://semooh.jp/jquery/ref/cont/with_prototype/ 例えば、以下のように置換します。 -------- 置換前 ** 全ての箇所で$をprototype.jsの動作をさせる場合 次のように記述します。 <script src="prototype.js"></script> <script src="jquery.js"></script> <script><!-- jQuery.noConflict(); $(document).ready(function(){ // ここでは、$はprototypeの動作をします。 // jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。 var foo = $('#foo'); }); //--></script> -------- -------- 置換後 ** 全ての箇所で$をprototype.jsの動作をさせる場合 次のように記述します。 <script src="prototype.js"></script> <script src="jquery.js"></script> <script><!-- jQuery.noConflict(); jQuery(document).ready(function(){ // ここでは、$はprototypeの動作をします。 // jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。 var foo = jQuery('#foo'); }); //--></script> -------- # 実際にコンフリクトの話を聞くと、$ が敬遠される理由がよくわかりますね…。
補足
think49様、お返事有り難うございます。 私のスクリプトを具体的に書きますと、以下の通りです。 <haed> <script src="/js/slidemenu.js" type="text/javascript"></script> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/effects.js" type="text/javascript"></script> <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.page-scroller-306.js" type="text/javascript"></script> </head> ここに、以下を追加すればいいんですよね。 <script><!-- jQuery.noConflict(); jQuery(document).ready(function(){ // ここでは、$はprototypeの動作をします。 // jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。 var foo = jQuery('#foo'); }); //--></script> やはりエラーが出てしまいます。jquery-1.4.2.min.jsの中身はいじらなくていいんですよね。 色々検索して、参考ページを見ましたが。アドバイスお願いします。
- fujillin
- ベストアンサー率61% (1594/2576)
jqueryとprototypeをそのまま利用するとコンフリクトする可能性が高いです。 noConflictなどの処置をなさっているでしょうか？（参考サイト参照） http://semooh.jp/jquery/ref/cont/with_prototype/ アコーディオンメニューであれば、jqeryベースのものもたくさん作られていると思いますので、そのようなものを探して利用されるのも一法かと思います。 http://www.bing.com/search?srch=105&FORM=AS5&q=jquery+%e3%82%a2%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%82%aa%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc
補足
fujillin様、お返事ありがとうございます。 noConflictの処理はしておりません。といいますか、少々レベルが高すぎて。お指し示して頂いた参考ページを<head>内に写しただけでは、だめでした。宜しければもう少し具体的にお願いできますでしょうか？お手数かけますがよろしくお願いします。
補足
think49様、返事が遅れまして申し訳ございません。 私なりに、think49様のご助言にお応えしようと一晩、熟考したのですが。 まず最初に、jQueryを呼び出しているコードを探す事からはじめました。私の利用しているのはページのトップにスムースに戻すものなので、HTMLコードの <a href="#top">ページのトップに戻る</a> ぐらいのもので、JSスクリプトで書かれているものは、think49様のご指摘通り、jquery.page-scroller-306.jsしかありません。jquery.page-scroller-306.js のコードの正規表現以外の $ をjquery に置き換えました。そして、以下のように<head>内に書きました。 <head> <script src="/js/slidemenu.js" type="text/javascript"></script> <script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/effects.js" type="text/javascript"></script> <!-- 以上の３つはアコーディオンメニューで使うjsファイルで jquery-1.4.2.min.jsより前に置いています--> <script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="/js/jquery.page-scroller-306.js" type="text/javascript"></script> <script><!-- jQuery.noConflict(); jQuery(document).ready(function(){ // ここでは、$はprototypeの動作をします。 // jQueryオブジェクトとしての$は一切使えず、その場合は$()ではなくjQuery()と表記する必要があります。 var foo = jQuery('#foo'); }); //--></script> </head> 結果は左下にエラーは出なくなったのですが、ページのトップにスムースに戻る動きができなくなってしまいました。アコーディオンメニューの方は動作します。どこが間違っているのでしょうか。よろしくお願い致します。自分でも頑張って見ます。