prototipの設定

前へ 次へ
このQ&Aのポイント
  • prototipの設定に関して質問させていただきます。
  • 記述したprototipのコードが正しく動作しない場合の解決方法を教えてください。
  • 詳細なエラーの内容やブラウザのコンソールに表示されているエラーメッセージを教えていただけると解決に役立つかもしれません。
回答を見る
  • ベストアンサー

prototipの設定

質問させていただきます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script src="js/prototip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="http://yourdomain/prototip.css"> <script type="text/javascript"> function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); Event.observe(window, 'load', init, false); </script> </head> <body> <a href="" id="test">test</a> </body> </html> 以上のように記述して、動かしてみたのですが、動きません。 何処が違っているか解るか炊いたら教えていただけ無いでしょうか。

質問者が選んだベストアンサー

  • ベストアンサー
  • auty
  • ベストアンサー率58% (284/486)
回答No.5

次のブラウザでそのまま動くのを確認できています。 ie7.0.6000 Foxfire2.0.0.12 もう一度 <script src="jslib/prototype.js" type="text/javascript"></script> で使われているprototype.jsが、prototype-1.6.0.2.js以降のバージョンであるかを調べてみてください。 Windowの再起動後もなおエラーが出るなら、ブラウザの変更も必要かも知れません。 また ＞＞＞　動作の確認できました。 と ＞＞＞　今度は、ページを開く時にStack overflow at line: 0というメッセージがが出てきてしまう との関連がいまいち分かりません。 エラーメッセージ直後も動き続けますか。 ページを更新したとき何度かだけ動作していますか。 もう2度と動いていませんか。

kairyuu
質問者

お礼

問題解決いたしました。prototypeのバージョンでかなり問題があったみたいです。その部分を修正したら問題が解決しました。 ありがとうございました。

kairyuu
質問者

補足

ページを開いて、ウインドウを開こうと、オンマウスをした時点で Stack overflow at line: 0というエラーが出ます。 その後は、期待したとおりの動きが出来ていて Stack overflow at line: 0は出てきません。なので 開く時（というか初めて処理を動かそうとする時）動作の確認が出来たというのはそういうことです。 ＞＞prototype-1.6.0.2.js以降のバージョンであるかを調べてみてください。 確認しました、バージョンの問題は無いです。 ただ ブラウザはie6.0です。 とある理由で、６、７両方使えるようにする必要があります。 以上補足です。

その他の回答 (4)

  • auty
  • ベストアンサー率58% (284/486)
回答No.4

＞＞＞　それで今度は、ページを開く時にStack overflow at line: 0 というメッセージがが出てきてしまうのです 　　この症状は始めてみるので、ネットで探したところJavaScriptの書き方に問題があるようです。長ければ関連部分だけでも提示していただけると解決が早くなるでしょう。 とりあえず、原因として ・　関数（メソッド）が自分自身を呼び出すことになっている。 ・　関数（メソッド）の利用のみで、定義がない。 等が、考えられると思います。

kairyuu
質問者

補足

ソースを提示します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクロールしても動かないボックスサンプル</title> <script src="jslib/prototype.js" type="text/javascript"></script> <script src="jslib/effects.js" type="text/javascript"></script> <script src="jslib/prototip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/prototip.css"> <script type="text/javascript"> function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); } Event.observe(window, 'load', init, false); </script> </head> <body> 000000000000000 11111111111111111 <hr/> 000000000000000 11111111111111111 <hr/> aaaaaaaaaaccccccccccccccccc <a href="" id="test">test</a> xxxxxxxxxxxxxxxx </body> </html> 以上になっています。

  • auty
  • ベストアンサー率58% (284/486)
回答No.3

とりあえず動作を確認しました。 ・　prototype-1.6.0.2.jsを使ってください。 ・　Event.observe(window, 'load', init, false);を移動します。 サンプルを示します。 --------------------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクロールしても動かないボックスサンプル</title> <script src="js/prototype-1.6.0.2.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script src="js/prototip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/prototip.css"> <script type="text/javascript"> function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); } Event.observe(window, 'load', init, false); </script> </head> <body> 000000000000000 11111111111111111 <hr/> 000000000000000 11111111111111111 <hr/> aaaaaaaaaaccccccccccccccccc <a href="" id="test">test</a> xxxxxxxxxxxxxxxx </body> </html>

