• ベストアンサー

JavaScriptのポップアップカレンダーについて

http://allabout.co.jp/internet/javascript/closeup/CU20020529/ 上記サイトにある、JavaScriptを使用したポップアップカレンダを使 っているのですが、ページ内にドロップダウンリストがあるとカレン ダがドロップダウンリストより背面になってしまいます。 (ドロップダウン以外はカレンダが前面に来ます。) カレンダを前面に表示することはできないでしょうか?

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

  • ベストアンサー
  • NTJ
  • ベストアンサー率44% (46/103)
回答No.2

talepandaさんの解答で「正解」なのですが、ページデザインを工夫して、セレクトボックスの使用を廃止するという手段もあるかと思います。 手法は色々ありますが、カレンダーと同様のポップアップメニューを自作する手はスマートではないかと思います。 同一デザインに纏めておけば、かなりサイトが綺麗になると思われます。 (ちなみに「ドロップダウンリスト」という用語はHTMLでの定義ではありません。 IEの場合、windows標準の「コンボボックス」を無理にセレクトボックスへ転用した結果、バグが頻出している模様です。) 逆に、借用品のポップアップカレンダーを止めて、自力でサブウインドウ版を作ってみるのも宜しいかと思います。 ご提示のサイトのスクリプトをちょっと確認してみましたが、正直言って非常に「汚い」スクリプトですね。たぶんこの方は、本当はJavaScriptの特性には詳しくないのでしょう。 (本は書いているようですが、おそらくは『飾りに使う』ような「汚い」使い方を広めた書だったのでしょう。) JavaScriptのDate型は非常に強力です。この型の特性を充分に使いこなせば、カレンダー処理部分は、ほんの数十行で事足りてしまいます。 ご自分で工夫して、「短くてエレガントな」スクリプトを作ってみてください。 スクリプトの場合、長いコーディングはそのまま、動作速度の低下へ直結しますので。

keiko_takeuchi
質問者

お礼

このまま使うのはちょっと厳しそうですね。 ありがとうございました。

その他の回答 (1)

  • talepanda
  • ベストアンサー率58% (45/77)
回答No.1

ワリと有名なIEのバグで、カレンダを前面に表示することは不可能だったと思います。 カレンダーのオープンにあわせて、select要素のstyle.visibility="hidden"してあげるくらいかな。

keiko_takeuchi
質問者

お礼

有名なんですか。。。やはりバグなんですね。 ありがとうございました。

