ここから質問投稿すると、最大4000ポイント当たる!!!! >>

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>

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 1
この回答へのお礼

素早いご回答ありがとうございます。

>それと元々Netscape系に多い(IEでもある)マウスアップの感知タイミングの問題で、

時々くっ付いちゃうんですね。(IE,FF,Operaを試したら、Operaは再現せず)

ActionScript(Flash)で同じような経験があります。そのときは、rereaseOutsideってイベントでDrag = 0って感じで直りました。

お礼日時:2008/03/10 18:24

思いっきり面倒なことをやればできないことはないですが


苦労のわりに得るものがすくないのでお勧めできません。
とくにブラウザごとに処理がことなるのでかなり煩雑になりそうな
予感がします
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Q【Javaxcript CSS】擬似フレームサイズをマウスで変更したい

擬似フレームのサイズをマウスで変更したいです。

以前「CSSで指定したwidthをマウスで変更したい」
(http://oshiete1.goo.ne.jp/qa3849904.html)
で質問し、頂いたズバリ回答(以下)で実現できるのですが、使っているとマウスが時々くっついてしまいます。
これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか?

<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>

擬似フレームのサイズをマウスで変更したいです。

以前「CSSで指定したwidthをマウスで変更したい」
(http://oshiete1.goo.ne.jp/qa3849904.html)
で質問し、頂いたズバリ回答(以下)で実現できるのですが、使っているとマウスが時々くっついてしまいます。
これは、しょうがない問題と諦めていたのですが、なんとかならないものでしょうか?

<html>
<head>
<style type="text/css">
#f1 {
float:left;
width:20%;
overflow: auto;
background-color : #ffd2ff;
}

#f2 {
float:right;
wi...続きを読む

Aベストアンサー

IE のドラッグアンドドロップモードに入ったときイベントがこなくなる模様。

加えて、ドラッグアンドドロップにはリークがあるため、せっかくなのでまとめて解除。
<body ondragstart="event.returnValue = false;">
cf.
http://support.microsoft.com/kb/900856/ja

または、
/*@cc_on@*/
/*@if(@_jscript_version > 5.5) document.attachEvent('ondragstart', function(e){ e.returnValue = false; } ); @*/

document.onmousedown, document.ondragstrat などのプロパティを使用する場合は、すでに登録された関数を削除しないように気をつけてください。それから、これらは標準プロパティではないので(Not part of specification.)その辺も使用時の考慮に入れておいたほうが良いと思います。
cf.
https://developer.mozilla.org/En/DOM/Element.onmousedown

IE のドラッグアンドドロップモードに入ったときイベントがこなくなる模様。

加えて、ドラッグアンドドロップにはリークがあるため、せっかくなのでまとめて解除。
<body ondragstart="event.returnValue = false;">
cf.
http://support.microsoft.com/kb/900856/ja

または、
/*@cc_on@*/
/*@if(@_jscript_version > 5.5) document.attachEvent('ondragstart', function(e){ e.returnValue = false; } ); @*/

document.onmousedown, document.ondragstrat などのプロパティを使用する場合は、すでに...続きを読む

Qdiv領域をウインドウサイズに合わせる

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</div>
<div id="right">3</div>


【CSS側】

html,body{
  height:100%;
  width:100%;
      }
div#left{
  width:150px;
  height:100%;
  float:left;
}
div#center{
  width:160px;
  height:100%;
  float:left;
}
div#right{
  width:100%;
  height:100%;
  float:left;
}

divタグで生成された3つの領域を横に並べたいのですが、
左2つは幅をピクセル指定で固定し、3つめをウインドウサイズに合わせて残りの幅全てを使う、という指定はどうすればいいでしょうか?
高さもやはりウインドウサイズにあわせるようにしたいです。
また、左2つの領域は固定したまま、3つめの領域のみスクロールができるようしたいです。

現在下記で試していますが、うまくいきません。
お分かりになる方、知恵をお貸しくださいo(_ _*o)


【HTML側】

<div id="left">1</div>
<div id="center">2</...続きを読む

Aベストアンサー

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )]より

 それはともかく、HTMLはワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )のようなデザインのためではありません。これを最も間違える部分です。

 ですのでマークアップは(インデントがわかりやすいようにタブを全角スペースで置き換えてあります)
<div class="section">
 <h1>サンプル</h1>
 <div class="body">
  <h2>見出し</h2>
  <p>段落</p>
  <p>段落</p>
 </div>
 <div class="nav">
  <ul>
   <li>あいう</li>
   <li>えおか</li>
  </ul>
 </div>
 <div class="contentTable">
  <h2>目次</h2>
  <ol>
   <li>きくけ</li>
   <li>こさし</li>
  </ol>
 <div>
</div>
</body>


とかになるはずですね。HTMLは文書構造を示すもの。CSSはプレゼンテーションを示すものという明確な区別があります。id=leftなんて、しないこと。先で右に配置したくなったらどうするの・・

 さて、div要素の幅はウィンドウ幅を認識できますが、高さはウィンドウの高さを認識しません。IEの互換モードにすれば、IEのバグ(仕様?)でウィンドウ高さを使えます。そのときdivの親要素がbodyなので、body{height:100%;}が必要。
 ★ただしこの方法は非推奨です。他のブラウザではうまくいきません。

 ディスプレイ幅が小さなブラウザ、あるいは目が悪くてフォントを拡大して見られる訪問者のことも考えれば高さは指定すべきではありません。

 よって幅だけを指定する方法を上記HTMLでしたら
