忙しい現代人の腰&肩のお悩み対策!

いつもお世話になっております。

イントラネット上のコンテンツにおいて
TOP画面のサイズを固定したいと思っております。

子ウィンドウはオープン時に"resizable=no"で
サイズ固定できますが
親ウィンドウではどうでしょうか?

動作は以下のようになればよいのですが

obj = window.open(selfUrl, name, "resize=no");
self.opener = self;
self.close();

諸事情により
ブラウザのプロセスIDが変化してしまうと困るので
「親ウィンドウを開きなおす」技は使えません・・・。

CSSで
max-width:1024px;min-width:1024px;
と試してみてもサイズ固定にはならないしで
煮詰まってしまいました。

何か方法をご存知の方
いらっしゃいましたら宜しくお願い致します。

A 回答 (2件)

前から気になっていた案件なので久しぶりに


真剣に考えていたら、こういう手を思いつきました。
どうでしょう?

<html>
<head>
<script language=javascript>
window.onresize=function(){
rw=document.body.clientWidth;
rh=document.body.clientHeight;
window.resizeBy((w - rw),(h - rh))
}
function loadFunc(){
w=document.body.clientWidth;
h=document.body.clientHeight;
}
</script>
</head>
<body onLoad="loadFunc()">
test
</body>
</html>

この回答への補足

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

私の環境でご提案頂いた方法を試してみたところ
(windowsXP SP2 IE6.0)

やはりスクリプトエラーで
「アクセスが拒否されました」と出力されてしまいました。
(発生箇所"resizeBy"メソッド)

私の環境が悪いのでしょうか?

補足日時:2006/04/14 09:15
    • good
    • 0

自ウインドウの"resizable=no"は、できなかったように思います。


IEの場合、サイズ変更開始でイベントが起きるので
window.onresize=function(){ alert("サイズの変更はできません");return false; };
とすれば、サイズ変更を邪魔できます。
(私なら、こんなサイトには2度と来ませんが)
Firefox では、onresize イベントは、サイズが変更されてから起こるようなので、
onresize イベントハンドラの中で、
window.resizeTo(1024, XXX);
を使って強制的に戻るようにするとかすればいいかもしれません。
(どっちにしてもそんなサイトはイヤですが)

この回答への補足

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

仰るとおり、サイズ固定のサイトはエチケット違反であるのは承知しております。
ただ、今回は社内サイトであり、お客様の要望ですので・・・。

さて、本題の方ですが

> Firefox では、onresize イベントは(以下略

社内サイトと言う事もあり、
対象ブラウザはIE6.0に統一されており
この点は問題ありませんでしたので

onResizeイベントハンドラ内で
resizeToメソッドを呼び出そうと思ったのですが
どうやら、当該イベントハンドラ内からでは
アクセス不可能なようです。
(以前は出来た気がするので、修正が入ったのでしょうか??)

ex1)

window.onResize = window.resizeTo(xxx, xxx);

スクリプトエラー:実装されていません。

ex2)

window.onResize = resizeEv;

function resizeEv() {
window.resizeTo(xxx, xxx);
return false;
}

スクリプトエラー:アクセスが拒否されました。

ちなみに、
windows XP SP2.IE6.0です。


実現困難なようなので、
仕様を変更する方向で働きかけてみようと思います。
ありがとうございました。

補足日時:2006/04/13 17:15
    • good
    • 0

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q自分のサイトを開いた時にウィンドウのサイズを固定したい

いつもお世話になります。
htmlもよく分からずに自分のサイトを作っている、初心者です。
生意気な事ですが、デザインの関係で
自分のサイトを開いた時にウィンドウのサイズを
固定して見てもらいたいのですが、
どうすればよいのか分かりません。
もしかしたらここで聞く事ではないのかもしれませんが
なにぶんにも初心者なのでおわかりの方がいらっしゃれば
ぜひご教授ください
よろしくお願いします。

Aベストアンサー

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a></p>
</body>
</html>