kairyuu
質問者

お礼

サンプルありがとうございました。 丁寧に解説していただきとても助かります。 動作の確認できました。 それで今度は、ページを開く時にStack overflow at line: 0 というメッセージがが出てきてしまうのですが、これはどの様に回避すればよいでしょうか？質問ばかりで申し訳ありませんがもう少々お付き合い下さい。

  • auty
  • ベストアンサー率58% (284/486)
回答No.2

使ったことがなくて動きを確認していないので、断片的な指摘となり申し訳ありませんが、次に気がついたのは、 href="​http://yourdomain/prototip.css" は大丈夫ですか。（準備できていますか？） prototip.jsと同じディレクトリに保存して、 href="js/prototip.css" または cssディレクトリに保存して、 href="css/prototip.css" のほうが確実だと思います。 また余分な心配かも知れませんが、のホームページには Prototype 1.6.0.2 を含めると書いてありました。

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

function init() { の 最後の閉じる括弧が抜けているようです。 ----------------------------------------------------------- function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); Event.observe(window, 'load', init, false); } </script>

kairyuu
質問者

お礼

回答ありがとうございます。 う、初歩的ミス・・・・ function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); Event.observe(window, 'load', init, false); } </script> 以上のように変換しました。 変換したところ 「catch ステートメントでは適用されますが、throwステートメントでは適用されません」というエラーが出てきていまだ動かずです。

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

