• 締切済み

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」というような感じです。つまり片方動作すれば、片方動作せずの状態です。 このエラーを解消する方法はございますでしょうか？アドバイスよろしくお願い致します。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

ANo1です。 No1にも書いておきましたが、jqueryベースのアコーディオンを利用する方法に切り替えることを、強くお勧めします。

  • think49
  • ベストアンサー率59% (285/482)
回答No.3

#2です。 > ここに、以下を追加すればいいんですよね。 本当に #2 を読まれていますか？ 私は「#2のコードをコピペしてください」とは書いていません。 jQueryのコードを置換する例を書いています。 ( jQuery.noConflict(); は確かに追加しますが、それ以外は置換します) 「専門用語だから読めない」とか思い詰めずに、もう一度良く読んでみてください。 どのように置換されているかは、2つのコードを見比べればわかると思いますので。 > jquery-1.4.2.min.jsの中身はいじらなくていいんですよね。 そこはいじらなくて構いませんが、jQueryを呼び出しているコードは全て書き直す必要があります。 jquery.page-scroller-306.js もjQueryのコードっぽいですね。 テキストエディタで「$ → jQuery」を一括置換するという方法がどこかに載っていましたが、そうすると正規表現まで置換されるリスクがあるので、出来れば一つ一つ目で見て置換した方がよいかと。 でなければ、正規表現パターンの \$\s*\( を置換ですかね…。 (それにしたって正規表現パターンにマッチするリスクはあるので、私は目で確認した方が確実だと思いますが)

movt1002
質問者

補足

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> 結果は左下にエラーは出なくなったのですが、ページのトップにスムースに戻る動きができなくなってしまいました。アコーディオンメニューの方は動作します。どこが間違っているのでしょうか。よろしくお願い致します。自分でも頑張って見ます。

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

#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> -------- # 実際にコンフリクトの話を聞くと、$ が敬遠される理由がよくわかりますね…。

movt1002
質問者

補足

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)
回答No.1

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

movt1002
質問者

補足

