ジャバスクリプトが作動しません。

このQ&Aのポイント
  • ジャバスクリプトが正常に作動しない問題が発生しています。
  • ジャバスクリプトの記述順序を変更しても、後ろに記述したコードしか作動しません。
  • 正しい動作をするためには、記述順序やタグの設定に注意が必要です。
回答を見る
  • ベストアンサー

ジャバスクリプトが作動しません。

初めまして、素人なので的外れな質問だったら恐縮です。 以下のようにジャバスクリプトを2つ記述しましたが、後ろに記述した1つしか作動しません。 記述の順番を入れ替えても、やはり後ろに記述した方しか作動しません。 何が悪いのか、どなたか教えて頂けますでしょうか? <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ホームページテンプレート</title> <meta name="description" content="説明を入れます" /> <meta name="keywords" content="キーワード" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/script.js"></script> <link href="css/gallery11.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/glider.js"></script> <script type="text/javascript"><!-- Event.observe(window, "load", function(){ new Glider("album1", { duration:1.0 } ); }); // --></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#viewer'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> </head>

  • 102z
  • お礼率18% (25/132)

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

  • ベストアンサー
  • warpspace
  • ベストアンサー率56% (83/147)
回答No.1

prototype.jsとjQueryは競合(コンフリクト)します。共存させるためには、おまじないが必要です。 おまじない、してますか?。

参考URL:
http://www.css-lecture.com/log/javascript/029.html
102z
質問者

お礼

ご助言ありがとうございます。 おかげでうまく動きました。 感謝です。

関連するQ&A

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1~4.js の行を全てコメントアウトすると、エラーはでません。 1~4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1~4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • スクリプトエラーについて

    メールフォームをmailformpro2というフリーのものをつかって、自分なりにホームページビルダーでカスタマイズしているのですが、最終的にプレビューしてみるとスクリプトエラーが出てしまいます。 エラーはこのようなものです。 ライン 2 文字  1 エラー 文字が正しくありません。 コード 0 2行目の一文字目ということだと思うのですが、何が原因かわかりません。 それともうひとつ、「お問い合わせ」というタイトルにしているのですが、これも原因がわからないのですが、プレビューをしてみると問い合わせの後に入力していない文字が出て「問い合わせ3.0.0」が表示されます。 これもスクリプトエラーが原因なのでしょうか? 以下が、その部分を含んでいると思われるHTMLです。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>お問い合わせ</title> <meta name="revisit_after" content="7 days" /> <meta name="robots" content="ALL" /> <meta http-equiv="pragma" content="no-cache" /> <link rel="index" href="index.html" /> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="commons/_include_wide.css" type="text/css" /> <meta name="Description" content="お問い合わせ" /> <!--[メールフォームプロ・参照ファイルここから]--> <link rel="stylesheet" href="commons/mailform.css" type="text/css" /> <script type="text/javascript" src="commons/jquery.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.lang.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mfp.extensions.js" charset="UTF-8"></script> <script type="text/javascript" src="commons/mailform.js" charset="UTF-8"></script> <script type="text/javascript" src="postcodes/get.cgi?js" charset="UTF-8"></script> <!--[メールフォームプロ・参照ファイルここまで]--> </head> <body> <div id="wrapper"> <div id="header"> <h1 id="title">お問い合わせ <script type="text/javascript" src="commons/mfp.version.js"></script></h1>             <div>お電話でのお問い合せは ***-***-**** (月曜日~金曜日/午前9時~午後6時)までお問い合わせください。</div> </div>

  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • ファイヤーフォックスでCSSが機能しません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • IEだけjsファイルを読み込まない指定

    よろしくお願いいたします。 IEだけに適用させたくないjsファイルがあり、 HTMLファイルの<head></head>内に、下記のように記述してみたのですが、 <!--[if !IE]> <script type="text/javascript" src="aaa.js"></script> <![endif]--> IEだけでなく他のすべてのブラウザで適用されなくなってしまいました。 書き方が間違っているのでしょうか・・? ソースは下記のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="Description" content="あああ" /> <meta name="Keywords" content="あああ" /> <title>タイトル</title> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" /> <link href="import.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!--[if !IE]> <script type="text/javascript" src="aaa.js"></script> <![endif]--> 以下略 また、こちらのページを参考に記述いたしました。 http://blog.playunderworld.com/web/ie-conditional-comment/ もし原因をご存知でしたらお教えいただけたらと思います。 どうぞよろしくお願いいたします。

  • crossSlideがうまく機能しないです;

    簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。

  • JSの記述を別ファイルに移す

    下記のHTML内の <script type="text/javascript">~</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

  • jqueryとlightboxが一緒に動作しない

    jqueryとlightboxを1頁内に記述しているのですが、どちらか一方だけしか動作しません。 jqueryの記述の箇所とlightboxの記述の箇所を上下させると片方が動作し、片方が動作しないという具合です。 最後に設定した方が実行されるようです。どこを修正すればいいのかまったくわかりません。 両方動作させることはできませんか? ソースコードは以下のようになっています。 <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta name="Keywords" content="XXX,XXX" /> <meta name="Description" content="XXX,XXX" /> <title>XXXXXX</title> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="XXX.css" type="text/css" /> <script src="http://code.jquery.com/jquery-1.6.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> <!--menu_headクラスを持つp要素にマウスオーバーされた時に、menu_bodyクラスを持つ要素をスライドする--> $(function() {   $("#menu_list p.menu_head").mouseover(function() {     $(this).css({backgroundImage:"url(img/left-side-a.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");     $(this).siblings();   }); }); </script> <!-- コメント --> <link href="css/lightbox.css" type="text/css" rel="stylesheet" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <!-- コメント --> <style type="text/css"> /* */ }/* <![CDATA[ */ a img{border:0 none} /* ]]> */ </style> </head> 宜しくお願いします。

  • metaタグについて

    xhtml、strictで作っているのですが、metaで疑問に思ったので質問させていただきます。 CSSやJavascriptを外部ファイルにしていても <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> の記述は必要なんでしょうか?

    • ベストアンサー
    • HTML
  • ModalBoxのIEでの表示について

    質問です。 javascriptの「ModalBox」についてなのですがModalBox内で指定したhtmlファイルがIE7では表示されません。Firefoxでは表示されるのですが・・・なぜでしょう? 一応javascriptは表示され上からウィンドウは表示されるのですが中身の内容がでてきません(Firefoxなら表示されます) ソースですが 表示するボタンがある側↓----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ModalBox サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="modalbox.css" type="text/css" media="all"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javascript" src="modalbox.js"></script> </head> <body> <h1>ModalBoxサンプル</h1> <a href="sample.html" title="Sample 1" onclick="Modalbox.show(this.href, this.title); return false;">ダイアログを表示</a> </body> </html> --------------------------- 表示されるhtml側↓ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> サンプル </body> </html> ----------------------------- となっています。 調べたところIE7にも対応しているとの事なのですが何故でしょうか?

専門家に質問してみよう