締切済み

iframe内部でJquery UI res

2012/04/27 10:21

以下のようにiframe内の画像にはjquery ui resizableが有効になりません。なぜでしょうか。iframe外の画像には有効です。　 <!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" /> <title>無題ドキュメント</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.8.19/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.19/themes/base/jquery-ui.css" /> <script> $(function() { $("#ifm").contents().find("body").append('<img src="../static/image/logo.gif" class="resizable" />'); $( ".resizable" ).resizable(); }); </script> </head> <body> <img src="../static/image/logo.gif" class="resizable" width="200" height="50"/> <iframe id="ifm" ></iframe> </body> </html>

h275v
お礼率25% (1/4)

JavaScript
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

fujillin
ベストアンサー率61% (1594/2576)

2012/04/27 19:15 回答No.2

#1です。大切なことを書き忘れてしまいました。仮にiframe内の要素を指定できたとしても、resizable();で呼ばれているjquery ui resizable本体が、別ドキュメントに対応できる記述のしかたになっていないとやはり動作しないでしょう。（documentの参照先が違ってしまうので）ドキュメントの位置に関係なく動作できるようにスクリプトを作成しておくことは可能ですが、jquery ui resizableがそのようになっているかは知りません。

fujillin
ベストアンサー率61% (1594/2576)

2012/04/27 11:31 回答No.1

理由を簡単に言うと、「別ドキュメントだから」でしょうか。 $(".resizable")だとそのドキュメント内の要素しか対象にならないので、試しに　$(".resizable").click(function(){alert("clicked");}); とでもしてみれば、わかるかと思います。　$(".resizable",$("#ifm").contents().find("body")).click(function(){alert("clicked2");}); だと、追加した画像クリックで反応するかと思います。ついでに言うなら、iframe内のドキュメントの取得方法がブラウザによって異なりますので、ご提示の　$("#ifm").contents().find("body") ではfx系では取得できないようです。ｊＱｕｅｒｙでどうなっているかは知りませんが、 // Mozilla 系　iframe.contentWindow;　　　 // window 参照　iframe.contentDocument;　　// document 参照 // IE 系　iframe.contentWindow;　　　　// window 参照　iframe.contentWindow.document;　// document 参照となっているようです。

質問者

お礼 2012/04/27 18:28

回答ありがとうございます。　お返事遅れてすみません。いま時間がないのでお礼のみで失礼します。

関連するQ&A

