• ベストアンサー

プルダウンメニューアイテムの画面優先順位

画面上に<div>タグによるサブウインドウを表示して処理を行うようなページを製作しているのですが、<select></select>のプルダウンメニューだけはz-indexなどで指定した優先順位を無視して、常に最前面に表示されてしまいます（IE以外では未確認ですが・・・）。 このエレメントの優先順位を下げる方法はないのでしょうか。 最近A-JAXの発展でデスクトップと同等のインターフェースを備えたWebアプリケーションが増えているので、必ずこの問題にも解決法を見出しているはずだと考えているのですが・・・。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
noname#22259
noname#22259
回答No.1

//IE5+,NN6,Moz <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>???</title> <style> #fx{width:120px;height:150px;position:absolute;top:20;left:40;display:none;} </style> <script type="text/javascript"> function showMenu() { document.getElementById('fx').style.display = 'inline'; } function hideMenu() { document.getElementById('fx').style.display = 'none'; } </script> <body> <iframe id="fx" frameborder=0 scrolling=no marginwidth=0 marginheight=0 src="select.html"></iframe> <input type=button value="Show Menu" onclick="showMenu()"> <input type=button value="Hide Menu" onclick="hideMenu()"> </body> </html> ---[select.html]--- <form> <select name="sel"> <option value="1">Red</option> <option value="2">Green</option> <option value="3">Blue</option> </select> </form>

ategon
質問者

お礼

ありがとうございます。 ソースが無くても「iframeなら透過しない」の一言でも良かったのですが、ソースまで付けてくださって感謝します。 自分でも関連していそうなページを発見しました。 Weblogicの開発者向けのページらしく、cssで表示させたメニューの下にiframeのシム（と呼んでいるらしい）を置いてこの問題を解決するというものでした。 ただ、この手法は既存のロジックをそのまま使用すべき場合に有効であって、今回のように新規に作成しようとする場合、単純に<div>から<iframe>に置き換えても問題ないのかと思われますが、どうなのでしょうか。

ategon
質問者

補足