関連するQ&A

  • jqueryのloadで読み込んだページ内でthickboxで画像を表示する方法

    画像表示処理方法で教えて頂ければと思います。 テスト用に２つのファイル(index.html, test.html)を用意しました。 index.htmlで thickboxを使用して画像をクリックすると希望通り （画像がアップ表示）の動作をします。 しかしindex.htmlのloadで test.html読み込んだ時の画像部分が、 target="_self"で押したときの動作になってしまいます。 解決方法、よろしくお願いします。 -----index.html----- <html> <head> <link href="thickbox.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <script type="text/javascript"> <!-- function init(){ $("#Test").load("test.html"); } // --> </script> </head> <body onload="init()"> <div id="Test"></div> <hr> (2)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a> </body> </html> -----test.html----- (1)<a href="test.gif" title="" class="thickbox"><img alt="" src="test.gif" /></a>

  • shadowbox.jsについて

    shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>

    • ベストアンサー
    • CSS
  • Ajaxのウィンドウ表示位置について

    ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？

  • Shadowbox.jx3.0.3が動かない。

    初めまして、このたびlightbox風のjqueryに惹かれて、shadowbox.jsの導入を考えております。。。が、 公式ホームページでadapterに jQuery を選び、ZIPを解凍して、一番簡単そうな画像表示を試みてみましたが上手くいきません。 色々な解説サイトを見ましたが、手順どおりやってはいるつもりなのですがお手上げになってしまいました。 何度試みても、ただ画像にリンクするだけで、lighboxらしい動きになりません。 以下にソースを掲載させて頂きますので、どうかお力添えお願い致します。。 <html> <head> <title>test</title> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init(); </script> </head> <body> <a href="1.jpg" rel="shadowbox" title="My Image">My Image</a> </body> </html> ※index.htmlやshadowbox.css ,shadowbox.jsは全て同階層です。 jqueryもDLして、ヘッダ部分に <script type="text/javascript" src="/jquery-1.5.1.min.js"></script> という一文も入れてみましたが全く動かない状態です。 説明足らずな点も多いと思いますが、どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • thickboxのグループ化がうまくいかない原因は？

    はじめまして。 thickboxと格闘しています・・・ グループ化しなければ、ふつうに表示できるのですが、 グループ化したとたんに、見られなくなります。 これは、なぜなのでしょうか？？？ 特別変わったことは何もしていません。 バッティングするようなjsも、置いてません。 javascriptのことはほとんどわかりませんので、 簡単に教えていただけるととても嬉しいです。 ちなみに・・・ index.html(このページで表示させたい） jquery.js thickbox.css thickbox.js 001.jpg 002.jpg 003.jpg これらをすべて同じレベルに配置しています。 ↓index.htmlは、こんな感じです。 -------------------------------------------------- ～略～ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプル</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <a href="001.jpg" class="thickbox" rel="test" >画像1</a><br> <a href="002.jpg" class="thickbox" rel="test" >画像2</a><br> <a href="003.jpg" class="thickbox" rel="test" >画像3</a> </body> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

  • 教えてください!　lightboxとskitter

    javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>

  • ツリー式 メニューを外部ファイルとして読み込みたい

    ツリー式 メニューを見つけて参考にさせていただいておりますがメニュー項目を外部ファイルにしたく試行錯誤いたしましたがうまく配列に入れることができません。 どなたか詳しい方、ご教授願えないでしょうか？ よろしくお願いいたします。 下記のscriptの menu[0] = "メニュー,0,0"; のmenu配列を外部ファイルにしたい。 <html> <head> <title>menu</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> content="text/javascript"> <script type="text/javascript" src="crossbrow_lib.js"></script> <script type="text/javascript" src="dhtml_lib.js"></script> <script type="text/javascript"> <!-- BrowserCheck(); menu = new Array; ＊＊＊＊＊ここから↓ menu[0] = "メニュー,0,0"; menu[1] = "<a href=test1.html target=_blank>test11</a>,1,1"; menu[2] = "<a href=test2.html target=_blank>test2</a>,1,1"; menu[3] = "TEST3,1,0"; menu[4] = "TEST3-1,2,0"; menu[5] = "<iframe src=test3-1.html width=600 height=480></iframe>,3,2"; menu[6] = "TEST4,1,0"; menu[7] = "TEST4-1,2,0"; menu[8] = "<iframe src=test4-1.html width=600 ＊＊＊＊＊ ここまで height=480></iframe>,3,2"; ExpposinitX =10; ExpposinitY =10; ExpWidth = 600; function init(){ ExplorerTree(); } //--> </script> <script type="text/javascript"> <!-- //--> </script> <style type="text/css"> <!-- --> </style> <link rel="stylesheet" href="style.css" type="text/css"> </head>

  • Javascriptの外部サーバーからの読み込み(greybox)

    いつも参考にさせていただいてます。 greyboxを使ってページを表示したいのですが、 使っているサーバーはjsファイルなどがアップロードできない、CMSサービスのサイトなので、 別のレンタルサーバーにアップロードしたjsファイルを読み込んで動かしたところうまくいきません。 模範例では、 ----------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "./greybox/"; // --></script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> </head> <body> <h1>GreyBox サンプル</h1> <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]"> 毎日就職ナビのページ表示 </a> </body> </html> ----------------------------------- なのですが、パスを絶対パスに変えて ----------------------------------- <link rel="stylesheet" href="http://mydomain/greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "http://mydomain/greybox/"; // --></script> <script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script> <script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/http://mydomain/gb_scripts.js"></script> ----------------------------------- と変更しました。 成功例(jsファイル同一サーバー上)：http://greybox.main.jp/test_ng/index2.html 失敗例(jsファイル別サーバー上)：http://greybox.main.jp/test_ok/index1.html 対応方法をお教え下さい。よろしくお願い致します。

  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか　以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • 外部ファイルを指定するとページ上部に空白が

    bodyやcssでマージンは全てにしているのですが、javascript外部ファイルを読み込ませようとして記述を追加すると上部に空白ができてしまいます。 何が原因なのでしょうか？ ↓ページのソース（都合によりファイル名は全て仮名ですすいません） <head> <title>サンプルページ</title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <script type="text/javascript" src="http://test.com/****1.js"></script> <script type="text/javascript" src="http://test.com/****2.js"></script> <link rel="stylesheet" type="text/css" href="http://test.com/****.css"> <style type="text/css"> <!-- body { background-position: 0px 0px} --> </style> </head> <body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF" text="#333333"> スクリプトの場所は全て絶対パスで指定しています。 また、charsetがeucなのはこのファイルがphpで記述されているためです。 ****1.jsはページで使うスクリプト全て（ポップアップやロールオーバー等）を記述、****2.jsはアクセス解析用のスクリプトを入れています。後者を追加してから空白が出てきたような気がします。 スクリプトの種類によってこういうことが起きるのでしょうか？ ご回答お願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する