どなたかお知恵をお貸しくださいませ。
jqueryとjavascriptを混在させたページを作っています。
ファイルは全て同一サーバー内です。
◆希望ページ構成
<body>
<div class="wrap">
<div class="header"></div>
<div class="main">**フロートで左に配置
<iframe></iframe>
</div>
//1.
//jqueryの「iframe-auto-height」プラグインを使って、
//読み込まれた内容に応じてiframeの高さを変えるようにしたい。
<div class="menu">**フロートで右に配置</div>
//2.
//jqueryの「portamento」プラグインを使って、
//画面が縦長になりスクロールしてもこの「メニュー」が
//画面に追従してフロートするように(常に画面上に現れている様に)したい。
//3.
//このメニュー内のリンクから「iframe」内の内容を切り替えたい。
</div>
</body>
■ 「1.」「2.」のjqueryは、同時にちゃんと動作しました。
が、「3.」を加えると「1.」が動きません。
「2.」は常に正常に動作します。
「1.」と「3.」が競合しているようなのですが、
私はみなさんが提供してくださっているスクリプトを“切り貼り”して
使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、
希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。
★「3.フロートするメニューボックスの中のリンクから、
表示する内容に応じて高さが可変する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>
/// 1.「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。
<script type="text/javascript">
<!--
function ifr(jpURL){
panel.location = jpURL;
}
// -->
</script>
///3.「リンクで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 …
<script src="http://portamento.js"></script>
<script>
$('#menu').portamento({gap: 100});// set a 100px gap rather than the default 10px
</script>
/// 『フロートボックス』用読み込み&スクリプト
</body>
内容は以上となります。
何卒よろしくお願いいたします。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
>なので、タイトルのように、jqueryとJavascriptは別物(似て非なるもの)という推測のもと、質問させていただいた次第です。
jQueryは、JavaScriptで書かれたライブラリ(関数群)です。
俳句と日本語のような関係か。
この回答への補足
(すみません、補足ではないのですが…)
以降、「jQuery」「iframe」で検索していて、
ある方のページで基本的な事に気付かせていただき、
無事希望の形を実現することができましたのでそのご報告と質問締め切りをさせていただきます。
単純にhtmlでリンク元に
<a href="" target="iframeの「name」">○○</a>
とすれば、
ちゃんと切り替わり、iframeの高さも若干最下部が隠れ気味ではあるものの、
問題なく見られる程度に表示されるようになりました。
基本に立ち返るきっかけを与えていただいたご回答者のみなさまにお礼を申し上げます。
(No.1の方が予見されたように“自己解決”できました…。htmlで)
ありがとうございました。
ご説明いただき、ありがとうございます。
>jQueryは、JavaScriptで書かれたライブラリ(関数群)です。
>俳句と日本語のような関係か。
なんとなく分かったような・・・気がするような・・・
そんな感じでございます。
その決められた新しい?関数(jquery)を用いて、様々な動きを実現するスクリプトをみなさんが作られて公開しているのですね。
なかなかまた一からJavaScriptを勉強して、
「3.」も同時に実現させるようにするのは時間的にも難しいので、
jQuery?プラグイン?で希望の動きをするものを探してみようかとも思います。
ありがとうございました。
No.2
- 回答日時:
何がどうなっているのかよくわかってませんけれど…
まったくの推測のみですが、ひょっとして、jQueryを2回読込んでいませんか?
ご質問のソース内の、
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
と
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
のところですが…
再読込みすると、新しく上書きされるので、それまでの設定が消えてしまう可能性が高いです。
ほかにも考えられる原因はいろいろあると思いますので、違っていたら無視願います。
>何がどうなっているのかよくわかってませんけれど…
ご親切に…、ご回答くださりありがとうございます。。。
私も2回読むことで何か影響はないのかな?とは思いつつ、
それぞれのプラグインの説明通りにやっていまして、
両方のプラグインはとりあえずそれでも正常に動いていたので、
そのままにしておいておりました。
これが、iframe内の切り替えの動作に影響するかどうかは
私自身は分かりませんが、
色々とは試してみたいと思います。
ご指摘ありがとうございました。
No.1
- 回答日時:
>jqueryとjavascriptを混在させたページを作っています
100%の使用ユーザーがそうして使っていますが?
と言うより、そうしないと意味ないし、使えませんよね?
きっと自己顕示欲が強い方が、サンプルコードを提示してくれます。いや、投稿者=回答者かもね。
早速ご反応いただき、ありがとうございます。
私自身、質問に書いた通り、詳しいことを分からないまま何となくページを作ってきています。
過去に少しjavascriptは本を買って勉強しかけたのですが、
ちゃんと勉強しないままその時のHP作りは中断したため、
ちゃんとは理解できていません。
そして、何年もHP作りをしていなかったところ、昨年からまた必要に迫られて作成しております。
すると検索などで“jquery”というのをよく目にするようになりました。
ちゃんと調べない内にそのままスクリプトを使わせていただくと、
結構すんなり動くものばかりで便利だなぁと思い、
何かあるとネットで検索し、出てくるものを試していました。
ただ、これがJavascriptと何が違って、どういうものなのかは
未だちゃんと理解できておりません。
なので、タイトルのように、jqueryとJavascriptは別物(似て非なるもの)という推測のもと、質問させていただいた次第です。
javascriptがないとjqueryは使えない
と理解しました。
で、そのjqueryのあるプラグイン(これも曖昧な理解ですが…)が、
プラグインでないjavaスクリプト(質問に明記した内容です)の動きを邪魔している。
というような風に思っているのですが…。
これも違いますでしょうか。
なんとかリンクでiframe内を切り替えたいと思っております。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
base64encodeでの文字化けについて
-
JavaScriptで背景や文字色を色→...
-
プラグイン無しでContactform7...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
bodyにidをつける理由は何ですか?
-
javascriptでalertの文字列をコ...
-
window.openの後にエンコードを...
-
JavaScriptでiframeの内容を「...
-
getElementsByNameで要素が取得...
-
複数のページ(html)のvalueを...
-
【SSI】include file、include ...
-
document.getElementById
-
【javascript クロスブラウザ...
-
SCRIPT5007: 未定義または NULL...
-
Dreamweaver で 外部JSを読み込...
-
スマホ上で、左右スワイプで次...
-
マウスクリックした地点のテキ...
-
ページによって表示位置がずれ...
-
確認ダイアログで「キャンセル...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
jquery ui.resizable 使い方
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
bxslider、画像が3枚以上になる...
-
Jqueryの干渉について
-
DreamWeaverでJS
-
複数のバージョンのjQueryを同...
-
マウスオーバー+クリカブルマッ...
-
マスターページでのJavaScriopt...
-
jqueryのcolorboxを読込直後に...
-
javascript外部読み込みの際の引数
-
lightbox2 表示の不具合
-
jsファイルで配列を定義し、j...
-
jqueryを2つ設置した事で片方...
-
<script>タグというのはどこか...
-
Javascriptがうまく動作しません。
-
同一HTML内に複数のjQueryを作...
-
jqueryについて(Lightboxとbxs...
-
colorboxの直接呼び出し方法に...
おすすめ情報