jquery ui.resizable でdivをリサイズするとき同時に内部にあるdivをリサイズする方法
- jquery ui.resizable を使用してdivをリサイズする際、内部のdivも同時にリサイズする方法がわかりません。
- proportionallyResizeを使用してみましたが、うまくいきませんでした。
- 他の方法でも構いませんので、divのリサイズと同時に内部のdivもリサイズする方法を教えてください。
- ベストアンサー
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を使う方法でなくても構いません。 方法のわかる方なにとぞよろしくお願いいたします。
- rqg2010
- お礼率77% (283/364)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>>No.1お礼 む～ん、ダメですか。同じファイル構成のはずなんですが。。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Resizable - Synchronous resize</title> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> <script src="../../jquery-1.4.4.js"></script> <script src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script> <link rel="stylesheet" href="../demos.css"> <style> #out { width: 150px; height: 150px; padding: 0.5em; border:3px dotted black; } #inner { height: 150px; border:1px dotted black; } </style> <script> $(function() { $('#out').resizable({ alsoResize: '#inner' }); }); </script> </head> <body> <div id="out"> <div id="inner">inner</div> </div> </div> </body> </html> こちらで検証に使ったソースです。一度試して下さい。
その他の回答 (1)
- my--
- ベストアンサー率89% (91/102)
demo(synchronous-resize.html)にalsoResizeを使った例があります。 $('#out').resizable({ alsoResize: '#inner' }); proportionallyResizeはドキュメントに載ってないですね。旧バージョンでしょうか？
お礼
my--さん、レスありがとうございます。 ＞$('#out').resizable({ alsoResize: '#inner' }); 早速やってみましたが、ダメでした。 ＞proportionallyResizeはドキュメントに載ってないですね。 http://stacktrace.jp/jquery/ui/interaction/resizable.html で、調べたオプションです。 「jQuery UI API 1.8.4 日本語リファレンス」ということですので新しいものと思いますが。 そして、jquery.uiは、 http://jqueryui.com/download から jquery-ui-1.8.7.custom.zip をDLして development-bundle\uiにある jquery.ui.resizable.js を使用しました。 古いものではないと思うのですが。 どうも貴重なアドバイスをありがとうございました。
関連する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 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のdraggable縦書き出来ますか？
プログラム自体初めてなのですが、仕事の関係で作らないといけない事になりました。 目的は、「文字が書かれた札をドラッグで色々と動かして操作したいです。」 jQueryのdraggableを使用して札のようなものをマウスのドラッグで色々と動かしたいと考え 作ってみましたが、札の中がどうしても横書きになってしまいます。 「札の中を縦書きにする方法を教えて頂けないでしょうか？」 基本的な考え方が間違っているかもしれませんが出来るのであればどうか教えてほしいです。 とりあえずここまでは書いています。 質問が分かりづらく申し訳ありません。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Draggable - Default functionality</title> <link rel="stylesheet"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery- 1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <style> #draggable01 { width: 25px; height: 500px; padding: 0.5em; } #draggable02 { width: 25px; height: 350px; padding: 0.5em; } </style> <script> $(function() { $( "#draggable01" ).draggable(); }); </script> <script> $(function() { $( "#draggable02" ).draggable(); }); </script> </head> <body> <div> <div id="draggable01" class="ui-widget-content"> <p>あいうえお</p></div> <div id="draggable02" class="ui-widget-content"> <p>かきくけこ</p></div> </div> </body></html>
- ベストアンサー
- JavaScript
- iframe内部でJquery UI res
以下のように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>
- 締切済み
- JavaScript
- jQuery UI Tabでタブの一つを新しいウインドウで開きたい
jQuery UI Tabでタブの一つを新しいウインドウで開きたい jQuery UI Tabを使用してまして、 タブの一つを<div id="ui-tab-xx">の中に表示ではなくて 新しくウィンドウを開いて表示したいのですが、 どのようにカスタマイズすればできますでしょうか。 JS初心者なのでご教授いただければと思います。 使用しているJSは http://allabout.co.jp/internet/javascript/closeup/CU20000121J/ui.tabs.js こちらから拝借しました。 よろしくお願いいたします。
- ベストアンサー
- 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
- jauery ui dialog 読み込んだ外部htmlファイル内での
jauery ui dialog 読み込んだ外部htmlファイル内でのjqueryの実行 お世話になります。 iwatuturuturu と申します。 jqueryで読み込んだ外部htmlファイル内でのjqueryのセレクターを使用した装飾等ができません。 ［index.html］にてjqueryのloadを使用し、同じ階層内の［text.html］のファイルを読み、それをjQuery uiを使用したdialogで表示させています。 読み込まれたdialog内の要素に装飾を行ないたいと考えておりますが、下記のソースにあります［$("p").css("background-color", "red");］が読み込まれたタイミングで、［$("p")］が読み込まれていない為か背景色の変更が行えません。（jqueryを使用し、テーブルの行を一行毎に色付けをしたりしたいのでこのような質問にしました。） loadなどで外部ファイルを読み込んで、読み込まれた要素にjqueryによる装飾や操作を行いたい場合はどのようなやり方があるのでしょうか？ 【ソース［index.html］】－－－－－－－－－－－－－－－－－－－－－－－－ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link type="text/css" href="../css/common/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery-ui.js"></script> <script type="text/javascript"> $(function(){ $("button").click(function(){ /* dialogを読み込む領域を作成 */ $("body").append("<div id='dialog_window'></div>"); /* loadで外部htmlファイルの読み込み */ $("div#dialog_window").load("text.html"); /* loadで読み込まれたhtmlファイルをdialogとして表示 */ $("div#dialog_window").dialog({ autoOpen: true, width: 1100, }); /* dialog内の装飾 */ $("p").css("background-color", "red"); }); }); </script> </head> <body> <button>ウィンドウopen</button> </div> </body> </html> 【ソース［text.html］】－－－－－－－－－－－－－－－－－－－－－－－－ <p>読み込み完了</p> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ よろしくお願いいたします。
- ベストアンサー
- 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のタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- 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> <!-- jQuery --> <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"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </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> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>
- 締切済み
- JavaScript
お礼
my--さん、早速ご解答ありがとうございます。 ご丁寧にスクリプトまでありがとうございます。 動きました。 UIのファイルは、私が動かないと言った物をそのまま使って my--さんより教えていただいたスクリプトでばっちり動きました。 私の基のスクリプトが何故動かないのか、これから調べてみます。 jquery.ui.resizable.js の他に jquery.ui.draggable.js も組み込んでいますし、 動かないと言って申し出たスクリプトは、他にもgoogoleMapを組み込んでいたり。 その他かなり色々と操作しています。 動くことは確認できたので、一つずつ切り出ししていきます。 どうもありがとうございました。