関連するQ&A

  • JQuery UIで、表示したタブの中にアコーディオンを追加したい

    こちらのページにあるようなタブをjQueryで作り、 http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm 出来上がったタブの中に、以下のページ http://allabout.co.jp/internet/javascript/closeup/CU20071215A/ にあるようなアコーディオンメニューを表示したいのですが、 タブの表示まではできるのですが、 アコーディオンメニューが追加できません。 実現へのヒント等、教えて頂ければ幸いです。

  • jQuery タブメニューへのダイレクトリンクの仕方を教えてください。

    jQuery UI タブ http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm を参考にタブメニューを制作しているのですが、 同ページ及び、他ページから各タブメニューへ ダイレクトにリンクすることはできるのでしょうか。 ただ、ここで http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3 とリンク先を指定すると「ソース」というところに ダイレクトにリンクするのですが、 ボタン等で指定するとうまくリンクしません。。。。。 方法があれば教えてください。 よろしくお願いします。

  • JavaScriptで著作権の年表示

    http://allabout.co.jp/internet/hpcreate/closeup/CU20061101A/index2.htm このページを参考に著作権の年をJavaScriptで表示させたところ、 FireFoxに限り画面が真っ白になって左上に「2008」とだけ表示されてしまいます。 ブラウザの戻るボタンを押すとちゃんと表示されるのですが、 この現象の原因と修正方法がわかる方教えていただけないでしょうか。 よろしくお願いいたします。

  • JavaScriptでドロップダウンリスト

    下記ページのようなものを作りたいです。 ---------- http://www.resonate.co.jp/ 中段「Access」の部分の感じ ---------- これはFlashですが、確かJavaScriptでもできたと記憶しています。 が、その作り方を紹介しているページを探し出すことが出来ませんでした。 このようなドロップダウンリストはJavaScriptで出来ますか?また、出来るとした場合、その方法を紹介しているページがあれば教えてください。

  • javascriptだけでドロップダウンリスト

    あるサイトに行ったら、htmlでなく(?)javascriptだけでドロップダウンリストを表示し、リンクさせていました。つまり小さなボタンを押すと、リストが広がって表示されます。これは、ちょっと面倒なテクニックでしょうか?短いスクリプトで使えるなら是非知りたい。長いものならパス・・・。

  • JavaScriptカレンダーの日付をクリックしてselectの値を変えたい

    http://allabout.co.jp/career/javascript/closeup/CU20020529/ こちらのサイトで公開されているJavaScriptを組み込んでいるところです。 (JavaScriptでカレンダーを作り、クリックした値を返すもの) サンプルでは<input type="text">に値を返しているのですが、 私は以下のselectのoptionにそれぞれ反映させたいと思っています。 <select name="year"> <select name="month"> <select name="day"> selectに反映させるために何処をいじっていいのか分からず、困っています。 どなたかアドバイスをいただけたら幸いです。

  • JavaScriptで入力文字制限

    こちらのページ {AllAbout:JavaScriptで入力文字制限!(入力チェック)} http://allabout.co.jp/internet/hpcreate/closeup/CU20050620A/index2.htm を参考に、入力内容をチェックしてくれるフォームを作成しようとしています。 しかし、私の環境(IE7)では、このページの例えばふりがな入力(ひらがな・カタカナのみ有効)で「123」と入力しEnterキーを押すとアラートが2度表示されてしまいます。これと同じ現象が私の作っているページでも発生しています。 フォーカスを失ったときにチェックをするというのは変えずに、Enterを押したときにアラートを1回しか表示させないようにするにはどうすれば良いのでしょうか。よろしくお願いします。

  • DBのデータをjavascript側で利用したい

    お世話になっております。 visual studio 2008でasp.net開発(VB)を行っております。 タイトルの通りなのですが、データバインドしたDBのデータの値をjavascript側に渡せず困っています。 具体的には、以下の通りです。 ■以下のテーブルがあります。  色 | 種類 | もの ===================  赤 |くだもの| りんご  紫 |くだもの| ぶどう  赤 | やさい | トマト  紫 | やさい | なす ■ASPのページには、ドロップダウンリストが2つあります。   ドロップダウンリストの値は、テーブルの"色"と"種類"のデータをバインドしています。   2つのドロップダウンリストを選択した時の"もの"の値をjavascript側で利用したいです。 この際のデータの渡し方が分からずに困っています。 私の行った手法としては、データバインドの出来るドロップダウンリストを新しく用意して、 そこへ一旦"もの"の値を入れておき、javascriptの「document.getElementById」を利用して 値を取得するという方法です。 実際上記の手法で期待する結果は得られましたが、結果取得用の3つ目のドロップダウンが 画面上に見えていることは好ましくありません。 そこで、visibleプロパティをFalseにしたところ、値が取得できなくなりました。 調べたところ、visibleプロパティをFalseにすると、画面描画だけでなく、HTML形式への変換も 行わなくなるので、javascriptへの値渡しも出来ないとの事でした。 とりあえず、暫定で3つ目のドロップダウンのwidthを0ptにしましたが、完全に消えるわけではないので、困っております。 長文になりましたが、現在ドロップダウンで暫定対応している点で、もっと一般的なな手法や案が御座いましたらご教示宜しくお願い致します。

  • PageLoadの後にJavascript実行したい

    お世話になります、よろしくお願いします。 VisualStudio2003でASP.NET(VB)とJavascriptを使ってサイト製作をしています。 ラジオボタンにJavascriptを入れて、項目の表示/非表示を切り替えています。(CSSのdisplay:noneとinlineを切替) これとは別に、ドロップダウンリストが2つ(A,B)あり、Aのドロップダウンリストを変更するとPostBackして、Bの選択肢が変化するといった風に作成しています。 ここで問題が発生し、PostBackが発生すると、項目の表示が初期状態に戻ってしまいました。 あれこれと考えて、Aにも項目の表示/非表示を切り替えるJavascriptを付けたのですが、どうもJavascriptが実行されてからPostBackが発生しているようで、お手上げです。 PostBackが発生しても、表示をそのままにできる方法は無いのでしょうか?よろしくご教授下さい。

  • レイヤー(?)、z-index(?)の順番がおかしい

    http://allabout.co.jp/career/javascript/closeup/CU20020529/ こちらのサイトで公開されているJavaScriptを組み込んでいるところです。 (JavaScriptでカレンダーを作り、クリックした値を返すもの) 早速自分のHTMLに埋め込んだところ、カレンダーのポップアップが <input type='text'>の「前面」に表示され、 <select>の「後ろ」に表示されてしまいます。 つまり、画面上に3つの層があり ポップアップのカレンダーがselectに隠れてしまっている状態です。 このポップアップのカレンダーを最前面に表示するにはどうすればいいでしょうか?