fujillin様、お返事ありがとうございます。 noConflictの処理はしておりません。といいますか、少々レベルが高すぎて。お指し示して頂いた参考ページを<head>内に写しただけでは、だめでした。宜しければもう少し具体的にお願いできますでしょうか？お手数かけますがよろしくお願いします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScript（ライブラリ）のキャッシュについて

    jQueryやprototypeなどのJavaScriptライブラリを使用して、ホームページに色々な効果をつけています。 その１つで、ナビゲーション箇所に「アコーディオンメニュー」を実装したのですが、ページ遷移する度に読み込みが遅いためか、メニューが全部展開（開いた）状態になってしまいます。 その後３秒～５秒ほどでアコーディオンが閉じた状態になります。 不恰好で困っています。 トップページなど入り口のページはあきらめるとして、他のページに遷移したときは、上記の「メニューが展開する」状態を回避する策はないでしょうか？ jquery.js accordion.js というようにサイトのすべてのページに読み込みをしています。 JavaScriptについては「外部ファイルにするとキャッシュが残る」というように聞いたことがありますが、それは一度閲覧したサイトを次回、訪れた際にキャッシュが残っているということでしょうか？ それともトップページで一度読み込みをすれば、他のページに遷移したときにトップページで既に読み込みをしたjsファイルがキャッシュされており、引き継がれる（再読み込みをしない）、ということでしょうか？ 「アコーディオンがいちいち展開する」ことから、初めて訪れるページは、トップページでもサブページでも、同じjsファイルにもかかわらずいちいち読み込みいくということなのかな・・・と思っているのですが。 JavaScript、JavaScriptライブラリを混同しているような内容で、的はずれな質問をしてしまっているのかもしれませんが、当方、あまり知識を持ち合わせておらず、どうぞご容赦ください。

  • アコーディオンとロールアップの共用について

    今、あるホームページを作っていて、アコーディオンとロールアップの機能を使用したいと思っています。 ロールアップについては今までも使ったことがあり、以下の2つのスクリプトを使用しています。 ○jquery.js　○yuga.js これに、今回はアコーディオンの機能を使いたいので、以下の3つのスクリプトを組み込んで使おうと思いました。 ○accordion.js　○prototype.js　○effects.js で、以下のようにHTMLソースのHEAD内にスクリプトを読み込む記述をして、動作テストを行ったところ、どちらか片方しか動作しないというトラブルが発生しました。 記述の順番を変えると、どちらかが動作するようです。 例1：ロールアップのみ動作する <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> 例2：アコーディオンのみ動作する <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/yuga.js"></script> <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/effects.js"></script> <script type="text/javascript" src="../js/accordion.js"></script> これら2つの機能を同時に使用するにはどうすればいいでしょうか？

  • javascript 動作がうまくいかない

    javascriptは、ほぼわかりません。 参考url http://histerian.net/pallax/ パララックス サイトを構築しておりました。 メニューを押してスクロール移動すると、上部のmenuがアクティブ状態になります。 しかし、下にスクロールしてからメニューを押して、上に移動すると、menuが2つ、アクティブ状態になってしまいます。 ただ、1px上にずらすだけで低いコンテンツのメニューのアクティブが消え、本来のコンテンツのmenuがアクティブになります。 下へスクロールしてから、メニューを押して上に戻ったときに、該当のmenuのみ、アクティブ状態になるようにしたいです。 使用している元は cool-kitten というサンプルです。 url https://www.jqueryscript.net/demo/jQuery-Responsive-Parallax-Scroll... 使用しているjQueryは以下になります。 jquery.easing.1.3.js jquery.stellar.min.js waypoints.min.js 動作を制御しているjavascriptファイルは以下になります。 scripts.js どなたかご教示していただけないでしょうか よろしくお願い致します

  • Flashを使わず動きのあるかっこいいトップページを作成したい

    自社ホームページのトップページ作成を任されているのですが かっこいいトップページになりません。 Flashを使わずにjavascriptで以下の様なトップページ作成を試みています。 http://www.kagetu.com/ 今の所、jquery.cross-slide.jsのajax?を使って画面がスライドするページは できたのですが、スライドが止まって文字が浮かび上がってまた別の画像が スライドするといったような複雑な動きができません。 どなたかここで掲載したようなホームページをjavascriptとかを使って （Flashを使わず無料のツールで）作成する 方法をご存知の方いらっしゃいましたらご教授ください。 ※コードも載せていただけると助かります。

  • JavaScriptの外部ファイル読み込み

    JavaScriptの外部ファイル読み込みについてご教授下さい。 現在、Webサイトを作ろうとPHPとJavaScriptをレンタルサーバーにアップしたのですが、 ローカルではPHPから外部ファイルのJavaScriptを読み込めるのに、 サーバーにアップするとPHPからJavaScriptを読み込めなくなってしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>TEST</title> <meta charset=utf-8" /> <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script> ・・・ 上記のようにしてもjquery-1.4.2.min.jsが読み込まれず、jQueryが使えません。 FireBugでスクリプトを確認すると以下のようなエラーが出ていました。 1Failed to load source for: http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.js ちなみに以下のようにJavaScriptファイルを開こうとするとブラウザは真っ白なのですが、 http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.js テキストファイルに変更したものだと中身を見ることができました。 http://ｘｘｘ.my-sv.net/js/jquery-1.4.2.min.txt ブラウザはFireFox3.0.11とIE8.0の両方でダメでした。 なぜJavaScriptファイルだけ読み込めないのでしょうか。 ご教授お願いいたします。 ※ちなみに、別のレンタルサーバーにアップロードしたら問題なく読み込めました。 しかし、そこにはDBがなかったので、なるべく今のレンタルサーバーを使いたいのです。。

  • 【javascript】２つ同時に上手く動かない

    javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。

  • Jqueryのjavascriptが読み込まれません

    はじめまして。 Jqueryのsuperfishを使用したサイトを作っているのですが、javascriptファイルが読み込まれていないような状態になっています。 具体的には 1）ローカル環境では問題なく読み込まれている 2）サーバにアップすると、同階層の別ページ（A.htmlとします）では機能しているのに、特定のページ（B.html）では読み込まれていない ※A.htmlとB.htmlで同じ効果（superfishによるアコーディオンナビ実装）を得たい 3）A.htmlの<head>内javascriptに関する記述とB.html内同箇所の記述は全く同じ 4）B.html内の他の単独のjavascriptは問題なく読み込まれる という状況です。 この場合どのような原因が考えられるのでしょうか。 javascriptについては全くの初心者であり、どうにも解決できず、困っています。 ちなみに使用しているjqueryはjquery-1.2.6.min.jsです。 （大元であるA.htmlは違う方にコーディングしてもらい、そのデータを元にB.htmlをコーディングする作業をしています） jquery-1.2.6.min.jsもしくはsuperfish.js内に動かすhtmlへのパスが記載されているのかとも思いましたが、知識不足で該当の箇所が見つけられず…。 ご意見を頂ければ幸いです。 どうぞよろしくお願い致します。

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • jqueryとjavascriptの競合？

    どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> 　<div class="header"></div> 　<div class="main">**フロートで左に配置 　　<iframe></iframe> 　</div> 　　//１． 　　//jqueryの「iframe-auto-height」プラグインを使って、 　　//読み込まれた内容に応じてiframeの高さを変えるようにしたい。 　<div class="menu">**フロートで右に配置</div> 　　//２． 　　//jqueryの「portamento」プラグインを使って、 　　//画面が縦長になりスクロールしてもこの「メニュー」が 　　//画面に追従してフロートするように（常に画面上に現れている様に）したい。 　　//３． 　　//このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■　「１．」「２．」のjqueryは、同時にちゃんと動作しました。 　　が、「３．」を加えると「１．」が動きません。 　　「２．」は常に正常に動作します。 　　「１．」と「３．」が競合しているようなのですが、 　　私はみなさんが提供してくださっているスクリプトを“切り貼り”して 　　使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、 　　希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。 　★「３．フロートするメニューボックスの中のリンクから、 　　　表示する内容に応じて高さが可変するiframeの内容を切り替える」 　　　にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> ///　１．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script> 　///３．「リンクでiframe内を切り替える」用。 </head> <body> ～ ～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> 　///　『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。 　///　フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際 　///　は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> 　///　『autoheight』用スクリプト ～ ～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> 　///　『フロートボックス』用読み込み＆スクリプト 　　　　 </body> 内容は以上となります。 何卒よろしくお願いいたします。

  • jquery-1.3.2⇒○ 1.6.4.⇒エラー

    初心者ですすいません。 美しいエフェクトのデモがあったので、実装してみるも、エラーが止まらず。 （コードは基本的にコピペしました） jquery-1.6.4.min.jsをｊquery-1.3.2.min.jsに直したら止まりました。 （デモ解説では、ｊquery-1.3.2.min.jsになっていたので・・・・） 質問 なるべく新しいjquery-1.6.4.min.jsを使用してきたいのですが、ｊquery-1.3.2.min.js用に制作されたコードを使っていくにはどうしたらいいでしょうか？（いちいち、1.6.4と1.3.2の両方を<head>～</head>間に記載しなければいけないでしょうか？）

    • ベストアンサー
    • AJAX

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する