このようなソースにすると、このページのリンクをクリックした時に、JavaScriptで新しいウィンドウをサイズを指定して開き、そこに次のページを読み込むようになります。
もしJavaScriptが有効ではない環境で閲覧する場合には、新しいウィンドウは生成されず、トップページを表示したウィンドウ上で次のページが表示されるようになります。

ウィンドウサイズは、window.open()の括弧内にある、widthとheightで指定します。 単位はピクセルです。
その他にもいくつか指定を入れてありますが、このスクリプトの部分については、参考URLが詳しいので、そちらを参照してみてください。


ここからはアドバイスですが、可能であれば、やはりウィンドウサイズをリサイズさせなくてもすむデザインにしたほうが無難と思います。
先ほど書いた、フレームを使ってページの表示領域を制限する方法でも、ウィンドウサイズに左右されないデザインに近づけることができると思います。

他に、テーブルで囲んだり、スタイルシートによって表示の横幅を決めてしまえば、内容を表示する領域を固定値として確保できるので、ウィンドウ幅の差によるデザインの崩れを排除できる可能性もあるでしょう。
テーブルの場合は、通常のテーブルで横幅を指定し、その中に内容をすべて入れてしまえばよいだけです。
スタイルシートの場合は、
<div style="margin: auto; width: 600px;"></div>
で全体を囲めば、ウィンドウの横幅が変わっても内容の表示幅は変わらないようにできます。
もし、デザイン上のウィンドウサイズ指定が、ウィンドウの横幅が変わることでレイアウトが崩れることの防止策であるとするなら、これらの方法も対策になると思いますよ。

参考になれば幸いです。

参考URL:http://tohoho.wakusei.ne.jp/js/window.htm#open

サイトトップでJavaScriptから新しいウィンドウを開いて、指定のサイズのウィンドウ上で展開する場合のソース例です。

<html>
<head>
<title>Top page</title>
<script type="text/javascript"><!--
function winopen(){
var MainWin=window.open("tester.htm","MyWebSite","width=600, height=400, statusbar=1, location=1, menubar=1, toolbar=1, resizable=0, scrollbars=1");
}
//--></script>
</head>
<body>
<p><a href="呼び出すページのURL" onClick="winopen(); return false;">ENTER</a...続きを読む

Qウィンドウのサイズを変えても表示を崩れないようにしたい

ウインドウサイズをドラッグドロップして大きさを変えると
表示が崩れまくって困ります
固定する方法はないですか?ウインドーの大きさにかかわらずに
常に表示が同じな。

Aベストアンサー

表というのはtableタグでしょうか?でしたら
<table width="">(幅)
<table height="">(高さ)
で大きさを指定するとウィンドウサイズを変えてもテーブルのサイズは変わらないと思います。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QWEBサイト作成:初心者です。画面サイズの設定について・・・

私はこれまでWEBページを作成したことがなかったのですが、今回WEBページを作成することになりました。
簡易ページではありますが、作る楽しさを感じ始めています。

そこで一つ質問したいのですが、画面サイズの設定はどのようにしたらよいのでしょうか?
ちなみに【画面サイズは横600ピクセル×縦400ピクセルを基本として、縦は最高800ピクセルまで】という指定があるので、この設定にしたいのです!
お願いします!!!

Aベストアンサー

ページ内内容を600×400で作りたいのでしたら、
サイズを決めたbox内に内容を書くと良いでしょう。
例:
~上略~
<body>
<div style="width:600px; height:400px;">
内容。横幅600px、縦幅400px以上の長さの内容(大きな画像とか多い文章とか)があると、広がってしまいます。
</div>
</body></html>

600×400の表示サイズのブラウザで確認しながら作りたいのでしたら、
まず1枚のhtmlファイルを用意します。
内容には
<body style="margin:0;">
<div style="width:600px; height:400px; border:1px splid #0000ff;">600*400</div>
<div style="width:600px; height:400px; border:1px splid #ff0000;">600*400</div>
</body>
だけ書きます。
ブラウザでこのページを表示し、枠線に表示領域の大きさを合わせます。
600×400もしくは600×800の画像でも可能です。
サイズをあわせたら表示している中身を、作成するページに切り替えます。
多少の誤差は出ますが、まあ許容範囲ではないかなと。