jquery uiが動かない
jquery uiが動きません。何度も見直し、プログラムを書いてもどこがいけないかわかりません。教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
jqueryの tabを使用して外部リンクをしたい
jqueryの tabを使用して外部リンクをしたいこのサイトの下の方のマウスオーバーで切り替えを使用しているのですがタブをマウスオーバーで切り替えつつ、タブ部分をクリックしたら外部にリンクさせるようするにはどうしたらいいでしょうか？ http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。初心者で大変申し訳ありませんが、ご教授ください。とても困っています。よろしくお願いいたします。 ************************************************************* <!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" /> <title>無題ドキュメント</title> <head>  <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript">  </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ１</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ１内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> </div> </div> </body> </html>
- 締切済み
- JavaScript
日付の加算結果を表示する方法について
日付の加算結果を表示する方法について、お伺い致します。下記のようなコードにてカレンダーから任意の日付を選択すると、別の枠に、60日後の日付と90日後の日付が自動的に表示されるようにしたいのですが、どのようにしたらよいでしょうか。お分かりになる方、アドバイス宜しくお願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta charset="UTF-8" /> <title></title> <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui..."></script> <script type="text/javascript"> $(function() { $.datepicker.setDefaults($.datepicker.regional['ja']); $('#date').datepicker({ dateFormat: 'yy/mm/dd', showOn: 'both' ,showButtonPanel:'show' }); }); </script> </head> <body> <form method="POST" action=""> <label> <input type="text" id="date" /> </label> </form> </body> </html>
- ベストアンサー
- JavaScript
jquery ulのtab切り替えについて
昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。書籍のwebcreators６月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。ソースは <!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=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ１</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ２</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか？皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。
- 締切済み
- JavaScript
jQuery UIのdraggableについて
こちらでは初めて質問させていただきます。よろしくお願いします。現在、jQuery UI の draggable を使用してWebブラウザ上でのドラッグ＆ドロップを実装中なのですが、期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内でスクロール（必須です）させています。ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロールしませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript
jqueryについて質問です。
jqueryについて質問です。過去こちらにお世話になりまして、一つの質問を解決していただきました。しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!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=SHIFT_JIS" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){ 　　　　　new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか？ちなみにこのページのscript自体はこの記事をのものです。組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html
- 締切済み
- JavaScript
jqueryのcolorboxを読込直後に開きたい
ある書籍に記載されていた、以下のサンプルがあります。このサンプルは、画像をクリックすると、colorboxプラグインを使用してモダルダイアログが開きます。これを、ページを開いた直後（クリックせずに、自動的）に開きたいのです。その方法をお教えいただけませんでしょうか。よろしくお願いいたします。 <!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> <title>jQuery - colorbox plugin (Flash Video : Embedded)</title> <link href="base.css" rel="stylesheet" type="text/css" />  <script src="../../scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.colorbox-min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('a.youtube').colorbox(); }); </script> </head> <body> <p> <a class='youtube' href="content/flash.htm" title="Martin Luther King, Jr.'s last speech"> <img src="http://i4.ytimg.com/vi/o0FiCxZKuv8/default.jpg" alt="YouTube (Embedded)" /> </a> </p> </body> </html>
- ベストアンサー
- JavaScript
jQueryで質問です。
jQueryで質問です。オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。宜しくお願いします。
- ベストアンサー
- JavaScript
JQuery の CrossSlideを設置したのですが IEでだけ表示できません。
JQuery の CrossSlideを設置したのですが IEでだけ表示できません。 FireFoxでもSafariでも表示できています。ブラウザのエラーでは「メッセージ: 'plan[...].src' は Null またはオブジェクトではありません。」とでています。 phpファイルに設置しているのですが、それが原因なのでしょうか? IEはバージョン8です。 javascriptがまったく分からない為、設置されている方のソースをそのままコピペで使用しているのですが... 原因が分かる方おられましたら、アドバイスおねがいします。ソース -head- <!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=euc-jp" /> <title>○○</title> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.cross-slide.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> -body- <script type="text/javascript"> $(function(){ $("#topimgbox").crossSlide({ sleep : 15, fade : 2 },[ { src : '1.jpg' }, { src : '2.jpg' }, ]); }); </script> <div id="topimgbox">Loading...</div> 設置されている方々のサンプルはIEで見ましたので、自分の設置の仕方が原因だと思うのですが...
- ベストアンサー
- JavaScript
jquery ui.resizable 使い方
jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズしたいのですができません。 <div id="out"> <div id="inner"> </div> </div> で、 http://stacktrace.jp/jquery/ui/interaction/resizable.htmlを参考にして、 $('#out').resizable({proportionallyResize:["#inner"]}); としてみたのですが、#outは、リサイズできますが、#innerを同時にリサイズできません。組み込んだjs、cssは、 http://jqueryui.com/download よりDLした、jquery-jquery-ui-1.8.7-0-g12bea93.zipに納められていた jquery.dimensions.js jquery.ui.core.js jquery.ui.widget.js jquery.ui.mouse.js jquery.ui.resizable.js jquery.ui.draggable.js 及び jquery.ui.resizable.css を、記載の順に組み込みました。行いたいことは、divをリサイズしたとき、その内部のdivも同時にリサイズすることです。 proportionallyResizeを使う方法でなくても構いません。方法のわかる方なにとぞよろしくお願いいたします。
- ベストアンサー
- JavaScript

iframe内部でJquery UI res

みんなの回答

お礼 2012/04/27 18:28

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

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

iframe内部でJquery UI res

みんなの回答

お礼 2012/04/27 18:28

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

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

カテゴリ
一覧

専門家に質問してみよう
専門家登録