html,body{margin:0;padding:0;}
div.section{width:100%;position:relative;background-color:gray;padding-left:320px;}
div.section div.nav,
div.section div.contentTable{position:absolute;top:0px;height:1000px;}
div.section div.nav{left:0px;width:150px;background-color:green;}
div.section div.contentTable{left:150px;width:160px;background-color:blue;}
でよい。

 floatは、ここで使うべきじゃありません。あくまで文章中の画像の周囲に本文を回りこませるためや(小さなブロックをウィンドウ幅に合わせて並べるとか)に使うものです。もし本文でfkoatの必要がでてきたとき、clearできなくなっちゃう。


 

できません。
 そうなるとHTMLではなくてPDFなどの他の仕様の範疇です。
 HTMLは、元来さまざまなプラットホームで利用できるように考案されたものです。すなわちさまざまな解像度、ウィンドウ幅、点字端末、読み上げブラウザ・・検索エンジンも・・
 HTMLの基本中の基本です
【引用】____________ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機...続きを読む

Qtableのcellpadding="0" cellspacing="0"をCSSで

tableのcellpadding="0" cellspacing="0"をCSSで設定する方法を検索したところ、
border-collapse:collapse;
border-spacing:0;
というアドバイスが記載されていました。
実際に使ってみたのですが、
どうしてもセル余白とセル間隔が発生してしまいます。
どうしたらよいですか。

Aベストアンサー

border-spacingはborder-collapseの値がseparateのときしか有効にならないそうです。
http://www.htmq.com/style/border-spacing.shtml

サンプルが
http://www.htmq.com/style/border-collapse.shtml
にあるので参考にしてください。

# それにしてもこんなプロパティがあるとは知らなかった…

参考URL:http://www.htmq.com/style/border-spacing.shtml

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qページ読み込み時に自動的にsubmitさせる方法

過去のPHPでの質問
http://www.okweb.ne.jp/kotaeru.php3?q=483327
の中で出てきた

>hiddenでデータ定義しておいて
>Javascriptでページ読み込み時に自動的にsubmitさせたらいいかも。

POSTでデータを送るためにこれを実現したいと思っているのですが自動的にsubmitさせる方法がわかりません。

ご存知の方がおられましたらアドバイス宜しくお願いします。

Aベストアンサー

<BODY onLoad="document.F.submit();">
とやれば、このファイルがロードされた時に、
このファイル内の
<FORM NAME=F>~</FORM>
と定義されたFORMの内容がsubmitされると思いますが・・・。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qレイアウトが崩れないようにするための、

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

Qdiv内に外部のurlを表示させたい

たびたびお世話になります。

divにスクロールを表示することで、iframeのようにブラウジングすることができますが、
このdiv内に外部のurlを表示させることは可能でしょうか?
検索してみたのですが、思うようなものが見つからず困っています。
それとも、不可能なのでしょうか?

もし可能なのであれば、その方法等簡単に記述していただければ幸いです。

Aベストアンサー

iframeの代用はobjectを使うのが定石のようです。

こんな感じでしょうか?
<body>
<div>
<object type="text/html" data="http://www.yahoo.co.jp/" width="600" height="300">
<p>object に対応していない場合はこれが表示される</p>
</object>
</div>
</body>

ただ、Objectタグには制限が多く使いづらい部分もあります。
※たとえば、枠の非表示などができない
CGIやPHP、JavaScriptを介す方法を考えた方が、場合によってはいいかもしれません。

とりあえず、一つの回答ということで…。

QHTMLからフォルダを開きたい

いつも大変お世話になります<(_ _)>

Webサーバー上にあるWebページ(HTML)の中に、ローカルPCのフォルダを開くリンクを付けたいのですが、
<a href="file://c:\windows">OPEN</a>
としても、何も反応しません。

いろいろ調べたのですが、上記の方法しか見あたりません。

なお、ブラウザのアドレス欄に file://c:\windows と入力すると、フォルダの内容が表示されます。
※Firefoxだと、ファイルの一覧になりますが・・・

何か環境によって挙動が異なるのでしょうか?
それとも、セキュリティ上の観点から最近じゃ出来なくなっているのでしょうか?

是非ともお助け下さい。宜しくお願い致します。

Aベストアンサー

file:///C:/windows/
/は三つでは・・・
 IEの場合はエクスプローラ(ファイルマネージャ)が開くような・・・
 IEはファイルマネージャーと一体のブラウザなので・・・

★実は、ローカルサーバーが必要です。
 apacheでも何でも良いので、WEBデータの入っているフォルダーを
<VIRTUALHOST 127.0.0.1>
C:\Document and settings\my document\web
 とかに指定して、Windowsのhostsファイルで、適当なサーバー名を指定しておきます。
myLocalhost 127.0.0.1
とか・・・

 そうすると
http://myLoclahost/
 で開けます。

 


人気Q&Aランキング