結局、<iframe>だとinnerHTMLで流し込めないので<div>タグのエレメントを引数に渡すとその下に同サイズの<iframe>を設置する関数を作ってみました。 ちなみにシムのサイズはcssで別途指定して合わせてます。 // シム（プルダウンが透ける問題対策）作成・表示 function SimView(elem){ //取得or作成 if(document.getElementById(elem.id+'Sim')){ Sim = document.getElementById(elem.id+'Sim'); } else { //シム作成 var Sim = document.createElement('iframe'); Sim.id = elem.id+'Sim'; Sim.scrolling = 'no'; Sim.frameborder = '0';//なぜか消えない・・・ document.body.appendChild(Sim); } //シム表示（元エレメントのデータを参照） Sim.style.left = elem.style.left; Sim.style.top = elem.style.top ; Sim.style.display = 'block'; }

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • プルダウンメニュー表示時の高さの指定方法

    ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ（タテ幅）の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか？ ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:（幅を指定）;"」を記述することで固定幅の設定が可能でしたが・・・ なお、プルダウンメニューは初期表示として、１件のみ表示させるものとします（すなわち、<select>タグ内の「size="1"」の指定は変えないこととする）。 というのも、プルダウンに表示させる項目（条件によって可変）の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。 よって、方法としては、 １．プルダウン表示させる際の高さ（タテ幅）を固定で指定する ２．可能であれば、登録されている全項目の表示をさせる 以上２つの方法を考えています。 なにかよい方法があれば、ぜひ教えてください。

    • ベストアンサー
    • HTML
  • 一つのタグ内での要素の優先順位？ってあるのでしょうか？

    こんにちは。よろしくお願いします。 自分が作成していたWebシステムのページをアクセシビリティチェックツール～にかけ出てきたエラーのことでちょっと疑問に思い質問させていただきます。 ・一つのタグ内の要素の優先順位は、厳密に言うとあるのだろうか？ ということなんですがー。。。 チェックにかけた項目は <img>タグです。 ・<img src ="img.gif" alt ="イメージ画像" width ="100" height ="100"> と ・<img src ="img.gif" width ="100" height ="100" alt ="イメージ画像"> と、の違いなのですが、上記タグではOKが出るのですが、下記タグでは、間違い！！と表示されるようです。 この場合、<img>タグ内の要素について、src→alt→width→heightという優先順位がついているのか、それとも、ただ単にそのアクセシビリティチェックツールのバグなのか。 タグ内要素の優先順位～についてご存知の方がいましたら、ご教授願えませんでしょうか？よろしくお願いします。

    • ベストアンサー
    • HTML
  • プルダウンメニューの中の値を飛ばしたいです。

    こんばんは。 いつもお世話になっております。 Ａテキストから持ってきたデータをプルダウンで 表示させ、プルダウンを選択された値でＢテキストや Ｚテキストの中身を表示させる、という動きがしたいのです。 過去ログで探してみたのですが、ジャバスクリプトを 使えば可能っぽい、という所までしかわからず途方に くれています。 プルダウンメニュー選択後、「選択」ボタンを押した 場合でのＢ～Ｚテキストのデータ表示は出来るのですが プルダウン選択のみで、という部分が出来ずに困っています。 試しに書いたスクリプトは下記↓です。 <SELECT NAME=\"keyname\" onChange=\"navigate('keyname.cgi?param='this.selectedIndex);\"> $i=$start; foreach $line (@alllines) { ($keyname,$name) = split(/\,/,$line); <OPTION VALUE=\"$keyname\">$name</OPTION> "; $i++; } Ａテキストの値を、プルダウンで表示される事はされるのですが、 VALUE=\"$keyname\"の値が、keyname.cgiへ渡って くれないのです。 どうかご指導よろしくお願い申し上げます。

    • ベストアンサー
    • Perl
  • プルダウンの画面を最前面にするには？

    Movable Typeのブログに、以下のリンク先の「本棚」のブログパーツを設置しました。 http://www.bossabooks.jp/cafe/bp/about.html 上記サイトで設定してできたタグは以下のとおりです。 <script type="text/javascript" charset="UTF-8" src="http://node3.nirvanix.com/bossabooks/jp/bp/mini/mini.js"> </script> <script type="text/javascript">miniMyshelf('▲▲▲', '★★★', '', '1', '', 'colors/natural', '#CCCCCC', true); </script> ▲、★は、私のＩＤなど。 このタグで、設置自体はできたのですが、 この本棚にポインタを置くと出てくるプルダウンの画面の下の方が、 表示が切れて（隠れて）しまいます。 プルダウンの表示を最前面にして表示が切れないようにするには、どうすればいいでしょうか。

    • ベストアンサー
    • HTML
  • プルダウンメニューの作成方法

    ニッカンスポーツのHP http://www2.nikkansports.com/news/baseball/bb-fl.html にあるような 「ホーム、野球、、、、釣り」 のメニューで、「野球」の上にマウスをもっていくとプルダウンメニューが表示されるようなプログラムコード は分かりませんか？ (JavaScriptかJavaか分かりません) (<select><option>タグではできそうにありませんが、 できるのか？)

  • 複数のソフトを最前面表示設定にしている際の優先順位のようなものは設定できないのでしょうか？

    メディアプレイヤーの類を最前面表示している際に、ランチャー系のソフトを最前面表示設定にするとランチャー系のソフトが上に来てしまって気になってしまいます。 どうにか優先順位を設定したいのですが可能ですか？

  • プルダウンを2個選び、その結果に基づき、値を返す。

    プルダウンを2個選び、その結果に基づき、値を返したいです。 以下はそのhtml文です。 <!DOCTYPE html> <html> <head> <title>プルダウンのメニューを表示を2つ設定</title> <script> function selectboxChange() { var value1 = document.forms.form1.Select1.value; var value2 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if ((value == "要素1")&&(value == "要素11")) { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } //--------------------- // </script> </head> <body> <div>プルダウンのメニュー１</div> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value="要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div>プルダウンのメニュー２</div> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange();"> <option>---</option> <option value="要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </html> プルダウンを2個紐づけたいのですが、var value=document.formsの文言を紐づけようとしましたが、 紐づけができません。 ですので、打開案をご教授願えたら幸いです。

  • プルダウンメニューがＩＥだとエラー

    買い物かごをプルダウンメニューで作ったのですが、firefoxではちゃんと次のページ（かごに入れて、かごの中身を表示）に行くのに、IEだと、ちゃんとかごに入りません（ショッピングカートに入れられない、とエラーが出る）何故でしょうか？ このタグを打っているのですが（タグ紹介のページでコピった）、間違っていますか？ <script language="javascript"> <!-- function goToUrl(obj) { url = obj.options[obj.selectedIndex].value; if(url != "") { location.href = url;} } //--> </script> <form method="post"> <select onChange="goToUrl(this)"> <option value="">▽選択してください <option value="http://～">○○ <option value="http://～" >××</select> </form>

    • ベストアンサー
    • HTML
  • プルダウンメニューの位置がずれてしまいます

    質問させてください。 メニューボタンにマウスオーバーすると下にサブメニューが表示される、プルダウンメニューを作成しています。（階層メニューというのでしょうか？） Dreamweaverでレイヤーを使って作っているのですが、サブメニューの表示位置がずれてしまって困っています。 以前ご質問させていただき、一番外のTableを中央揃えにしているため、レイヤーの「position」が”absolute”だと画面の大きさによって位置が変わってしまうことがわかりました。 そこで”relative”にすればいいのかと思ったのですが、そうするとDreamweaverの「レイヤー」（←表示／非表示やz-indexを設定したりするプロパティ）から消えてしまうのです。 たぶん、レイヤーとして認識されていないのだと思います。 自分なりに調べ、Javascriptでブラウザの幅－Tableの幅÷2を求め、そこを基点にして”absolute”にすればいいというところまではわかったのですが、知識不足のためいろいろ試してみてもJavascriptエラーになってしまって・・・。 どのように書けばいいのかお教えいただけると、大変助かります。 よろしくお願いいたします。

  • スクリプト同士の手前に表示される優先順位を変えたい

    お世話になります ブログで、オンマウスでメニューが表示されるスクリプトがテンプレートで入っておりそちらに変更しました。 しかし、動画を記事に載せた時に、動画の下にメニューが隠れて表示されてしまいます。 スクリプトの優先順位を示すタグなどはあるのでしょうか？ 出来れば動画の下に隠れることなく、メニューが一番手前に表示されるようにしたいです。 その場合、メニュー側のブログのＨＴＭＬまたはＣＳＳで変更可能でしょうか。 宜しくお願い致します

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する