WiSTERIA ＊ BOARD

W i S T E R I A
＊
B O A R D

● ● ●

●新規

●トレリス表示

● ● ●

●関連記事の一覧

109

フレームの表示／非表示 by bra

2004/11/10 (Wed) 20:42

△up

res/edit

はじめまして。
最近DHTMLのすばらしさに気づいた小物です。

質問なのですが、子フレームをボタン押下で表示／非表示切り替えをしたいのですが出来るでしょうか？

フレーム分けではなく、一つのHTMLでならば出来たのですが、
フレームで分けてやりたいんです。※下記ソース参照願

フレームをdivで括ればvisible指定で消したり出来るのかな？とか
framesetでボタン押下時にscriptでサイズ0指定してやれば出来るかな？等々考えたのですが、どうもスマートじゃないので、先輩方のお知恵を拝借したいと思い質問させてもらいます。

宜しくお願いします。

P.S.　公開するページではないのでブラウザ等問いません。

※以下ソース（汚くてすいません

<HTML>
<HEAD>
<TITLE>テストWebページ</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<STYLE TYPE="text/css">

</STYLE>
<BODY>
<table border="1">
<tr>
<td>
</td>
<td>
<DIV ID="display2_menu" STYLE="display:none">
<table width=300>
<tr>
<td>
<A HREF="JavaScript:onClick=DisplaySwitch('display2_menu','display2_symbol');">
<IMG SRC="cross.gif" ID="img3" class="directR" BORDER="0" ALT="閉じる">
</A>
</td>
</tr>
</table>
</DIV>
</td>
</tr>
<tr>
<td valign="top">
<div id="display2_symbol">
<A HREF="JavaScript:onClick=DisplaySwitch('display2_menu', 'display2_symbol');">
<IMG SRC="2frame_yoko.gif" ID="img2">
</A>
</div>
<div id="display1_symbol">
<A HREF="JavaScript:onClick=DisplaySwitch('display1_menu', 'display1_symbol');">
<IMG SRC="2frame_tate.gif" ID="img1">
</A>
</div>
<DIV ID="display1_menu" CLASS="subwindow" STYLE="display:none">
<A HREF="JavaScript:onClick=DisplaySwitch('display1_menu','display1_symbol');">
<IMG SRC="cross.gif" ID="img4" class="directR" BORDER="0" ALT="閉じる">
</A>
</DIV>
</td>
<td height=150>
<div align="center">
メインフレーム
</div>
</td>
</tr>
</table>
</BODY>
</HTML>

238

Re1:フレームの表示／非表示 by aa

2009/03/27 (Fri) 14:53

△up

url

res/edit

>はじめまして。
>最近DHTMLのすばらしさに気づいた小物です。
>
>質問なのですが、子フレームをボタン押下で表示／非表示切り替えをしたいのですが出来るでしょうか？
>
>フレーム分けではなく、一つのHTMLでならば出来たのですが、
>フレームで分けてやりたいんです。※下記ソース参照願
>
>フレームをdivで括ればvisible指定で消したり出来るのかな？とか
>framesetでボタン押下時にscriptでサイズ0指定してやれば出来るかな？等々考えたのですが、どうもスマートじゃないので、先輩方のお知恵を拝借したいと思い質問させてもらいます。
>
>宜しくお願いします。
>
>
>P.S.　公開するページではないのでブラウザ等問いません。
>
>※以下ソース（汚くてすいません
>
><HTML>
><HEAD>
><TITLE>テストWebページ</TITLE>
></HEAD>
><SCRIPT LANGUAGE="JavaScript">
>
></SCRIPT>
><STYLE TYPE="text/css">
>
></STYLE>
><BODY>
><table border="1">
><tr>
> <td>
> </td>
> <td>
> <DIV ID="display2_menu" STYLE="display:none">
> <table width=300>
> <tr>
> <td>
> <A HREF="JavaScript:onClick=DisplaySwitch('display2_menu','display2_symbol');">
> <IMG SRC="cross.gif" ID="img3" class="directR" BORDER="0" ALT="閉じる">
> </A>
> </td>
> </tr>
> </table>
> </DIV>
> </td>
></tr>
><tr>
> <td valign="top">
> <div id="display2_symbol">
> <A HREF="JavaScript:onClick=DisplaySwitch('display2_menu', 'display2_symbol');">
> <IMG SRC="2frame_yoko.gif" ID="img2">
> </A>
> </div>
> <div id="display1_symbol">
> <A HREF="JavaScript:onClick=DisplaySwitch('display1_menu', 'display1_symbol');">
> <IMG SRC="2frame_tate.gif" ID="img1">
> </A>
> </div>
> <DIV ID="display1_menu" CLASS="subwindow" STYLE="display:none">
> <A HREF="JavaScript:onClick=DisplaySwitch('display1_menu','display1_symbol');">
> <IMG SRC="cross.gif" ID="img4" class="directR" BORDER="0" ALT="閉じる">
> </A>
> </DIV>
> </td>
> <td height=150>
> <div align="center">
> メインフレーム
> </div>
> </td>
></tr>
></table>
></BODY>
></HTML>
>