ページ内内容を600×400で作りたいのでしたら、
サイズを決めたbox内に内容を書くと良いでしょう。
例:
~上略~
<body>
<div style="width:600px; height:400px;">
内容。横幅600px、縦幅400px以上の長さの内容(大きな画像とか多い文章とか)があると、広がってしまいます。
</div>
</body></html>

600×400の表示サイズのブラウザで確認しながら作りたいのでしたら、
まず1枚のhtmlファイルを用意します。
内容には
<body style="margin:0;">
<div style="width:600px; height:400px; border:1px...続きを読む

Q画面サイズ変更時のレイアウトの崩れ

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する(縮める)とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか?

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

Aベストアンサー

スクロールバーが表示されないのが問題なのでしょうか?
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

Qブラウザの右上にあるボタンを消すには?

IEを使用しています。
ブラウザの右上にある、閉じる、最大、最小ボタンを消したいのですが、どうすれば良いでしょうか?
ご存じの方は、どうぞ教えていただけませんでしょうか。

Aベストアンサー

なるほど、特定の用途に限定した方策を模索中なのですね。

これは、通常のWebSiteでは、禁じ手とも言える、ユーザからの大顰蹙を買う手法ですが、JavaScriptでフルスクリーン表示させることで実装可能ですね。

表示はWin環境のIE4以上限定でのフルスクリーン表示となります。
それ以外の環境では正しく表示されません。

注意点としては、ウインドウのクローズアクションをボタンなどでナビゲーションしなければ、Altキー+F4キー以外ではウインドウをクローズ出来なくなります。
そのため、使いようによっては、ユーザビリティーを無視した劣悪サイトとも成りかねませんので、一般的なサイト構築には100%お勧め致しません。

まずは、以下の2枚のソースをエディタにCopy&Pasteして、動作チェックしてみて下さい。
その後、ご自分でアレンジして下さい。


リンク元、a.htmlの記述例・・

<html>
<head>
<title>a</title>
<script type="text/javascript">
<!--
function full_screen()
{
window.open("b.html","", "fullscreen=yes");
}
//-->
</script>
</head>
<body>
<a href="#" onclick="full_screen()">b.htmlをフルスクリーン表示</a>
</body>
</html>


リンク先、b.htmlの記述例・・

<html>
<head>
<title>b</title>
</head>
<body>
<form>
<input type="button" name="close" value="ウインドウを閉じる" onClick="window.close()">
</form>
</body>
</html>

なるほど、特定の用途に限定した方策を模索中なのですね。

これは、通常のWebSiteでは、禁じ手とも言える、ユーザからの大顰蹙を買う手法ですが、JavaScriptでフルスクリーン表示させることで実装可能ですね。

表示はWin環境のIE4以上限定でのフルスクリーン表示となります。
それ以外の環境では正しく表示されません。

注意点としては、ウインドウのクローズアクションをボタンなどでナビゲーションしなければ、Altキー+F4キー以外ではウインドウをクローズ出来なくなります。
そのため、使いように...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qポップアップウィンドウをリサイズさせない方法

宜しくお願い致します。
H.P上で300px*300pxに固定したポップアップウィンドウを表示させたく「resize=no」を指定した場合、IEでは問題なく固定されるのですが、Firefoxではウィンドウ右下に表示されるアイコン(三角形のような)でウィンドウをリサイズすることができてしまいます。
Firefoxでもウィンドウをリサイズできないようにする方法はありますでしょうか?

Aベストアンサー

window.openでのことでしょうか?

resizableに関してでしょうか?


そうだとして…  でも、resizable=noは推奨されていないみたい。
 https://developer.mozilla.org/ja/DOM/window.open
(↑)によれば、Mozilla1.4以降は効かないみたいですね。
サポートしていない(?)Operaでも試してみたら、やはり効きませんでした。

ポップアップは嫌っている人もいるので、ユーザがブロックしている場合もありますね。


別窓ではなくブロック要素(divなど)を表示するような方法でよければリサイズはできません。

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}


人気Q&Aランキング