レイヤーとセレクトボックスが重なった場合について
- レイヤーとセレクトボックスが重なった場合には、レイヤーの表示が優先されるようにすることが可能です。
- 以下のようなHTMLを使用して、スクロール時にレイヤーを固定し、セレクトボックスの表示を優先させます。
- しかし、ブラウザがIE6の場合には対応が必要です。
- ベストアンサー
レイヤーとセレクトボックスが重なった場合について
例えば、以下のようなHTMLのようにレイヤー部分を固定しておいて ページをスクロールさせていき、セレクトボックスと重なった場合、 セレクトボックスの方が優先されて表示されてしまいますが、 これをレイヤーの表示が優先されるようにすることは可能でしょうか？ (ブラウザはIE6です。) どなたかよろしくお願いいたします。 <html> <script language="javascript"> <!-- function keepMessage() { document.all["sampleTable"].style.top = document.body.scrollTop; document.all["sampleTable"].style.left= document.body.scrollLeft; setTimeout("keepMessage()",1); } //--> </script> <body onLoad="keepMessage()"> <div id="sampleTable" style="position:absolute;"> <table border=1> <tr><td>名前</td><td>サンプル1</td></tr> <tr><td>住所</td><td>サンプル2</td></tr> </table> </div> <table border="0" width="320"> <tr><td>.</td></tr> </table> <br><br><br> <select name="出身"> <option value="SP1">サンプル1 <option value="SP2">サンプル2 <option value="SP3">サンプル3 <option value="SP4">サンプル4 </select> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> </body> </html>
- nxl
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
この現象については、IEのバグというよりそういう仕様だとのことです。 http://cssbug.at.infoseek.co.jp/detail/winie/b112.html ですから、この場合テーブルの下をくぐらせるのは無理なのではないかと・・・ どうしてもテーブルの上にくるのが嫌なのでしたら、テーブルと重なっている間だけ、selectBoxを非表示にしてみては如何でしょうか？ [ スクリプト部 ] Btype = "NN"; if (navigator.appName.toUpperCase().indexOf("EXPLORER") >= 0) Btype = "IE"; if (navigator.userAgent.toUpperCase().indexOf("OPERA") >= 0) Btype = "OP"; function keepMessage() { var LH = document.all["sampleTable"].offsetHeight; var ST = document.all["sc"].offsetTop; var SH = document.all["sc"].offsetHeight - document.all["tb"].offsetTop; var T = document.body.scrollTop; if (T + LH >= ST && T <= ST + SH) document.all["sc"].style.visibility = "hidden"; else document.all["sc"].style.visibility = "visible"; document.all["sampleTable"].style.top = document.body.scrollTop; document.all["sampleTable"].style.left= document.body.scrollLeft; setTimeout("keepMessage()",1); } if (Btype == "IE") window.onload = keepMessage; [ HTML変更部分 ] <body> <div id="sampleTable" style="position : fixed; position : expression('absolute'); z-index : 2;"> <table border=1 bgcolor="white" id="tb"> <select name="出身" id="sc" style="position : relative;">
関連するQ&A
- リストボックス全選択について
JavaScriptについて質問です。 リストボックスA,B と プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){ var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>
- 締切済み
- JavaScript
- 動的なセレクトボックスの生成と削除
CGI（Perl）で、Javascriptを用いWEBアプリケーションを作成しています。 その過程で、追加ボタンを押すとセレクトボックス（５つでひとかたまりです）が増えるJavascriptを作成しています。 しかし、残念ながら削除をする機能をどうしていいか思いつきませんのでお知恵を貸してください。（また、増加ボタンも他にいい方があレバよろしくお願いします。） 今までに作成したのは以下のとおりです。 **********Javascript*********** var copy; function addInput() { copy = document.getElementById('plus') copy.innerHTML="Filter: <select name='condition'> <option value='and'>AND</option> <option value='or'>OR</option> </select> <select onchange='SetSubMenu(value);'> <option value='Werkstoff'>1.Werkstoff</option> <option value='Shiftfaktor'>2.Shiftfaktor </option> <option value='SurfCorr'>3.SurfCorr</option> </select> <select name='condition'> <option value='like'>like</option> <option value='notlike'>not like</option> <option value='equal'>=</option> <option value='<'><</option> <option value='>'>></option> <option value='<='><=</option> <option value='>='>>=</option> </select> <div id ='Werkstoff' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGWERK> <option value='<TMPL_VAR NAME=WERKSTOFF>'><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP></select></div> <div id ='Getriebe' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGETRIEBE> <option value='<TMPL_VAR NAME=GETRIEBE>'><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP></select></div> <input type='button' onclick='addInput()' value='+'> <input type='button' onclick='delInput()' value='-'> <div id='plus'></div>" } </script> **********stylesheet************* <style type="text/css"><!-- .secondpulldown { display: none; } --></style> <table> <tr> <td>Datenbank:</td> <td colspan="5"> <select name="datenbank"> <option value="bank1">DATEN BANK 1</option> </select> </td> </tr> <tr> <td>Filter:</td> <td> <select name="condition"> <option value="and">AND</option><option value="or">OR</option> </select> </td> <td> <select onchange="SetSubMenu(value);"> <option value="Werkstoff">1.Werkstoff</option> <option value="Shiftfaktor">2.Shiftfaktor </option> <option value="SurfCorr">3.SurfCorr</option> </select> </td> <td> <select name="condition"> <option value="like">like</option> <option value="notlike">not like</option> <option value="equal">=</option> <option value="<"><</option> <option value=">">></option> <option value="<="><=</option> <option value=">=">>=</option> </select> </td> <td> <div id ="Werkstoff" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGWERK><option value="<TMPL_VAR NAME=WERKSTOFF>"><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP> </select> </div> <div id ="Getriebe" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGETRIEBE><option value="<TMPL_VAR NAME=GETRIEBE>"><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP> </select> </div> </td> <td> <input type="button" onclick="addInput()" value="+"> <input type="button" onclick="delInput()" value="-"> </td> </tr> <tr> <td colspan='6'><div id="plus"></div></td> </tr> </table> よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックスでそれ以降の表示を切り替えたい
http://5am.jp/javascript/form_change_javascript/ の「サンプルソース（セレクトボックス）」のような入力フォームを作成中です。セレクトボックスでの選択によって、その下に複数行表示させたいので、サンプルソースのgetElementByIdのところをgetElementsByClassNameにして実装してみたのですが動きませんでした…。 以下が自分が書いたコードになります。どこがおかしいのでしょうか？ （インデントがうまくできていなくて申し訳ないです。） 回答よろしくお願いします。 <script type="text/javascript"> function entryChange2() { if (document.getElementById('changeSelect')) { id = document.getElementById('changeSelect').value; if (id == 'select1') { document.getElementsByClassName('firstBox2').style.display = ""; document.getElementsByClassName('secondBox2').style.display = "none"; } else if (id == 'select2') { document.getElementsByClassName('firstBox2').style.display = "none"; document.getElementsByClassName('secondBox2').style.display = ""; } } } window.onload = requestChange; </script> <form> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>利用方法</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">初めて申し込む</option> <option value="select2">2度目以降の利用</option> </select> </td> </tr> <!-- 表示非表示切り替え --> <tr class="firstBox2"> <th>紹介者</th> <td><input type="text" /> <p>紹介された方のお名前を入力してください。</p></td> </tr> <tr class="firstBox2"> <th>紹介者のメールアドレス</th> <td><input type="text" /> <p>紹介された方のメールアドレスを入力してください。</p></td> </tr> <!-- 表示非表示切り替え --> <tr class="secondBox2"> <th>名前</th> <td><input type="text" /> <p>名前を入力してください。</p></td> </tr> <tr class="secondBox2"> <th>会員番号</th> <td><input type="text" /> <p>会員番号を入力してください。</p></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- セレクトボックスを使ったJavaScriptでの計算方法
セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> ・ ・ ・ ・ ・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。 全部足し算で計算します。 どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。
- ベストアンサー
- JavaScript
- テーブル内のチェックボックスのvalue受け渡し
jspで、テーブルの中に用意したチェックボックスのvalueを別のプログラム（select_data_c）へ渡したいのですが、うまくいきません。alertを使って確認してみたところ、undefinedが表示されました。 また、受け側のプログラムには特に問題は無いようでした。 以下がソースの一部です。かなりの長文で申し訳ございませんが、ご教授よろしくお願いします。 <%! //コード String code_Act_App = "2"; ←アプリ実行の記述です。出力ボタンを押したらcsvを作成 %> <html> <head> <title>データ取得条件選択</title> <script type="text/javascript"> function entryChange2(){ if(document.getElementById('changeSelect')){ id = document.getElementById('changeSelect').value; if(id == 'select1'){ //フォーム document.getElementById('firstBox2').style.display = ""; document.getElementById('firstBox22').style.display = ""; document.getElementById('secondBox2').style.display = "none"; document.getElementById('secondBox22').style.display = "none"; }else if(id == 'select2'){ //フォーム document.getElementById('firstBox2').style.display = "none"; document.getElementById('firstBox22').style.display = "none"; document.getElementById('secondBox2').style.display = ""; document.getElementById('secondBox22').style.display = ""; }}} //オンロードさせ、リロード時に選択を保持 window.onload = entryChange2; function output(){ //変数に代入 var d = document.chkList.chk.value; alert(d); ←ここでundefinedが表示されてしまいます checkvalue = ''; //チェックボックスがONの時はその値を設定する if (document.chkList.chk.checked == true) { document.C_FUNC.chk.value = document.chkList.chk.value ; }} </script> </head> <body> <div align="center"> <h1>データ取得条件選択</h1> <table border="0" cellspacing="0" cellpadding="0"> <tr> <th>対象マスター</th> <td> <select id="changeSelect" name="hoge" onchange="entryChange2();"> <option value="select1">マスタ選択</option> <option value="select2">社員マスター</option> </select> </td> </tr> </table> <!-- 表示非表示切り替え --> ↓２つのテーブルを横に並べて表示させています <table><tr><td> <table id="firstBox2"> <tr> <th>マスター項目一覧</th> <td><div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> 対象マスターを選択し、<br> 表示ボタンを押してください</div></td></tr> </table> </td><td valign="top"> <table id="firstBox22"> <tr> <th>関連テーブル項目一覧</th> <td valign="top"><div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> 対象マスターを選択し、<br> 表示ボタンを押してください</div></td></tr> </table> </td></tr></table> <!-- 表示非表示切り替え --> <table><tr><td> <table id="secondBox2"> <tr> <th>マスター項目一覧</th> <td><form name="chkList" method="POST" > <div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> <input type="checkbox" name="chk" value="会社コード">会社コード<br> <input type="checkbox" name="chk" value="社員番号">社員番号<br> <input type="checkbox" name="chk" value="削除フラグ">削除フラグ<br></div></form> </td></tr></table> </td><td valign="top"> <table id="secondBox22"> <tr> <th>関連テーブル項目一覧</th> <td><form name="chkList" method="POST" > <div style="height:200px; width:300px; border :1px solid #000000; overflow-x:scroll;overflow-y:scroll"> ここにもマスター項目一覧と同様にチェックボックスを置いています。項目数が多いのでスクロールバーを付けています。 </div></form></td> </tr> </table> </td></tr></table> <form action = "select_data_c" name="C_FUNC" method="POST"> <input type = hidden name = "chk" value ="d"> <input type = hidden name = "C_FUNC" value = "<%= code_Act_App %>"> <input type="submit" name = "OutPut" value="上記の条件で出力" onClick="output()"> </form> </div> </body> </html>
- 締切済み
- JavaScript
- HTMLにてセレクトボックスを作る
よろしくお願いします。 <tr><td class="td_head">あいう<br /></td> <td class="td_odd"><select name="select /" > <option value="#">選択して下さい <option value="【a01】">【あああ】</option> <option value="【a02】">【いいい】</option> <option value="【a03】">【ううう】</option> <option value="【a04】">【えええ】</option></select></td> </tr> とすると、エディターにて◆ 102行: 要素optionはこの位置には置けません。と出てしまいます。何か文法ミスがありますか？ おヒマな時にでもご回答願えればと思います。
- 締切済み
- ホームページ作成ソフト
- firefox、IE8で異なるtableの上部空白
以下サンプルをfirefox（20.0.1）、IE８で各々表示した場合に ＩＥ８では、表の上部に空白行が多くとられてしまいます。 ※複数回改行されているような表示。 以下はサンプルとして簡易にしましたが、 本来作成しているコードでは、対策として <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />は記述してます。 変わりませんでしたが。。 IE8の仕様なのでしょうか？ firefox等、他のブラウザに影響が波及しないよう対応したいと考えています、 何かいい方法はありますでしょうか？ よろしくお願いします。 <html> <head> <style type="text/css"> @CHARSET "UTF-8"; *{ margin: 0; padding: 0; } table.table{ border-collapse: collapse; } table.table td{ border: 2px #808080 solid; } </style> <head> <body> <div class="main"> <div class="content"> <table class="table"> <tr> <td> <select> <option> </option> </select> </td> <td> <select> <option> </option> </select> </td> <td> <select> <option> </option> </select> </td> </tr> </table> </div> </div> </body> </html>
- ベストアンサー
- HTML
- Layerの中にあるリンクがmacで動作しません
以下が友達に質問されたソースを簡略化した物です。layerを左右2段組みにしてますが、右のlayer内が全く反応しません。layerを使わなければできるのですが、この方法のどこが間違っているかが教えられなくて質問しました。よろしくお願い致します。 javascript～window.open省略 <DIV style="top : 61px; left : 356px; position : absolute; z-index : 1; width: 331px; height: 40px;" id="Layer2"> <DIV> <TABLE border="1" width="331" height="40"> <TBODY> <TR> <TD width="61" height="20">サンプル2</TD> <TD width="214"><A href="#">◆</A></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> <DIV style="top : 61px;left : 24px; position : absolute; z-index : 3; " id="Layer5"> <DIV> <TABLE border="1" width="313" height="40"> <TBODY> <TR> <TD width="134" height="16">サンプル</TD> <TD width="141"><A href="#">◆</A> </TD> </TR> </TBODY> </TABLE> </DIV> </DIV>
- ベストアンサー
- HTML
- セレクトメニューでレイヤーの切り替え
<html> <head> <title>実験用</title> </head> <script language="javascript"> <!-- function sel(flg){ flg.style.display = "block"; } //--> </script> <body> <select onChange="sel(this.value)"> <option value="aaa">その１ <option value="bbb">その２ </select> <div id="aaa" style="display:none;background:skyblue">ああああああああああああああ</div> <div id="bbb" style="display:none;background:skyblue">いいいいいいいいいいいいいい</div> </body> </html> このスクリプトは動かないのですが、イメージとしては セレクトメニューで選んだら、それに対応したレイヤーを 表示させたり、非表示にしたりしたいのです。 環境はWinXP,IE6とMac9.2.2,IE5.1です。 何かいい方法は無いでしょうか。
- ベストアンサー
- JavaScript
- JavaScriptのSELECTの値について
JavaScriptについて、質問させてください。 html1からhtml2にSELECTで選択した値を渡すプログラムを作成しています。 下はそのソースです。 <html> <head></head> <body> <form method="POST" action="html2" onSubmit="入力チェック"> <table> <tr> <td>項目A-1</td> <td>項目A-2</td> <td> <select name="selname1"> <option value="0">0</option> <option value="1,11,111">1</option> <option value="2,22,222">2</option> </select> </td> </tr> <tr> <td>項目B-1</td> <td>項目B-2</td> <td> <select name="selname2"> <option value="0">0</option> <option value="3,33,333">3</option> <option value="4,44,444">4</option> </select> </td> </tr> </table> </form> </body> </html> 項目は全部で１０ほどあるので、途中省略しています。 SELECTで0以外が選ばれていた場合に、それに関連する項目情報と optionのvalueをhtml2に送信させて、一覧表のように表示させたいと思います。 JavaScriptのDOMやループ文を使うようですが、 私は専門外なので、どのような処理を組めばよいかわかりません。 どなたか、わかる方ご教示願います。
- 締切済み
- JavaScript
お礼
すばやい回答ありがとうございます。 さらに代案まで挙げていただいて大変助かりました。 ありがとうございました。