- 締切済み
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> 内容は以上となります。 何卒よろしくお願いいたします。
- fou
- お礼率93% (41/44)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- notnot
- ベストアンサー率47% (4900/10358)
＞なので、タイトルのように、jqueryとJavascriptは別物（似て非なるもの）という推測のもと、質問させていただいた次第です。 jQueryは、JavaScriptで書かれたライブラリ（関数群）です。 俳句と日本語のような関係か。
- fujillin
- ベストアンサー率61% (1594/2576)
何がどうなっているのかよくわかってませんけれど… まったくの推測のみですが、ひょっとして、jQueryを2回読込んでいませんか？ ご質問のソース内の、 <script type="text/javascript" src="jquery-1.6.4.min.js"></script> と <script src="ｈttps://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> のところですが… 再読込みすると、新しく上書きされるので、それまでの設定が消えてしまう可能性が高いです。 ほかにも考えられる原因はいろいろあると思いますので、違っていたら無視願います。
お礼
>何がどうなっているのかよくわかってませんけれど… ご親切に…、ご回答くださりありがとうございます。。。 私も２回読むことで何か影響はないのかな？とは思いつつ、 それぞれのプラグインの説明通りにやっていまして、 両方のプラグインはとりあえずそれでも正常に動いていたので、 そのままにしておいておりました。 これが、iframe内の切り替えの動作に影響するかどうかは 私自身は分かりませんが、 色々とは試してみたいと思います。 ご指摘ありがとうございました。
- 0909union
- ベストアンサー率39% (325/818)
＞jqueryとjavascriptを混在させたページを作っています １００％の使用ユーザーがそうして使っていますが？ と言うより、そうしないと意味ないし、使えませんよね？ きっと自己顕示欲が強い方が、サンプルコードを提示してくれます。いや、投稿者＝回答者かもね。
お礼
早速ご反応いただき、ありがとうございます。 私自身、質問に書いた通り、詳しいことを分からないまま何となくページを作ってきています。 過去に少しjavascriptは本を買って勉強しかけたのですが、 ちゃんと勉強しないままその時のHP作りは中断したため、 ちゃんとは理解できていません。 そして、何年もHP作りをしていなかったところ、昨年からまた必要に迫られて作成しております。 すると検索などで“jquery”というのをよく目にするようになりました。 ちゃんと調べない内にそのままスクリプトを使わせていただくと、 結構すんなり動くものばかりで便利だなぁと思い、 何かあるとネットで検索し、出てくるものを試していました。 ただ、これがJavascriptと何が違って、どういうものなのかは 未だちゃんと理解できておりません。 なので、タイトルのように、jqueryとJavascriptは別物（似て非なるもの）という推測のもと、質問させていただいた次第です。 javascriptがないとjqueryは使えない と理解しました。 で、そのjqueryのあるプラグイン（これも曖昧な理解ですが…）が、 プラグインでないjavaスクリプト（質問に明記した内容です）の動きを邪魔している。 というような風に思っているのですが…。 これも違いますでしょうか。 なんとかリンクでiframe内を切り替えたいと思っております。
お礼
ご説明いただき、ありがとうございます。 >jQueryは、JavaScriptで書かれたライブラリ（関数群）です。 >俳句と日本語のような関係か。 なんとなく分かったような・・・気がするような・・・ そんな感じでございます。 その決められた新しい？関数（jquery）を用いて、様々な動きを実現するスクリプトをみなさんが作られて公開しているのですね。 なかなかまた一からJavaScriptを勉強して、 「３．」も同時に実現させるようにするのは時間的にも難しいので、 jQuery？プラグイン？で希望の動きをするものを探してみようかとも思います。 ありがとうございました。
補足
（すみません、補足ではないのですが…） 以降、「jQuery」「iframe」で検索していて、 ある方のページで基本的な事に気付かせていただき、 無事希望の形を実現することができましたのでそのご報告と質問締め切りをさせていただきます。 単純にhtmlでリンク元に <a href="" target="iframeの「name」">○○</a> とすれば、 ちゃんと切り替わり、iframeの高さも若干最下部が隠れ気味ではあるものの、 問題なく見られる程度に表示されるようになりました。 基本に立ち返るきっかけを与えていただいたご回答者のみなさまにお礼を申し上げます。 （No.1の方が予見されたように“自己解決”できました…。ｈｔｍｌで） ありがとうございました。