frameはnoresizeを指定しなければ、マウスドラックでサイズの変更ができますが、同じような事をframeを使わずにCSSとjavascriptで出来ないものでしょうか?
具体的に言うと、以下に示すhtmlの20%,80%のwidthをマウスドラックで変更できないでしょうか?
<html>
<head>
<style type="text/css">
#f1 {
float:left;
width:20%;
overflow: auto;
background-color : #ffd2ff;
}
#f2 {
float:right;
width:80%;
background-color : #e0fef8;
}
</style>
</head>
<body>
<div id="f1">f1</div>
<div id="f2">f2</div>
</body>
</html>
No.2ベストアンサー
- 回答日時:
コンテンツが多いと動きがぎこちなくなったりします。
特にIEは処理が遅いですから。
それと元々Netscape系に多い(IEでもある)マウスアップの感知タイミングの問題で、
一度クリックしないとマウスアップを感知しない状況が出てしまうケースはこの手のJavaScriptにはつきまといます。
あと、様々なケースに関しては何もテストしていませんので、コンテンツ次第でどうなるか・・・。
<html>
<head>
<style type="text/css">
#f1 {
float:left;
width:20%;
overflow: auto;
background-color : #ffd2ff;
}
#f2 {
float:right;
width:80%;
background-color : #e0fef8;
}
#space {
float:left;
width:5px;
background-color : #ffffff;
cursor:E-resize;
}
</style>
</head>
<body>
<script>
window.onload = function(){
var Drag = 0, i = function(id){ return document.getElementById(id) };
i('space').onmousedown = function(){ Drag = 1; }
document.onmouseup = function(){ Drag = 0; }
document.onmousemove = function(e){
if(!Drag){ return false; }
var ev = window.event || e;
var W = document.body.offsetWidth || document.documentElement.offsetWidth;
var L = parseInt( ev.clientX/W *100, 10);
var R = 100 - L;
if(L >1 && R > 1){
i('f1').style.width = L + '%';
i('f2').style.width = R + '%';
}
}
}
</script>
<div id="f1">f1</div>
<div id="f2">
<div id="space"></div>
f2</div>
</body>
</html>
素早いご回答ありがとうございます。
>それと元々Netscape系に多い(IEでもある)マウスアップの感知タイミングの問題で、
時々くっ付いちゃうんですね。(IE,FF,Operaを試したら、Operaは再現せず)
ActionScript(Flash)で同じような経験があります。そのときは、rereaseOutsideってイベントでDrag = 0って感じで直りました。
No.1
- 回答日時:
思いっきり面倒なことをやればできないことはないですが
苦労のわりに得るものがすくないのでお勧めできません。
とくにブラウザごとに処理がことなるのでかなり煩雑になりそうな
予感がします
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
HTMLタグに複数のクラスを設定...
-
javascriptテキストBOX色を元に...
-
変数名をどのようにつけるのが...
-
HTMLとJavaScriptで作ったタイ...
-
タブで開いてさらにタブ内をア...
-
IFRAMEの表示/非表示を切り替え...
-
removeAttribute()メソッドで削...
-
jQueryで同じid属性が複数あっ...
-
表示・非表示のスクリプトで、...
-
動的にHTMLコンテンツを吹き出...
-
IEの半角スペースの連続とinner...
-
401エラードキュメントを401.ht...
-
javascriptでURLにマウスオーバー
-
複数のリンク画像を一定時間で...
-
javascriptでオブジェクトの重...
-
VBScriptでXMLのデータを取得す...
-
HTMLとJavaScriptで作ったタイ...
-
多次元配列を連想配列へ変換したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
変数名をどのようにつけるのが...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
【HP作成】クリックすると下...
-
jQueryで同じid属性が複数あっ...
-
jqueryを使って無駄なspanタグ...
-
jQueryでクリックされた要素のi...
-
バッチファイルでカウントアッ...
-
[急ぎ] videoタグで埋め込んだm...
-
getElementByIdの戻り値がnull...
-
javascriptでpostした値が取得...
-
jqueryで要素の中身を要素の外...
-
IFRAMEの表示/非表示を切り替え...
おすすめ情報