235

Re1:フレームの表示／非表示 by anonymous

2008/07/28 (Mon) 10:56

△up

res/edit

110

Re1:フレームの表示／非表示 by ごだっち＠管理人

2004/11/11 (Thu) 12:23

△up

url

res/edit

admin

書き込みありがとうございます。
管理人のごだっちです。

そうですね～
フレームありのページと無しのページをリンクで相互に行き来する
というも簡単ではありますが、せっかくのDHTMLですからね。

で、自分の手掛けたサイトの一つ「トヨタレンタリース新札幌」では
画面下部のボトムメニュー部分や、左右フレームのどちらがフォーカスされたかによって
その部分をリサイズして表示させる、以下のスクリプトを使用しています。
（この機能についてはIE限定ですが･･･）

http://toyota.rent-a-lease.com/

function frsize(name){
if(document.all){
var expwidth = window.top.explain.document.body.clientWidth;
var reswidth = window.top.yoyaku.document.body.clientWidth;
}
switch(name){
case("yoyaku"):
window.top.frmrows.rows='93,*,28';
window.top.menu.scrollTo(0,0);
setTimeout("window.top.bottom.scrollTo(0,120);",100);
if(reswidth){
if(reswidth >= 564){ return false; }
else{ window.top.maincols.cols='564,*'; }
}
break;
case("explain"):
window.top.frmrows.rows='93,*,28';
window.top.menu.scrollTo(0,0);
setTimeout("window.top.bottom.scrollTo(0,120);",100);
if(expwidth){
if(expwidth >= 490){ return false; }
else{ window.top.maincols.cols='*,490'; }
}
break;
default:
window.top.frmrows.rows='93,*,27';
setTimeout("window.top.bottom.scrollTo(0,120);",100);
// window.top.maincols.cols='592,*';
break;
}
}
function brsize(){
if(document.all){
var btmheight = window.top.bottom.document.body.clientHeight;
}
if( ( btmheight ) && ( btmheight >= 29) ) {
window.top.frmrows.rows='93,*,28';
setTimeout("window.top.bottom.scrollTo(0,120);",100);
return false;
}
else{
window.top.frmrows.rows='93,*,120';
setTimeout("window.top.bottom.scrollTo(0,28);",100);
return false;
}
}

幾らかでも参考になりますでしょうか？

111

Re2:フレームの表示／非表示 by bra

2004/11/11 (Thu) 13:22

△up

res/edit

お返事ありがとうございます♪

>その部分をリサイズして表示させる、以下のスクリプトを使用しています。
>　window.top.frmrows.rows='93,*,28';

・・・・・・・javascriptで幅設定できるんですね・・・orz
DHTMLとか言う前にもっとjs勉強してきます；；

ありがとうございました♪^ー^

p.ink